31:T63f,chart = { const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); 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)); 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", 5) .attr("fill", color) // added code to show name of node .on('mouseover', function(d) { const m = d3.mouse(this); const datum = Object.getPrototypeOf(d); svg .append('text') .attr('x', m[0]) .attr('y', m[1] - 10) .attr('id', 'tooltip') .attr('fill', 'black') .text(datum.id); }) .on('mouseout', d => { d3.select('#tooltip').remove(); }) .call(drag(simulation)); node.append("title").text(d => d.id); 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); }); invalidation.then(() => simulation.stop()); return svg.node(); }32:[{"id":"a54fa5363b4035634b31bda01f902f2620a54a6366986631347558458e2484388de6575e5015e38bccc7db6637d87f80ad4ed7bdcab81ec3f31b75908a22a42d","href":"https://static.observableusercontent.com/files/a54fa5363b4035634b31bda01f902f2620a54a6366986631347558458e2484388de6575e5015e38bccc7db6637d87f80ad4ed7bdcab81ec3f31b75908a22a42d","name":"miserables.json","type":"application/json","lastModified":1590695116518.498,"size":18844}] 2f:{"title":"Lab 9 - Networks (Template) Kota","cells":[{"id":0,"value":"md`# Lab 9 - Networks (Template) Kota`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"summary = md`In this notebook, you will build an **interactive network diagram tool** in which users can input new _nodes_ and _links_ into the diagram.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"set_up = md`## Set up`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"displayCaution(\n \"Make sure you fork and rename this notebook before continuing!\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"md`To create a notebook for your assignment, please do the following (see [this notebook](https://observablehq.com/@info474/creating-assignments?collection=@info474/teaching-process) for more details on each step):\n

**Fork Assignment**: You should fork this assignment (make sure to fork it _within_ the Team). _Do not_ edit this notebook before forking it

**Rename Assignment**: Add your last name to the assignment name by changing the header cell value (e.g., to _Interactivity Freeman_)

**Add Assignment to Collection**: add the assignment to the [appropriate collection](https://observablehq.com/collection/@info474/network-assignment)

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"network_builder = md`## Network Builder\nIn the cells below, you'll create an interactive network diagram builder. Keep in mind, you'll need to support the following interactions:\n- Adding new **nodes** to the digram\n- Adding new **links** to the diagram\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":32,"value":"md`We'll be working with some simple starter code from [this notebook](https://observablehq.com/@d3/force-directed-graph?collection=@d3/d3-force).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"data = FileAttachment(\"miserables.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"color = {\n const scale = d3.scaleOrdinal(d3.schemeCategory10);\n return d => scale(d.group);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"drag = simulation => {\n function dragstarted(d) {\n if (!d3.event.active) simulation.alphaTarget(0.3).restart();\n d.fx = d.x;\n d.fy = d.y;\n }\n\n function dragged(d) {\n d.fx = d3.event.x;\n d.fy = d3.event.y;\n }\n\n function dragended(d) {\n if (!d3.event.active) simulation.alphaTarget(0);\n d.fx = null;\n d.fy = null;\n }\n\n return d3\n .drag()\n .on(\"start\", dragstarted)\n .on(\"drag\", dragged)\n .on(\"end\", dragended);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":36,"value":"md`## Adding New Nodes\n\nTo add a new node to the networks diagram you'll need a name and a group. You'll need to create either a simple form or input that adds this information as an Object. Here is a recomended development strategy for this part: \n\n- Create two text inputs\n - one text input will accept a name and the other will accept a group\n- Create a \"submit\" button\n - When a user clicks the submit button check if both text inputs are not empty\n- Add the new data to the \\`nodes\\` array in the \\`data\\` array. Make sure your data is formatted correctly (check the \\`nodes\\` array for the correct format).\n- Call \\`chart.update()\\`\n\nYou may want to import some text inputs and buttons from [@jashkenas/inputs](https://observablehq.com/@jashkenas/inputs#textDemo). To test your code you may want to move the submit button close to the chart.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":235,"value":"import { text, button } from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs"},{"id":239,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":242,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":246,"value":"viewof nodeSubmitBtn = button({ value: 'submit' })","pinned":false,"hidden":false,"mode":"ojs"},{"id":283,"value":"mutable nodeCounter = 0","pinned":true,"hidden":false,"mode":"ojs"},{"id":251,"value":"{\n nodeSubmitBtn;\n // if this is clicked, then run the rest of the code\n if (nodeCounter > 0) {\n const name = document.getElementById('name');\n const group = document.getElementById('group');\n data.nodes.unshift({\n id: name.value,\n group: parseInt(group.value)\n });\n } else {\n mutable nodeCounter++;\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":256,"value":"data","pinned":true,"hidden":false,"mode":"ojs"},{"id":176,"value":"md`## Adding New Links\n\nTo add a link between two nodes you'll need a unique identifier for each node. In this case, we can just assume that each character's name is unique. Again, you'll need to create some simple inputs to accomplish this task. Here is a recommended development strategy:\n\n- Create 3 text inputs.\n - Two inputs will accept a name\n - One input will accept a length for the link\n- Create a submit button\n- When the button is clicked, add a new link to the \\`data.links\\` array. Make sure to check the \\`data.links\\` array for how to format your data.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":267,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":270,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":274,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":276,"value":"viewof linkBtn = button({ value: 'Submit' })","pinned":true,"hidden":false,"mode":"ojs"},{"id":278,"value":"{\n linkBtn;\n\n const source = document.getElementById('source').value;\n const target = document.getElementById('target').value;\n const length = document.getElementById('length').value;\n\n data.links.unshift({\n source: source,\n target: target,\n value: parseInt(length)\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":26,"value":"feedback = md`## Feedback\nIn the cell below, please let us know which pieces of the assignment you found particularly challenging, and if you had any issues specific to working with the Observable platform.`","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"appendix = md`## Appendix`","pinned":true,"hidden":false,"mode":"ojs"},{"id":18,"value":"import { displayCaution, table_styles } from \"@info474/utilities\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"table_styles","pinned":true,"hidden":false,"mode":"ojs"},{"id":64,"value":"d3 = require('d3')","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}