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(dataset.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(dataset.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"); edgelabels .append("textPath") //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. .attr("xlink:href", function (d, i) { return "#edgepath" + i; }) .style("text-anchor", "middle") .style("pointer-events", "none") .attr("startOffset", "50%") .text((d) => d.type); // Initialize the nodes const node = svg .selectAll(".nodes") .data(dataset.nodes) .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) //start - after a new pointer becomes active (on mousedown or touchstart). .on("drag", dragged) //drag - after an active pointer moves (on mousemove or touchmove). //.on("end", dragended) //end - after an active pointer becomes inactive (on mouseup, touchend or touchcancel). ); node .append("circle") .attr("r", (d) => 17) //+ d.runtime/20 ) .style("stroke", "grey") .style("stroke-opacity", 0.3) .style("stroke-width", (d) => d.runtime / 10) .style("fill", (d) => colorScale(d.group)); //.style("fill", "red"); node .append("title") .text( (d) => d.id + ": " + d.label + " - " + d.group + ", runtime:" + d.runtime + "min" ); node .append("text") .attr("dy", 4) .attr("dx", -15) .text((d) => d.name); node .append("text") .attr("dy", 12) .attr("dx", -8) .text((d) => d.runtime); //Listen for tick events to render the nodes as they update in your Canvas or SVG. simulation.nodes(dataset.nodes).on("tick", ticked); simulation.force("link").links(dataset.links); // 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) { if (!d3.event.active) simulation.alphaTarget(0.3).restart(); //sets the current target alpha to the specified number in the range [0,1]. 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()) .enter() .append("g") .attr("transform", (d, i) => `translate(${width},${i * 20})`); 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); //drawing the second legend const legend_g2 = svg .append("g") //.attr("transform", (d, i) => `translate(${width},${i * 20})`); .attr("transform", `translate(${width}, 120)`); legend_g2 .append("circle") .attr("r", 5) .attr("cx", 0) .attr("cy", 0) .style("stroke", "grey") .style("stroke-opacity", 0.3) .style("stroke-width", 15) .style("fill", "black"); legend_g2.append("text").attr("x", 15).attr("y", 0).text("long runtime"); legend_g2 .append("circle") .attr("r", 5) .attr("cx", 0) .attr("cy", 20) .style("stroke", "grey") .style("stroke-opacity", 0.3) .style("stroke-width", 2) .style("fill", "black"); legend_g2.append("text").attr("x", 15).attr("y", 20).text("short runtime"); return div; }4b:Ta12,test_chart = { // Sample nodes var nodes = [ { id: 1, name: "Node 1" }, { id: 2, name: "Node 2" }, { id: 3, name: "Node 3" }, { id: 4, name: "Node 4" } ]; // Sample links var links = [ { source: 1, target: 2 }, { source: 2, target: 3 }, { source: 3, target: 1 }, { source: 4, target: 1 } ]; const width = 700; const height = 500; // Set up the SVG container const svg = d3.create("svg").attr("width", width).attr("height", height); // Create the simulation var simulation = d3 .forceSimulation(nodes) .force("charge", d3.forceManyBody().strength(-50)) .force("center", d3.forceCenter(width / 2, height / 2)); // Create the links var link = svg .selectAll(".link") .data(links) .join("line") .attr("class", "link") .style("stroke-width", "2px"); // Create the rectangles as nodes var node = svg .append("g") .attr("fill", "#cb83d6") .attr("fill-opacity", 0.9) .attr("stroke", "#fff") .attr("stroke-width", 0.5) .selectAll(".node") .data(nodes) .enter() .append("rect") .attr("class", "node") .attr("width", 80) .attr("height", 40) .call( d3 .drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended) ); //Add labels to the nodes const labels = node .append("g") .attr("text-anchor", "middle") .attr("dominant-baseline", "middle") .attr("fill-opacity", 0.9) .selectAll("text") .data(nodes) .join("text") .text((d) => d.name) .attr("font-family", function (d, i) { return i < 5 ? "serif" : "sans-serif"; }) .attr("fill", "#3d3c3b") .style("font-size", 10) .attr("alignment-baseline", "central") .attr("x", 40) .attr("y", 20); // Update the positions of the nodes and links simulation.on("tick", function () { 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("x", function (d) { return d.x - 40; }) .attr("y", function (d) { return d.y - 20; }); }); // Drag functions function dragstarted(event, d) { if (!event.active) simulation.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; } function dragged(event, d) { d.fx = event.x; d.fy = event.y; } function dragended(event, d) { if (!event.active) simulation.alphaTarget(0); d.fx = null; d.fy = null; } return svg.node(); }4c:T437,//name a tooltip_in function to call when the mouse hovers a node (renamed for nodes) tooltip_nodes = function(event, d) { // pass event and d to this function so that it can access d for our data //return tooltip_2 d3.select(this) .attr("stroke-width", 2) .attr("stroke", "black"); //Adds a black stroke around the node return tooltip_2 .html("<h4>" + d.id + "</h4>") // add an html element with a header tag containing the name of the node. This line is where you would add additional information like: "<h4>" + d.name + "</h4></br><p>" + d.type + "</p>" Note the quote marks, pluses and </br>--these are necessary for javascript to put all the data and strings within quotes together properly. Any text needs to be all one line in .html() here .style("visibility", "visible") // make the tooltip visible on hover .style("top", event.pageY + "px") // position the tooltip with its top at the same pixel location as the mouse on the screen .style("left", event.pageX + "px"); // position the tooltip just to the right of the mouse location }4d:T410,//name a tooltip_in function to call when the mouse hovers a node (renamed for links) tooltip_links = function(event, d) { // pass event and d to this function so that it can access d for our data d3.select(this) .attr("stroke", "black"); //adds a black stroke return tooltip_2 .html("<h5>" + "Strength of the link is:"+ d.value + "</h5>") // add an html element with a header tag containing the name of the node. This line is where you would add additional information like: "<h4>" + d.name + "</h4></br><p>" + d.type + "</p>" Note the quote marks, pluses and </br>--these are necessary for javascript to put all the data and strings within quotes together properly. Any text needs to be all one line in .html() here .style("visibility", "visible") // make the tooltip visible on hover .style("top", event.pageY + "px") // position the tooltip with its top at the same pixel location as the mouse on the screen .style("left", event.pageX + "px"); // position the tooltip just to the right of the mouse location }4e:[{"id":"243f7923e2a7856b2d446523c836d5ec1f208af1c00d064676dd998fb15cae3ca202be0eef229b224d95bcbf9bbeb3f0985fa774bd160e4bc8ff93a791b66efb","href":"https://static.observableusercontent.com/files/243f7923e2a7856b2d446523c836d5ec1f208af1c00d064676dd998fb15cae3ca202be0eef229b224d95bcbf9bbeb3f0985fa774bd160e4bc8ff93a791b66efb","name":"heatmap_word2vec.png","type":"image/png","lastModified":1684247093591.089,"size":44163},{"id":"ac14018f2a656f4b2b9c67adf4f705898bb87419346e6dbed81b6f3d14a0997c263cf6b37e19d92f6342036b90f9b460b3add1b1c12f7cd6cf314aa7fdca070d","href":"https://static.observableusercontent.com/files/ac14018f2a656f4b2b9c67adf4f705898bb87419346e6dbed81b6f3d14a0997c263cf6b37e19d92f6342036b90f9b460b3add1b1c12f7cd6cf314aa7fdca070d","name":"mouse_force_directed-3.json","type":"application/json","lastModified":1684403684821.392,"size":6602},{"id":"37b03a9704056bc0998b6f6c66e23b9a0021039ad72cf04bcb71ba43c524b9a194f50e39e3df3756c37fd05b837dfc08a044b032f13da505fa409990d3ee8659","href":"https://static.observableusercontent.com/files/37b03a9704056bc0998b6f6c66e23b9a0021039ad72cf04bcb71ba43c524b9a194f50e39e3df3756c37fd05b837dfc08a044b032f13da505fa409990d3ee8659","name":"heatmap_jaccard.png","type":"image/png","lastModified":1684247093510.872,"size":23521},{"id":"a0408deac7f6a77155dd2671b879aab8960c6faf7c75b35836375c437ad8253f18488d3f7d547024a3796874be0f54e8a6fac5636decc1171b12359c22ce5fdf","href":"https://static.observableusercontent.com/files/a0408deac7f6a77155dd2671b879aab8960c6faf7c75b35836375c437ad8253f18488d3f7d547024a3796874be0f54e8a6fac5636decc1171b12359c22ce5fdf","name":"combined_word_senses.csv","type":"text/csv","lastModified":1684247093511.642,"size":7918}] 29:{"id":"aa548151707b250e","slug":null,"title":"Word Sense Data","thumbnail":"151c043613bc8954bfec1d4bec23069be6d370b92ed3f60d6b66518cafe7a228","access_level":"public","create_time":"$D2023-05-16T14:23:08.753Z","update_time":"$D2023-05-21T11:16:21.100Z","view_time":null,"first_public_time":"$D2023-05-16T14:23:08.753Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"07179e6e66389643","login":"raefkazi","name":"Raef Kazi","avatar_url":"https://avatars-next.observableusercontent.com/ff3d0626541674fd21f3e68c8095d4a4513963fab1e86dd9cf3a57f72cc21596","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":166,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"83103c92179e04d9","login":"raefkazi","name":"Raef Kazi","avatar_url":"https://avatars-next.observableusercontent.com/ff3d0626541674fd21f3e68c8095d4a4513963fab1e86dd9cf3a57f72cc21596","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"83103c92179e04d9","login":"raefkazi","name":"Raef Kazi","avatar_url":"https://avatars-next.observableusercontent.com/ff3d0626541674fd21f3e68c8095d4a4513963fab1e86dd9cf3a57f72cc21596","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Word Sense Data","cells":[{"id":0,"value":"# Word Sense Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":16,"value":"await FileAttachment(\"combined_word_senses.csv\").csv({typed: \"auto\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"md`${await FileAttachment(\"heatmap_jaccard.png\").image()}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"md`${await FileAttachment(\"heatmap_word2vec.png\").image()}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":30,"value":"# Force Directed Practice","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":60,"value":"dataset_exp4 = FileAttachment(\"mouse_force_directed-3.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"exp4_chart = force_directed_graph(dataset_exp4)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"dataset_exp4","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"$4a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"//create a simulation for an array of nodes, and compose the desired forces.\nsimulation = d3\n .forceSimulation()\n .force(\n \"link\",\n d3\n .forceLink() // This force provides links between nodes\n .id((d) => d.id) // This sets the node id accessor to the specified function. If not specified, will default to the index of a node.\n .distance(120)\n )\n .force(\"charge\", d3.forceManyBody().strength(-700)) // This adds repulsion (if it's negative) between nodes.\n .force(\"center\", d3.forceCenter(700 / 2, 500 / 2)) // This force attracts nodes to the center of the svg area","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"colorScale = d3\n .scaleOrdinal() //=d3.scaleOrdinal(d3.schemeSet2)\n .domain([\"Team A\", \"Team B\", \"Team C\", \"Team D\", \"Team E\"])\n .range([\"#ff9e6d\", \"#86cbff\", \"#c2e5a0\", \"#fff686\", \"#9e79db\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"$4b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"// Handle dragging\ndragging = simulation => {\n \n function dragstarted(event) {\n if (!event.active) simulation.alphaTarget(0.3).restart();\n event.subject.fx = event.subject.x;\n event.subject.fy = event.subject.y;\n }\n \n function dragged(event) {\n event.subject.fx = event.x;\n event.subject.fy = event.y;\n }\n \n function dragended(event) {\n if (!event.active) simulation.alphaTarget(0);\n event.subject.fx = null;\n event.subject.fy = null;\n }\n \n return d3.drag()\n .on(\"start\", dragstarted)\n .on(\"drag\", dragged)\n .on(\"end\", dragended);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"// name a variable tooltip, and style it using css properties\ntooltip_2 = d3\n .select(\"body\")\n .append(\"div\") // the tooltip always \"exists\" as its own html div, even when not visible\n .style(\"position\", \"absolute\") // the absolute position is necessary so that we can manually define its position later\n .style(\"visibility\", \"hidden\") // hide it from default at the start so it only appears on hover\n .style(\"background-color\", \"white\")\n .attr(\"class\", \"tooltip\")\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"// name a tooltip_out function to call when the mouse stops hovering\ntooltip_node_out = function() {\n d3.select(this).attr(\"stroke-width\", 1.5).attr(\"stroke\", \"#fff\");\n d3.select(this).attr(\"title\", null); //removes the black stroke\n return tooltip_2\n .transition()\n .duration(50) // give the hide behavior a 50 milisecond delay so that it doesn't jump around as the network moves\n .style(\"visibility\", \"hidden\"); // hide the tooltip when the mouse stops hovering\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"// name a tooltip_out function to call when the mouse stops hovering\ntooltip_link_out = function() {\n d3.select(this).attr(\"stroke\", \"#999\")\n .attr(\"stroke-opacity\", 0.6);\n return tooltip_2\n .transition()\n .duration(50) // give the hide behavior a 50 milisecond delay so that it doesn't jump around as the network moves\n .style(\"visibility\", \"hidden\"); // hide the tooltip when the mouse stops hovering\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"// this is some optional tooltip styling to make it look nice. This just uses regular css\nhtml`\n<style type=\"text/css\">\n .tooltip {\n fill: white;\n font-family: sans-serif;\n padding: 5px;\n border-radius: 5px;\n border: 1px solid grey;\n }\n\n</style>\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"//Define the color scale\ncolor_scale = {\n const scale = d3.scaleOrdinal(d3.schemeCategory10);\n return d => scale(d.group);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4e","stdlib":"1"}} 24:null </article></body></html>

25:["$","title",null,{"children":"Word Sense Data | Raef Kazi | Observable"}] 49:Taa7,function force_directed_graph(data) { const width = 700; const height = 500; //const links = dataset_exp4.links.map(d => Object.create(d)); //const nodes = dataset_exp4.nodes.map(d => Object.create(d)); const links = data.links.map((d) => Object.create(d)); const nodes = data.nodes.map((d) => Object.create(d)); const simulation = d3 .forceSimulation(nodes) .force( "link", d3 .forceLink(links) .id((d) => d.id) .distance((d) => (1 - d.value) * 70) ) //.force("charge", d3.forceManyBody()) .force("center", d3.forceCenter(width / 2, height / 2)) .force( "charge", d3 .forceManyBody() .strength(function (d, i) { var a = i == 0 ? -100 : -200; //var a = i == i.value*1000; return a; }) .distanceMin(200) .distanceMax(1000) ) .force( "collision", d3.forceCollide((d) => d.degree + 2) ); const svg = d3.create("svg").attr("height", height).attr("width", width); const link = svg .append("g") .attr("stroke", "#999") .attr("stroke-opacity", 0.6) .selectAll("line") .data(links) .join("line") .attr("stroke-width", (d) => d.value * 7) //Getting the "value" parameter from links to define width of the link .on("mouseover", tooltip_links) // when the mouse hovers a node, call the tooltip_in function to create the tooltip .on("mouseout", tooltip_link_out); // when the mouse stops hovering a node, call the tooltip_out function to get rid of the tooltip const node = svg .append("g") .attr("stroke", "#fff") .attr("stroke-width", 1.5) .selectAll("rect") .data(nodes) .join("rect") //.attr("r", d => (4 - d.depth)*5) //Since the innermost depth is 1, and we want it to be the biggest, we subtract it from the arbitrary value of 5 (since max depth would be 3) .attr("x", (d) => (d.depth * 10) / 2) .attr("y", (d) => (d.depth * 10) / 2) .attr("width", (d) => 40) .attr("height", (d) => 20) .attr("fill", color_scale) .on("mouseover", tooltip_nodes) // when the mouse hovers a node, call the tooltip_in function to create the tooltip .on("mouseout", tooltip_node_out) // when the mouse stops hovering a node, call the tooltip_out function to get rid of the tooltip .call(dragging(simulation)); simulation.on("tick", () => { 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("cx", (d) => d.x - 20).attr("cy", (d) => d.y - 10); }); //return svg.node(); return Object.assign(svg.node(), { scales: { color_scale } }); }4a:T2779,myChart = { const div = html`

`; const svg = d3 .select(div) .append("svg") .attr("width", 700) .attr("height", 500) .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", 23) // 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", 13) .attr("markerHeight", 13) .attr("xoverflow", "visible") .append("svg:path") .attr("d", "M 0,-5 L 10 ,0 L 0,5") .attr("fill", "#999") .style("stroke", "none"); //create some data const dataset = { nodes: [ { id: 1, name: "AGGR", label: "Aggregation", group: "Team C", runtime: 20 }, { id: 2, name: "ASMT", label: "Assessment Repository", group: "Team A", runtime: 60 }, { id: 3, name: "CALC", label: "Final Calc", group: "Team C", runtime: 30 }, { id: 4, name: "DEMO", label: "Demographic", group: "Team B", runtime: 40 }, { id: 5, name: "ELIG", label: "Eligibility", group: "Team B", runtime: 20 }, { id: 6, name: "GOAL", label: "Goal Setting", group: "Team C", runtime: 60 }, { id: 7, name: "GROW", label: "Growth Model", group: "Team C", runtime: 60 }, { id: 8, name: "LINK", label: "Linkage", group: "Team A", runtime: 100 }, { id: 9, name: "MOSL", label: "MOSL", group: "Team A", runtime: 80 }, { id: 10, name: "MOTP", label: "MOTP", group: "Team A", runtime: 20 }, { id: 11, name: "REPT", label: "Reporting", group: "Team E", runtime: 240 }, { id: 12, name: "SEDD", label: "State Data", group: "Team A", runtime: 30 }, { id: 13, name: "SNAP", label: "Snapshot", group: "Team A", runtime: 40 } ], links: [ { source: 1, target: 3, type: "Next -->>" }, { source: 6, target: 1, type: "Next -->>" }, { source: 7, target: 1, type: "Next -->>" }, { source: 9, target: 1, type: "Next -->>" }, { source: 2, target: 4, type: "Next -->>" }, { source: 2, target: 6, type: "Next -->>" }, { source: 2, target: 7, type: "Next -->>" }, { source: 2, target: 8, type: "Next -->>" }, { source: 2, target: 9, type: "Next -->>" }, { source: 10, target: 3, type: "Next -->>" }, { source: 3, target: 11, type: "Next -->>" }, { source: 8, target: 5, type: "Go to ->>" }, { source: 8, target: 11, type: "Go to ->>" }, { source: 6, target: 9, type: "Go to ->>" }, { source: 7, target: 9, type: "Go to ->>" }, { source: 8, target: 9, type: "Go to ->>" }, { source: 9, target: 11, type: "Go to ->>" }, { source: 12, target: 9, type: "Go to ->>" }, { source: 13, target: 11, type: "Go to ->>" }, { source: 13, target: 2, type: "Go to ->>" }, { source: 13, target: 4, type: "This way>>" }, { source: 13, target: 5, type: "This way>>" }, { source: 13, target: 8, type: "This way>>" }, { source: 13, target: 9, type: "This way>>" }, { source: 13, target: 10, type: "This way>>" }, { source: 4, target: 7, type: "Next -->>" }, { source: 4, target: 2, type: "Next -->>" } ] }; console.log("dataset is ...", dataset); // Initialize the links const link = svg .selectAll(".links") .data(dataset.links) .enter() .append("line") .attr("class", "links") .attr("marker-end", "url(#arrowhead)"); //The marker-end attribute defines the arrowhead or polymarker that will be drawn at the final vertex of the given shape. //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(dataset.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(dataset.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"); edgelabels .append("textPath") //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. .attr("xlink:href", function (d, i) { return "#edgepath" + i; }) .style("text-anchor", "middle") .style("pointer-events", "none") .attr("startOffset", "50%") .text((d) => d.type); // Initialize the nodes const node = svg .selectAll(".nodes") .data(dataset.nodes) .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) //start - after a new pointer becomes active (on mousedown or touchstart). .on("drag", dragged) //drag - after an active pointer moves (on mousemove or touchmove). //.on("end", dragended) //end - after an active pointer becomes inactive (on mouseup, touchend or touchcancel). ); node .append("circle") .attr("r", (d) => 17) //+ d.runtime/20 ) .style("stroke", "grey") .style("stroke-opacity", 0.3) .style("stroke-width", (d) => d.runtime / 10) .style("fill", (d) => colorScale(d.group)); //.style("fill", "red"); node .append("title") .text( (d) => d.id + ": " + d.label + " - " + d.group + ", runtime:" + d.runtime + "min" ); node .append("text") .attr("dy", 4) .attr("dx", -15) .text((d) => d.name); node .append("text") .attr("dy", 12) .attr("dx", -8) .text((d) => d.runtime); //Listen for tick events to render the nodes as they update in your Canvas or SVG. simulation.nodes(dataset.nodes).on("tick", ticked); simulation.force("link").links(dataset.links); // 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) { if (!d3.event.active) simulation.alphaTarget(0.3).restart(); //sets the current target alpha to the specified number in the range [0,1]. 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()) .enter() .append("g") .attr("transform", (d, i) => `translate(${width},${i * 20})`); 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); //drawing the second legend const legend_g2 = svg .append("g") //.attr("transform", (d, i) => `translate(${width},${i * 20})`); .attr("transform", `translate(${width}, 120)`); legend_g2 .append("circle") .attr("r", 5) .attr("cx", 0) .attr("cy", 0) .style("stroke", "grey") .style("stroke-opacity", 0.3) .style("stroke-width", 15) .style("fill", "black"); legend_g2.append("text").attr("x", 15).attr("y", 0).text("long runtime"); legend_g2 .append("circle") .attr("r", 5) .attr("cx", 0) .attr("cy", 20) .style("stroke", "grey") .style("stroke-opacity", 0.3) .style("stroke-width", 2) .style("fill", "black"); legend_g2.append("text").attr("x", 15).attr("y", 20).text("short runtime"); return div; }4b:Ta12,test_chart = { // Sample nodes var nodes = [ { id: 1, name: "Node 1" }, { id: 2, name: "Node 2" }, { id: 3, name: "Node 3" }, { id: 4, name: "Node 4" } ]; // Sample links var links = [ { source: 1, target: 2 }, { source: 2, target: 3 }, { source: 3, target: 1 }, { source: 4, target: 1 } ]; const width = 700; const height = 500; // Set up the SVG container const svg = d3.create("svg").attr("width", width).attr("height", height); // Create the simulation var simulation = d3 .forceSimulation(nodes) .force("charge", d3.forceManyBody().strength(-50)) .force("center", d3.forceCenter(width / 2, height / 2)); // Create the links var link = svg .selectAll(".link") .data(links) .join("line") .attr("class", "link") .style("stroke-width", "2px"); // Create the rectangles as nodes var node = svg .append("g") .attr("fill", "#cb83d6") .attr("fill-opacity", 0.9) .attr("stroke", "#fff") .attr("stroke-width", 0.5) .selectAll(".node") .data(nodes) .enter() .append("rect") .attr("class", "node") .attr("width", 80) .attr("height", 40) .call( d3 .drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended) ); //Add labels to the nodes const labels = node .append("g") .attr("text-anchor", "middle") .attr("dominant-baseline", "middle") .attr("fill-opacity", 0.9) .selectAll("text") .data(nodes) .join("text") .text((d) => d.name) .attr("font-family", function (d, i) { return i < 5 ? "serif" : "sans-serif"; }) .attr("fill", "#3d3c3b") .style("font-size", 10) .attr("alignment-baseline", "central") .attr("x", 40) .attr("y", 20); // Update the positions of the nodes and links simulation.on("tick", function () { 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("x", function (d) { return d.x - 40; }) .attr("y", function (d) { return d.y - 20; }); }); // Drag functions function dragstarted(event, d) { if (!event.active) simulation.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; } function dragged(event, d) { d.fx = event.x; d.fy = event.y; } function dragended(event, d) { if (!event.active) simulation.alphaTarget(0); d.fx = null; d.fy = null; } return svg.node(); }4c:T437,//name a tooltip_in function to call when the mouse hovers a node (renamed for nodes) tooltip_nodes = function(event, d) { // pass event and d to this function so that it can access d for our data //return tooltip_2 d3.select(this) .attr("stroke-width", 2) .attr("stroke", "black"); //Adds a black stroke around the node return tooltip_2 .html("<h4>" + d.id + "</h4>") // add an html element with a header tag containing the name of the node. This line is where you would add additional information like: "<h4>" + d.name + "</h4></br><p>" + d.type + "</p>" Note the quote marks, pluses and </br>--these are necessary for javascript to put all the data and strings within quotes together properly. Any text needs to be all one line in .html() here .style("visibility", "visible") // make the tooltip visible on hover .style("top", event.pageY + "px") // position the tooltip with its top at the same pixel location as the mouse on the screen .style("left", event.pageX + "px"); // position the tooltip just to the right of the mouse location }4d:T410,//name a tooltip_in function to call when the mouse hovers a node (renamed for links) tooltip_links = function(event, d) { // pass event and d to this function so that it can access d for our data d3.select(this) .attr("stroke", "black"); //adds a black stroke return tooltip_2 .html("<h5>" + "Strength of the link is:"+ d.value + "</h5>") // add an html element with a header tag containing the name of the node. This line is where you would add additional information like: "<h4>" + d.name + "</h4></br><p>" + d.type + "</p>" Note the quote marks, pluses and </br>--these are necessary for javascript to put all the data and strings within quotes together properly. Any text needs to be all one line in .html() here .style("visibility", "visible") // make the tooltip visible on hover .style("top", event.pageY + "px") // position the tooltip with its top at the same pixel location as the mouse on the screen .style("left", event.pageX + "px"); // position the tooltip just to the right of the mouse location }4e:[{"id":"243f7923e2a7856b2d446523c836d5ec1f208af1c00d064676dd998fb15cae3ca202be0eef229b224d95bcbf9bbeb3f0985fa774bd160e4bc8ff93a791b66efb","href":"https://static.observableusercontent.com/files/243f7923e2a7856b2d446523c836d5ec1f208af1c00d064676dd998fb15cae3ca202be0eef229b224d95bcbf9bbeb3f0985fa774bd160e4bc8ff93a791b66efb","name":"heatmap_word2vec.png","type":"image/png","lastModified":1684247093591.089,"size":44163},{"id":"ac14018f2a656f4b2b9c67adf4f705898bb87419346e6dbed81b6f3d14a0997c263cf6b37e19d92f6342036b90f9b460b3add1b1c12f7cd6cf314aa7fdca070d","href":"https://static.observableusercontent.com/files/ac14018f2a656f4b2b9c67adf4f705898bb87419346e6dbed81b6f3d14a0997c263cf6b37e19d92f6342036b90f9b460b3add1b1c12f7cd6cf314aa7fdca070d","name":"mouse_force_directed-3.json","type":"application/json","lastModified":1684403684821.392,"size":6602},{"id":"37b03a9704056bc0998b6f6c66e23b9a0021039ad72cf04bcb71ba43c524b9a194f50e39e3df3756c37fd05b837dfc08a044b032f13da505fa409990d3ee8659","href":"https://static.observableusercontent.com/files/37b03a9704056bc0998b6f6c66e23b9a0021039ad72cf04bcb71ba43c524b9a194f50e39e3df3756c37fd05b837dfc08a044b032f13da505fa409990d3ee8659","name":"heatmap_jaccard.png","type":"image/png","lastModified":1684247093510.872,"size":23521},{"id":"a0408deac7f6a77155dd2671b879aab8960c6faf7c75b35836375c437ad8253f18488d3f7d547024a3796874be0f54e8a6fac5636decc1171b12359c22ce5fdf","href":"https://static.observableusercontent.com/files/a0408deac7f6a77155dd2671b879aab8960c6faf7c75b35836375c437ad8253f18488d3f7d547024a3796874be0f54e8a6fac5636decc1171b12359c22ce5fdf","name":"combined_word_senses.csv","type":"text/csv","lastModified":1684247093511.642,"size":7918}] 29:{"id":"aa548151707b250e","slug":null,"title":"Word Sense Data","thumbnail":"151c043613bc8954bfec1d4bec23069be6d370b92ed3f60d6b66518cafe7a228","access_level":"public","create_time":"$D2023-05-16T14:23:08.753Z","update_time":"$D2023-05-21T11:16:21.100Z","view_time":null,"first_public_time":"$D2023-05-16T14:23:08.753Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"07179e6e66389643","login":"raefkazi","name":"Raef Kazi","avatar_url":"https://avatars-next.observableusercontent.com/ff3d0626541674fd21f3e68c8095d4a4513963fab1e86dd9cf3a57f72cc21596","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":166,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"83103c92179e04d9","login":"raefkazi","name":"Raef Kazi","avatar_url":"https://avatars-next.observableusercontent.com/ff3d0626541674fd21f3e68c8095d4a4513963fab1e86dd9cf3a57f72cc21596","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"83103c92179e04d9","login":"raefkazi","name":"Raef Kazi","avatar_url":"https://avatars-next.observableusercontent.com/ff3d0626541674fd21f3e68c8095d4a4513963fab1e86dd9cf3a57f72cc21596","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Word Sense Data","cells":[{"id":0,"value":"# Word Sense Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":16,"value":"await FileAttachment(\"combined_word_senses.csv\").csv({typed: \"auto\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"md`${await FileAttachment(\"heatmap_jaccard.png\").image()}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"md`${await FileAttachment(\"heatmap_word2vec.png\").image()}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":30,"value":"# Force Directed Practice","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":60,"value":"dataset_exp4 = FileAttachment(\"mouse_force_directed-3.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"exp4_chart = force_directed_graph(dataset_exp4)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"dataset_exp4","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"$4a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"//create a simulation for an array of nodes, and compose the desired forces.\nsimulation = d3\n .forceSimulation()\n .force(\n \"link\",\n d3\n .forceLink() // This force provides links between nodes\n .id((d) => d.id) // This sets the node id accessor to the specified function. If not specified, will default to the index of a node.\n .distance(120)\n )\n .force(\"charge\", d3.forceManyBody().strength(-700)) // This adds repulsion (if it's negative) between nodes.\n .force(\"center\", d3.forceCenter(700 / 2, 500 / 2)) // This force attracts nodes to the center of the svg area","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"colorScale = d3\n .scaleOrdinal() //=d3.scaleOrdinal(d3.schemeSet2)\n .domain([\"Team A\", \"Team B\", \"Team C\", \"Team D\", \"Team E\"])\n .range([\"#ff9e6d\", \"#86cbff\", \"#c2e5a0\", \"#fff686\", \"#9e79db\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"$4b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"// Handle dragging\ndragging = simulation => {\n \n function dragstarted(event) {\n if (!event.active) simulation.alphaTarget(0.3).restart();\n event.subject.fx = event.subject.x;\n event.subject.fy = event.subject.y;\n }\n \n function dragged(event) {\n event.subject.fx = event.x;\n event.subject.fy = event.y;\n }\n \n function dragended(event) {\n if (!event.active) simulation.alphaTarget(0);\n event.subject.fx = null;\n event.subject.fy = null;\n }\n \n return d3.drag()\n .on(\"start\", dragstarted)\n .on(\"drag\", dragged)\n .on(\"end\", dragended);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"// name a variable tooltip, and style it using css properties\ntooltip_2 = d3\n .select(\"body\")\n .append(\"div\") // the tooltip always \"exists\" as its own html div, even when not visible\n .style(\"position\", \"absolute\") // the absolute position is necessary so that we can manually define its position later\n .style(\"visibility\", \"hidden\") // hide it from default at the start so it only appears on hover\n .style(\"background-color\", \"white\")\n .attr(\"class\", \"tooltip\")\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"// name a tooltip_out function to call when the mouse stops hovering\ntooltip_node_out = function() {\n d3.select(this).attr(\"stroke-width\", 1.5).attr(\"stroke\", \"#fff\");\n d3.select(this).attr(\"title\", null); //removes the black stroke\n return tooltip_2\n .transition()\n .duration(50) // give the hide behavior a 50 milisecond delay so that it doesn't jump around as the network moves\n .style(\"visibility\", \"hidden\"); // hide the tooltip when the mouse stops hovering\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"// name a tooltip_out function to call when the mouse stops hovering\ntooltip_link_out = function() {\n d3.select(this).attr(\"stroke\", \"#999\")\n .attr(\"stroke-opacity\", 0.6);\n return tooltip_2\n .transition()\n .duration(50) // give the hide behavior a 50 milisecond delay so that it doesn't jump around as the network moves\n .style(\"visibility\", \"hidden\"); // hide the tooltip when the mouse stops hovering\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"// this is some optional tooltip styling to make it look nice. This just uses regular css\nhtml`\n<style type=\"text/css\">\n .tooltip {\n fill: white;\n font-family: sans-serif;\n padding: 5px;\n border-radius: 5px;\n border: 1px solid grey;\n }\n\n</style>\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"//Define the color scale\ncolor_scale = {\n const scale = d3.scaleOrdinal(d3.schemeCategory10);\n return d => scale(d.group);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4e","stdlib":"1"}} 24:null </article></body></html>