element provides an accessible, short-text description of any SVG container element or graphics element. //Text in a <title> element is not rendered as part of the graphic, but browsers usually display it as a tooltip. link.append("title") .text(d => d.type); const edgepaths = svg.selectAll(".edgepath") //make path go along with the link provide position for link labels .data(links) .enter() .append('path') .attr('class', 'edgepath') .attr('fill-opacity', 0) .attr('stroke-opacity', 0) .attr('id', function (d, i) {return 'edgepath' + i}) .style("pointer-events", "none"); const edgelabels = svg.selectAll(".edgelabel") .data(links) .enter() .append('text') .style("pointer-events", "none") .attr('class', 'edgelabel') .attr('id', function (d, i) {return 'edgelabel' + i}) .attr('font-size', 10) .attr('fill', '#aaa'); // To render text along the shape of a <path>, enclose the text in a <textPath> element that has an href attribute with a reference to the <path> element. edgelabels.append('textPath') .attr('xlink:href', function (d, i) {return '#edgepath' + i}) .style("text-anchor", "middle") .style("pointer-events", "none") .attr("startOffset", "50%") .text(d => d.label); // Initialize the nodes const node = svg.selectAll(".nodes") .data(data.nodes, d => d.id) .join(enter => { return enter .append("g") .attr("class", "nodes") .call(d3.drag() // sets the event listener for the specified typenames and returns the drag behavior. .on("start", dragstarted) .on("drag", dragged) //.on("end", dragended) ); }, update => update, exit => { return exit.remove(); } ) node.append("circle") .attr("r", d => (d.size ?? 1) * 17) .style("fill", d => colorScale(d.group ?? "default")) node.append("title") .text(d => d.id + ": " + d.name + " - " + d.group); node.append("text") .attr("dx", 0) .attr("dy", 4) .attr("text-anchor", "middle") .text(d => d.name); const simulation = d3.forceSimulation() .force("link", d3.forceLink().id(d => d.id).distance(120)) .force("charge", d3.forceManyBody().strength(-1000)) // repulsion between nodes. .force("center", d3.forceCenter(width / 2, height / 2)); //Listen for tick events to render the nodes as they update in your Canvas or SVG. try { simulation .nodes(data.nodes) .on("tick", ticked); simulation.force("link") .links(links) .id(d => d.id); } catch (error) { console.log(error) console.log(simulation) } // This function is run at each iteration of the force algorithm, updating the nodes position (the nodes data array is directly manipulated). function ticked() { link.attr("x1", d => d.source.x) .attr("y1", d => d.source.y) .attr("x2", d => d.target.x) .attr("y2", d => d.target.y); node.attr("transform", d => `translate(${d.x},${d.y})`); edgepaths.attr('d', d => 'M ' + d.source.x + ' ' + d.source.y + ' L ' + d.target.x + ' ' + d.target.y); } // When the drag gesture starts, the targeted node is fixed to the pointer // The simulation is temporarily “heated” during interaction by setting the target alpha to a non-zero value. function dragstarted(d) { //sets the current target alpha to the specified number in the range [0,1]. if (!d3.event.active) simulation.alphaTarget(0.3).restart(); d.fy = d.y; //fx - the node’s fixed x-position. Original is null. d.fx = d.x; //fy - the node’s fixed y-position. Original is null. } // When the drag gesture starts, the targeted node is fixed to the pointer function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } //the targeted node is released when the gesture ends // function dragended(d) { // if (!d3.event.active) simulation.alphaTarget(0); // d.fx = null; // d.fy = null; // console.log("dataset after dragged is ...",dataset); // } // drawing the legend const legend_g = svg.selectAll(".legend") .data(colorScale.domain()) .join(enter => { return enter .append("g") .attr("transform", (d, i) => `translate(${width},${i * 20})`); }, update => update, exit => { return exit.remove(); } ) legend_g.append("circle") .attr("cx", 0) .attr("cy", 0) .attr("r", 5) .attr("fill", colorScale); legend_g.append("text") .attr("x", 10) .attr("y", 5) .text(d => d); return div }46:[] 43:{"id":"a9b411481e1ef469","slug":null,"title":"Force-Directed Graph-o-Matic","thumbnail":"da6080a536fae22a6504144ca6b7d6090b8de120bb7dee93dea555470bfc9a80","access_level":"public","create_time":"$D2023-03-31T09:31:50.451Z","update_time":"$D2023-04-11T07:57:55.417Z","view_time":null,"first_public_time":"$D2023-03-31T09:31:50.451Z","has_unpublished_edits":null,"fork":{"id":"3be2b020673c6c71","slug":"force-directed-graph-network-graph-with-arrowheads-and-lab","title":"Force-Directed Graph(Network graph) with arrowheads and labels","owner":{"id":"07eb89e13a02f14c","login":"xianwu","name":""}},"stars":0,"starred":false,"owner":{"type":"team","id":"2f56a9e0c10f640a","login":"datasparq-matt","name":"Matt Simmons","avatar_url":"https://avatars-next.observableusercontent.com/6be6333d48f09b772cd2f2445d42d3c0a90a826d17167bb4dd09a83193748083","tier":"starter_2024","bio":"","following":false},"version":359,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b3a32e38a20f5b21","login":"datasparq-matt","name":"Matt Simmons","avatar_url":"https://avatars-next.observableusercontent.com/6be6333d48f09b772cd2f2445d42d3c0a90a826d17167bb4dd09a83193748083","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"b3a32e38a20f5b21","login":"datasparq-matt","name":"Matt Simmons","avatar_url":"https://avatars-next.observableusercontent.com/6be6333d48f09b772cd2f2445d42d3c0a90a826d17167bb4dd09a83193748083","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Force-Directed Graph-o-Matic","cells":[{"id":0,"value":"md`# Force-Directed Graph-o-Matic`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"viewof rawNodes = Inputs.textarea({\n label: \"Nodes\", \n rows: 10,\n value: `id, name, group, size\n1, JavaScript, Language, 1.78\n2, D3, Library\n3, HTML, Markup\n4, CSS, Language\n5, SVG, Markup\n6, WebAssembly, Language, 1.43\n7, Go, Language, 0.63`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"viewof rawLinks = Inputs.textarea({label: \"Links\", rows: 10, value: `source, target, label, size\n2, 1, Wow!\n1, 4\n1, 5\n5, 3, , 6\n6, 1\n4, 3\n7, 6`})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"viewof rawGroups = Inputs.textarea({label: \"Groups\", rows: 5, value: `name, colour\ndefault, #aaa\nLanguage, #bebeee\nLibrary, #aaa\nMarkup, #b49bb9`})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"height = 600 - margin.top - margin.bottom","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"width = 890 - margin.left - margin.right","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"margin = ({top: 30, right: 80, bottom: 5, left: 5}); ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"data = {\n return {\n nodes: parseCSV(rawNodes), \n links: parseCSV(rawLinks),\n groups: parseCSV(rawGroups),\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"allIDs = {\n return data.nodes.map(d => d.id)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"colorScale = d3.scaleOrdinal() //=d3.scaleOrdinal(d3.schemeSet2)\n .domain(data.groups.map(d => d.name))\n .range(data.groups.map(d => d.colour))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"parseCSV = function (text) {\n let rows = text.split(\"\\n\")\n let headers = rows[0].split(\",\").map(dd => dd.trim())\n rows = rows.slice(1).map(d => d.split(\",\").map(dd => dd.trim()))\n rows = rows.filter(d => d.filter(dd => dd != \"\").length >= 2)\n rows = rows.map((d) => {\n let row = {}\n for (let i = 0; i < d.length; i++) {\n row[headers[i]] = isNaN(parseFloat(d[i])) ? d[i] : parseFloat(d[i])\n }\n return row\n })\n return rows\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"html`\n<style> \n\n .links { \n stroke: #999; \n stroke-opacity: 0.6; \n }\n\n text {\n pointer-events: none;\n fill: #000;\n font: 10px sans-serif;\n }\n\n</style>`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W46","stdlib":"1"}} 44:"$43:body" </article></body></html>

