25:["$","title",null,{"children":"Networks - BLOC | Ruben THOMAS | Observable"}] 49:T573,// 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)) //Retiré car pose pb .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(); }4a:[{"id":"2697e78f878b5f12aab60d30ddcb00d20428778d82835440cf4574131106d371e6972117fb854ed615fa623a675669625a372c3397003ad35c39fcc3705c2dc6","href":"https://static.observableusercontent.com/files/2697e78f878b5f12aab60d30ddcb00d20428778d82835440cf4574131106d371e6972117fb854ed615fa623a675669625a372c3397003ad35c39fcc3705c2dc6","name":"randomNames.json","type":"application/json","lastModified":1682719911154.938,"size":1734}] 29:{"id":"c1c26ee13e99d206","slug":null,"title":"Networks - BLOC","thumbnail":"563bcc58db1c123b248015fc249698f070a3ef1f652bb1def7ff1ff6e30bbee5","access_level":"public","create_time":"$D2023-04-28T22:11:51.154Z","update_time":"$D2023-04-28T22:20:53.530Z","view_time":null,"first_public_time":"$D2023-04-28T22:11:51.154Z","has_unpublished_edits":null,"fork":{"id":"ee262df9b39dd3d2","slug":"networks-avalani","title":"Networks - Avalani","owner":{"id":"d534f9cbd78a5d1b","login":"info474","name":"Spring 2020 Info Vis"}},"stars":0,"starred":false,"owner":{"type":"team","id":"0d47fa586209c7b5","login":"leblocdunet","name":"Ruben THOMAS","avatar_url":"https://avatars-next.observableusercontent.com/27010161af0e8a2a650f23b03c06b7fe2f4adc9ad81267e72566a57213e79d95","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":200,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"7503eedf9ef4cf63","login":"leblocdunet","name":"Ruben THOMAS","avatar_url":"https://avatars-next.observableusercontent.com/27010161af0e8a2a650f23b03c06b7fe2f4adc9ad81267e72566a57213e79d95","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"7503eedf9ef4cf63","login":"leblocdunet","name":"Ruben THOMAS","avatar_url":"https://avatars-next.observableusercontent.com/27010161af0e8a2a650f23b03c06b7fe2f4adc9ad81267e72566a57213e79d95","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Networks - BLOC","cells":[{"id":0,"value":"md`# Networks - BLOC`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"set_up = md`## Set up`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"displayCaution(\n \"Make sure you fork and rename this notebook before continuing!\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"colorScale = d3.scaleOrdinal(d3.schemeCategory10).domain(1, 10)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"md`### The Graph itself`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"drag","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"md`### Add some good good data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"mutable data = FileAttachment(\"randomNames.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"md`**Insert a name here:**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"viewof name = text({ submit: null })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"md`**Insert a group here:**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"viewof group = text({ submit: null })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"{\n const nodeButton = html`