30:T4a9,chart2 = { 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 svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); 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) .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(); }31:[{"id":"a54fa5363b4035634b31bda01f902f2620a54a6366986631347558458e2484388de6575e5015e38bccc7db6637d87f80ad4ed7bdcab81ec3f31b75908a22a42d","href":"https://static.observableusercontent.com/files/a54fa5363b4035634b31bda01f902f2620a54a6366986631347558458e2484388de6575e5015e38bccc7db6637d87f80ad4ed7bdcab81ec3f31b75908a22a42d","name":"miserables.json","type":"application/json","lastModified":1590696965862.21,"size":18844}] 2e:{"title":"Networks Vo","cells":[{"id":0,"value":"md`# Networks Vo`","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":32,"value":"md`To start import \\`chart\\` from [this notebook](https://observablehq.com/@d3/force-directed-graph?collection=@d3/d3-force) which contains a simple networks diagram and download the \\`miserables.json\\` file. Then attach and load the json file into your notebook. Name the data \\`mydata\\`.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":116,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":59,"value":"data = FileAttachment(\"miserables.json\").json()","pinned":false,"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 a text input. A user should submit new nodes as 'name group' (e.g. 'Mike 5).\n- Use [split](https://www.w3schools.com/jsref/jsref_split.asp) to break apart the input string into an array.\n- Add the new data to the \\`nodes\\` array in the \\`mydata\\` array. Make sure your data is formatted correctly (check the \\`nodes\\` array for the correct format).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":75,"value":"viewof submitBtn = button({ value: 'Submit' })","pinned":true,"hidden":false,"mode":"ojs"},{"id":69,"value":"{\n submitBtn;\n\n const inputArray = document.getElementById('string').value.split(\" \");\n\n if (inputArray[0] != \"\" && inputArray[1] != \"\") {\n data.nodes.unshift({\n id: inputArray[0],\n group: inputArray[1]\n });\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":92,"value":"data","pinned":true,"hidden":false,"mode":"ojs"},{"id":83,"value":"md`## Adding New Links \nsource target length --> split`","pinned":true,"hidden":false,"mode":"ojs"},{"id":96,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":100,"value":"viewof submitBtn2 = button({ value: 'Submit' })","pinned":true,"hidden":false,"mode":"ojs"},{"id":104,"value":"{\n submitBtn2;\n\n const inputArray2 = document.getElementById('string2').value.split(\" \");\n\n if (inputArray2[0] != \"\" && inputArray2[1] != \"\" && inputArray2[2] != \"\") {\n data.links.unshift({\n source: inputArray2[0],\n target: inputArray2[1],\n length: inputArray2[2]\n });\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":109,"value":"data","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":false,"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":66,"value":"import { text, button } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":20,"value":"table_styles","pinned":true,"hidden":false,"mode":"ojs"},{"id":121,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":118,"value":"import { chart, height, color, drag } from \"@d3/force-directed-graph\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}