3e:null 3f:["$","title",null,{"children":"Force-Directed Graph-o-Matic | Matt Simmons | Observable"}] 45:T1abb,myChart = { if (typeof(data.nodes) === "undefined" || typeof(data.links) === "undefined" ) { return html`

Invalid data

` } // remove any links that reference non-existent nodes const links = data.links.filter(d => allIDs.indexOf(d.source) > -1 && allIDs.indexOf(d.target) > -1) const div = html`

`; const svg = d3.select(div) .append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", `translate(${margin.left},${margin.top})`); //appending little triangles, path object, as arrowhead //The element is used to store graphical objects that will be used at a later time //The element defines the graphic that is to be used for drawing arrowheads or polymarkers on a given , , or element. svg.append('defs').append('marker') .attr("id", 'arrowhead') .attr('viewBox','-0 -5 10 10') //the bound of the SVG viewport for the current SVG fragment. defines a coordinate system 10 wide and 10 high starting on (0,-5) .attr('refX', 38) // .style('refX', "calc(100% - 23px)") // x coordinate for the reference point of the marker. If circle is bigger, this need to be bigger. .attr('refY', 0) .attr('orient', 'auto') .attr('markerWidth', 6) .attr('markerHeight', 6) .attr('xoverflow', 'visible') .append('svg:path') .attr('d', 'M 0,-5 L 10 ,0 L 0,5') .attr('fill', '#999') .style('stroke','none'); // Initialize the links const link = svg.selectAll(".links") .data(links) .join(enter => { return enter.append("line") .attr("class", "links") .attr('marker-end', d => (d.size ?? 1) === 1 ? 'url(#arrowhead)' : "") }, update => update, exit => { return exit.remove(); } ) link .attr("stroke-width", d => (d.size ?? 1)) //The element provides an accessible, short-text description of any SVG container element or graphics element. //Text in a <title> element is not rendered as part of the graphic, but browsers usually display it as a tooltip. link.append("title") .text(d => d.type); const edgepaths = svg.selectAll(".edgepath") //make path go along with the link provide position for link labels .data(links) .enter() .append('path') .attr('class', 'edgepath') .attr('fill-opacity', 0) .attr('stroke-opacity', 0) .attr('id', function (d, i) {return 'edgepath' + i}) .style("pointer-events", "none"); const edgelabels = svg.selectAll(".edgelabel") .data(links) .enter() .append('text') .style("pointer-events", "none") .attr('class', 'edgelabel') .attr('id', function (d, i) {return 'edgelabel' + i}) .attr('font-size', 10) .attr('fill', '#aaa'); // To render text along the shape of a <path>, enclose the text in a <textPath> element that has an href attribute with a reference to the <path> element. edgelabels.append('textPath') .attr('xlink:href', function (d, i) {return '#edgepath' + i}) .style("text-anchor", "middle") .style("pointer-events", "none") .attr("startOffset", "50%") .text(d => d.label); // Initialize the nodes const node = svg.selectAll(".nodes") .data(data.nodes, d => d.id) .join(enter => { return enter .append("g") .attr("class", "nodes") .call(d3.drag() // sets the event listener for the specified typenames and returns the drag behavior. .on("start", dragstarted) .on("drag", dragged) //.on("end", dragended) ); }, update => update, exit => { return exit.remove(); } ) node.append("circle") .attr("r", d => (d.size ?? 1) * 17) .style("fill", d => colorScale(d.group ?? "default")) node.append("title") .text(d => d.id + ": " + d.name + " - " + d.group); node.append("text") .attr("dx", 0) .attr("dy", 4) .attr("text-anchor", "middle") .text(d => d.name); const simulation = d3.forceSimulation() .force("link", d3.forceLink().id(d => d.id).distance(120)) .force("charge", d3.forceManyBody().strength(-1000)) // repulsion between nodes. .force("center", d3.forceCenter(width / 2, height / 2)); //Listen for tick events to render the nodes as they update in your Canvas or SVG. try { simulation .nodes(data.nodes) .on("tick", ticked); simulation.force("link") .links(links) .id(d => d.id); } catch (error) { console.log(error) console.log(simulation) } // This function is run at each iteration of the force algorithm, updating the nodes position (the nodes data array is directly manipulated). function ticked() { link.attr("x1", d => d.source.x) .attr("y1", d => d.source.y) .attr("x2", d => d.target.x) .attr("y2", d => d.target.y); node.attr("transform", d => `translate(${d.x},${d.y})`); edgepaths.attr('d', d => 'M ' + d.source.x + ' ' + d.source.y + ' L ' + d.target.x + ' ' + d.target.y); } // When the drag gesture starts, the targeted node is fixed to the pointer // The simulation is temporarily “heated” during interaction by setting the target alpha to a non-zero value. function dragstarted(d) { //sets the current target alpha to the specified number in the range [0,1]. if (!d3.event.active) simulation.alphaTarget(0.3).restart(); d.fy = d.y; //fx - the node’s fixed x-position. Original is null. d.fx = d.x; //fy - the node’s fixed y-position. Original is null. } // When the drag gesture starts, the targeted node is fixed to the pointer function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } //the targeted node is released when the gesture ends // function dragended(d) { // if (!d3.event.active) simulation.alphaTarget(0); // d.fx = null; // d.fy = null; // console.log("dataset after dragged is ...",dataset); // } // drawing the legend const legend_g = svg.selectAll(".legend") .data(colorScale.domain()) .join(enter => { return enter .append("g") .attr("transform", (d, i) => `translate(${width},${i * 20})`); }, update => update, exit => { return exit.remove(); } ) legend_g.append("circle") .attr("cx", 0) .attr("cy", 0) .attr("r", 5) .attr("fill", colorScale); legend_g.append("text") .attr("x", 10) .attr("y", 5) .text(d => d); return div }46:[] 43:{"id":"a9b411481e1ef469","slug":null,"title":"Force-Directed Graph-o-Matic","thumbnail":"da6080a536fae22a6504144ca6b7d6090b8de120bb7dee93dea555470bfc9a80","access_level":"public","create_time":"$D2023-03-31T09:31:50.451Z","update_time":"$D2023-04-11T07:57:55.417Z","view_time":null,"first_public_time":"$D2023-03-31T09:31:50.451Z","has_unpublished_edits":null,"fork":{"id":"3be2b020673c6c71","slug":"force-directed-graph-network-graph-with-arrowheads-and-lab","title":"Force-Directed Graph(Network graph) with arrowheads and labels","owner":{"id":"07eb89e13a02f14c","login":"xianwu","name":""}},"stars":0,"starred":false,"owner":{"type":"team","id":"2f56a9e0c10f640a","login":"datasparq-matt","name":"Matt Simmons","avatar_url":"https://avatars-next.observableusercontent.com/6be6333d48f09b772cd2f2445d42d3c0a90a826d17167bb4dd09a83193748083","tier":"starter_2024","bio":"","following":false},"version":359,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b3a32e38a20f5b21","login":"datasparq-matt","name":"Matt Simmons","avatar_url":"https://avatars-next.observableusercontent.com/6be6333d48f09b772cd2f2445d42d3c0a90a826d17167bb4dd09a83193748083","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"b3a32e38a20f5b21","login":"datasparq-matt","name":"Matt Simmons","avatar_url":"https://avatars-next.observableusercontent.com/6be6333d48f09b772cd2f2445d42d3c0a90a826d17167bb4dd09a83193748083","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Force-Directed Graph-o-Matic","cells":[{"id":0,"value":"md`# Force-Directed Graph-o-Matic`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"viewof rawNodes = Inputs.textarea({\n label: \"Nodes\", \n rows: 10,\n value: `id, name, group, size\n1, JavaScript, Language, 1.78\n2, D3, Library\n3, HTML, Markup\n4, CSS, Language\n5, SVG, Markup\n6, WebAssembly, Language, 1.43\n7, Go, Language, 0.63`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"viewof rawLinks = Inputs.textarea({label: \"Links\", rows: 10, value: `source, target, label, size\n2, 1, Wow!\n1, 4\n1, 5\n5, 3, , 6\n6, 1\n4, 3\n7, 6`})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"viewof rawGroups = Inputs.textarea({label: \"Groups\", rows: 5, value: `name, colour\ndefault, #aaa\nLanguage, #bebeee\nLibrary, #aaa\nMarkup, #b49bb9`})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"height = 600 - margin.top - margin.bottom","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"width = 890 - margin.left - margin.right","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"margin = ({top: 30, right: 80, bottom: 5, left: 5}); ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"data = {\n return {\n nodes: parseCSV(rawNodes), \n links: parseCSV(rawLinks),\n groups: parseCSV(rawGroups),\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"allIDs = {\n return data.nodes.map(d => d.id)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"colorScale = d3.scaleOrdinal() //=d3.scaleOrdinal(d3.schemeSet2)\n .domain(data.groups.map(d => d.name))\n .range(data.groups.map(d => d.colour))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"parseCSV = function (text) {\n let rows = text.split(\"\\n\")\n let headers = rows[0].split(\",\").map(dd => dd.trim())\n rows = rows.slice(1).map(d => d.split(\",\").map(dd => dd.trim()))\n rows = rows.filter(d => d.filter(dd => dd != \"\").length >= 2)\n rows = rows.map((d) => {\n let row = {}\n for (let i = 0; i < d.length; i++) {\n row[headers[i]] = isNaN(parseFloat(d[i])) ? d[i] : parseFloat(d[i])\n }\n return row\n })\n return rows\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"html`\n<style> \n\n .links { \n stroke: #999; \n stroke-opacity: 0.6; \n }\n\n text {\n pointer-events: none;\n fill: #000;\n font: 10px sans-serif;\n }\n\n</style>`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W46","stdlib":"1"}} 44:"$43:body" </article></body></html>