2d:null 2e:["$","title",null,{"children":"Force-Directed Graph with tooltip | Maeve Kane | Observable"}] 33:T5a7,chart = { 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)) .force("charge", d3.forceManyBody()) .force("center", d3.forceCenter(width / 2, height / 2)) .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 => Math.sqrt(d.value)); const node = svg .append("g") .attr("stroke", "#fff") .attr("stroke-width", 1.5) .selectAll("circle") .data(nodes) .join("circle") .attr("r", d => d.degree + 2) .attr("fill", color) .on("mouseover", tooltip_in) // when the mouse hovers a node, call the tooltip_in function to create the tooltip .on("mouseout", tooltip_out) // when the mouse stops hovering a node, call the tooltip_out function to get rid of the tooltip .call(drag(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).attr("cy", d => d.y); }); return svg.node(); }34:[{"id":"5aa8a14267ce759730a0d8d2e83fe796c5c89d7349c3a00c2108e20289a9d09dfa98944f6c1fa534402beb567250949f97e4e37728a8d3c5f043244bd2d22b8f","href":"https://static.observableusercontent.com/files/5aa8a14267ce759730a0d8d2e83fe796c5c89d7349c3a00c2108e20289a9d09dfa98944f6c1fa534402beb567250949f97e4e37728a8d3c5f043244bd2d22b8f","name":"graph (1).json","type":"application/json","lastModified":1619213653565.612,"size":40685}] 31:{"id":"11edf8d79958bb12","slug":"force-directed-graph-with-tooltip","title":"Force-Directed Graph with tooltip","thumbnail":"b10294e0f779cd1221248868714b8d85ad5b159d98978e395f2ec49cdab23cce","access_level":"public","create_time":"$D2021-04-23T21:33:32.645Z","update_time":"$D2021-04-23T21:51:25.447Z","view_time":null,"first_public_time":"$D2021-04-23T21:50:57.640Z","has_unpublished_edits":null,"fork":{"id":"1ea6714b1088785a","slug":"all-one-people/2","title":"All One People","owner":{"id":"aa9e7a8a29012c93","login":"mkane2","name":"Maeve Kane"}},"stars":3,"starred":false,"owner":{"type":"team","id":"aa9e7a8a29012c93","login":"mkane2","name":"Maeve Kane","avatar_url":"https://avatars-next.observableusercontent.com/10f27e44a96d5e36afe9f72cf1af8b5efa3b0f668929d6850e6e7d05867b630c","tier":"starter_2024"},"version":387,"publish_version":387,"role":null,"authored":false,"authors":[{"type":"individual","id":"c33c0c6945323f32","login":"mkane2","name":"Maeve Kane","avatar_url":"https://avatars-next.observableusercontent.com/10f27e44a96d5e36afe9f72cf1af8b5efa3b0f668929d6850e6e7d05867b630c","tier":null}],"members":[{"type":"individual","id":"c33c0c6945323f32","login":"mkane2","name":"Maeve Kane","avatar_url":"https://avatars-next.observableusercontent.com/10f27e44a96d5e36afe9f72cf1af8b5efa3b0f668929d6850e6e7d05867b630c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":10,"collection":{"id":"e958648df2406e1f","slug":"network-examples","title":"Network examples","owner":{"id":"aa9e7a8a29012c93","login":"mkane2","name":"Maeve Kane"}},"type":"notebook","body":{"title":"Force-Directed Graph with tooltip","cells":[{"id":1,"value":"md`# Force-Directed Graph with tooltip\n\nThis is a demo network of 17th century English Quakers from the [Programming Historian Python network lesson](https://programminghistorian.org/en/lessons/exploring-and-analyzing-network-data-with-python). The [Colab notebook for the actual analysis is available here](https://colab.research.google.com/drive/18w9p4N3uvxQQtTXsZeOU87roPGdyHSuY?usp=sharing).\n\nThis is a fork with a dynamic tooltip function on hover.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"// name a variable tooltip, and style it using css properties\ntooltip = 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\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"//name a tooltip_in function to call when the mouse hovers a node\ntooltip_in = function(event, d) { // pass event and d to this function so that it can access d for our data\n return tooltip\n .html(\"

\" + d.id + \"

\") // add an html element with a header tag containing the name of the node. This line is where you would add additional information like: \"

\" + d.name + \"

\" + d.type + \"

\" Note the quote marks, pluses and
--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\n .style(\"visibility\", \"visible\") // make the tooltip visible on hover\n .style(\"top\", event.pageY + \"px\") // position the tooltip with its top at the same pixel location as the mouse on the screen\n .style(\"left\", event.pageX + \"px\"); // position the tooltip just to the right of the mouse location\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"// name a tooltip_out function to call when the mouse stops hovering\ntooltip_out = function() {\n return tooltip\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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":372,"value":"// this is some optional tooltip styling to make it look nice. This just uses regular css\nhtml`\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"md`### Get the data file`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"data = FileAttachment(\"graph (1).json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"md`### Define height`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"md`### Define the color scale`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"color = {\n const scale = d3.scaleOrdinal(d3.schemeCategory10);\n return d => scale(d.modularity);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":178,"value":"md`### Handle dragging`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"drag = 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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"md`### Include D3`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"