30:T55d,// This is the same template we used in lab! 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)); // Confusing physics stuff here 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)); // Draw the links const link = svg .append("g") .attr("stroke", "#999") .attr("stroke-opacity", 0.5) .selectAll("line") .data(links) .join("line") .attr("stroke-width", d => Math.sqrt(d.value)); // Draw the nodes const node = svg .append("g") .attr("stroke", "#fff") .attr("stroke-width", 1.5) .selectAll("circle") .data(nodes) .join("circle") .attr("r", 10) .attr("fill", d => colorScale(d.group)) .call(drag(simulation)); // Gives each node hover for their name 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(); }31:[{"id":"2697e78f878b5f12aab60d30ddcb00d20428778d82835440cf4574131106d371e6972117fb854ed615fa623a675669625a372c3397003ad35c39fcc3705c2dc6","href":"https://static.observableusercontent.com/files/2697e78f878b5f12aab60d30ddcb00d20428778d82835440cf4574131106d371e6972117fb854ed615fa623a675669625a372c3397003ad35c39fcc3705c2dc6","name":"randomNames.json","type":"application/json","lastModified":1590961851100.418,"size":1734}] 2e:{"title":"Networks - Avalani","cells":[{"id":0,"value":"md`# Networks - Avalani`","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":76,"value":"colorScale = d3.scaleOrdinal(d3.schemeCategory10).domain(1, 10)","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"md`### The Graph itself`","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"drag","pinned":false,"hidden":false,"mode":"ojs"},{"id":92,"value":"md`### Add some good good data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"mutable data = FileAttachment(\"randomNames.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":114,"value":"md`**Insert a name here:**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"viewof name = text({ submit: null })","pinned":false,"hidden":false,"mode":"ojs"},{"id":118,"value":"md`**Insert a group here:**`","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"viewof group = text({ submit: null })","pinned":false,"hidden":false,"mode":"ojs"},{"id":121,"value":"{\n const nodeButton = html`