30:T653,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 + ' ' + datum.group); }) .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(); }31:[{"id":"a54fa5363b4035634b31bda01f902f2620a54a6366986631347558458e2484388de6575e5015e38bccc7db6637d87f80ad4ed7bdcab81ec3f31b75908a22a42d","href":"https://static.observableusercontent.com/files/a54fa5363b4035634b31bda01f902f2620a54a6366986631347558458e2484388de6575e5015e38bccc7db6637d87f80ad4ed7bdcab81ec3f31b75908a22a42d","name":"miserables.json","type":"application/json","lastModified":1591072601600.91,"size":18844}] 2e:{"title":"Networks Vuu","cells":[{"id":0,"value":"md`# Networks Vuu`","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":67,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"md`### Adding New Nodes`","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"md`Enter a name:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":94,"value":"viewof name = text({ submit: null })","pinned":false,"hidden":false,"mode":"ojs"},{"id":102,"value":"md`Enter a group:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":96,"value":"viewof group = text({ submit: null })","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"value":"{\n const button = html`