31:T9fc,chart = { const svg = d3 .select(DOM.svg(width, height)) .attr("viewBox", [0, 0, width-5, height+150]) .style("background-color", "black"); const defs = svg.append("defs"); const filter = defs.append("filter").attr("id", "glow"); filter .append("feGaussianBlur") .attr("stdDeviation", "5") .attr("result", "coloredBlur"); const feMerge = filter.append("feMerge"); feMerge.append("feMergeNode").attr("in", "coloredBlur"); feMerge.append("feMergeNode").attr("in", "SourceGraphic"); const spacecraft = svg .append("g") .attr("transform", `translate(${margin.top},${margin.top})`) .selectAll("circle") .data(data) .join("circle") .attr("class", "circle") .attr("r", d => radius(d.mass)) .attr("cx", width / 2) .attr("cy", height / 2) .attr("fill", d => (d.application == "Experimental" ? "#fec919" : "white")) .attr("stroke", d => d.application == "Experimental" ? "#fec919" : "white" ) .style("stroke-width", 2.5) .style("filter", "url(#glow)"); simulation .nodes(data) .on("tick", d => spacecraft.attr("cx", d => d.x).attr("cy", d => d.y)) .on("end", tooltip); function tooltip(d) { let labels = data .filter(d => d.application == "Experimental") .map(d => { return { x: d.x + 20, y: d.y + 20, dx: d.dx || d.x > 550 ? 65 : -65, dy: d.dy || d.y > 550 ? 40 : -40, color: "orange", note: { title: d.name, label: d.description, wrap: 150, align: "middle", bgPadding: 1.5 }, subject: { radius: 22 } }; }); console.log(labels); const type = d3.annotationCustomType(d3.annotationCalloutCircle, { className: "custom", connector: { type: "elbow" }, note: { lineType: "vertical", align: "middle" } }); let makeAnnot = d3 .annotation() .type(type) .textWrap(180) .annotations(labels) .on("subjectover",function(annotation){ annotation.type.a.selectAll("g.annotation-connector,g.annotation-note").attr("visibility","visibile")}) .on("subjectout",function(annotation){ annotation.type.a.selectAll("g.annotation-connector,g.annotation-note").attr("visibility","hidden") }); svg.append("g").call(makeAnnot); svg.selectAll("g.annotation-connector,g.annotation-note").attr("visibility","hidden"); } return svg.node(); }32:[{"id":"2c407b41c39cc3bf59ab881d8438be990cbe90430a9f005e6dbc88023967104f345943e060ce2b59e5f6546114adae99411a6fad9ed4eddd7fdfb336ed45e377","href":"https://static.observableusercontent.com/files/2c407b41c39cc3bf59ab881d8438be990cbe90430a9f005e6dbc88023967104f345943e060ce2b59e5f6546114adae99411a6fad9ed4eddd7fdfb336ed45e377","name":"data.csv","type":"text/csv","lastModified":1617723072810.864,"size":8220}] 2f:{"title":"Indian Space Research Organisation's Experimental Satellites.","cells":[{"id":0,"value":"html`

Indian Space Research Organisation's Experimental Satellites.

Week 1:Comparisons. Day 6:Experimental.

#30daychartchallenge
Hover over yellow circles for more info.

` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":341,"value":"html`

Data Credit:\nIndian Space Research Organisation.

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"simulation = d3.forceSimulation()\n .force(\"center\", d3.forceCenter()\n .x(width / 2)\n .y(height / 2))\n .force(\"charge\", d3.forceManyBody().strength(.2))\n .force(\"collide\",d3.forceCollide()\n .strength(.5)\n .radius(35))","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"radius = d3.scaleSqrt()\n .domain([d3.min(data, d => d.mass), d3.max(data, d => d.mass)])\n .range([8, 35])","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"data = FileAttachment(\"data.csv\").csv({ typed: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"height = 1000","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"margin = ({ top: 20, right: 150, bottom: 30, left: 50 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"d3 = require(\"d3@6\", \"d3-svg-annotation\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"style = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}