30:Tdc8,linkageChart = { const highlightColor1 = "#FFA12a"; const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); let localNodes = _.cloneDeep(nodes); let localLinks = _.cloneDeep(links); let activeNodeText = ""; const simulation = d3 .forceSimulation(localNodes) .force( "link", d3 .forceLink(localLinks) .id(d => d.id) .distance(element => { return element.value; }) .strength(1) ) .force("charge", d3.forceManyBody().strength(forceSlider)) .force("center", d3.forceCenter(width / 2, height / 2)); let activeNodeSpan = svg .append("g") .append("text") .text("Node:" + activeNodeText) .attr("transform", element => { let x = margin.left + 10; let y = margin.top + 10; return "translate(" + x + "," + y + ")"; }); /* hiddenDivs .join("text") .text(element => { return element.id; }) .attr("style", "visibility:visible") .attr("transform", element => { let x = element.x; let y = element.y; return "translate(" + x + "," + y + ")"; });*/ const linksPointer = svg .append("g") //.attr("stroke", "#878787") .selectAll("line") .data(localLinks) .join("line") .attr("stroke-opacity", element => { if (element.new) { return .7; } else { return .3; } }) .attr("stroke", element => { if (element.new) { return "#FF1100"; } else { return "#878787"; } }) .attr("id", element => { return "l" + element.target.id + element.source.id; }) .on("mouseover", element => { let elementId = "#l" + element.target.id + element.source.id; d3.select(elementId) .attr("stroke", element => { if (element.new) { return "#FF0000"; } else { return highlightColor1; } }) .attr("stroke-opacity", 0.9); activeNodeSpan.text(element.target.id + " <-> " + element.source.id); }) .on("mouseout", element => { let elementId = "#l" + element.target.id + element.source.id; d3.select(elementId) .attr("stroke", element => { if (element.new) { return "#FF1100"; } else { return "#878787"; } }) .attr("stroke-opacity", 0.6); }) .attr("stroke-width", d => Math.sqrt(d.value)); const nodesPointer = svg .append("g") .attr("stroke", "#FFFFFF") .attr("stroke-width", 1.2) .selectAll("circle") .data(localNodes) .join("circle") .attr("fill", "#000000") .attr("id", element => { return "n" + element.id; }) .on("mouseover", element => { let elementId = "#n" + element.id; d3.select(elementId) .attr("fill", highlightColor1) .attr("stroke-opacity", 0.9); activeNodeText = element.id; activeNodeSpan.text("Node:" + activeNodeText); }) .on("mouseout", element => { let elementId = "#n" + element.id; d3.select(elementId) .attr("fill", "#000000") .attr("stroke-opacity", 1.0); }) .attr("r", 5); simulation.on("tick", () => { linksPointer .attr("x1", d => d.source.x) .attr("y1", d => d.source.y) .attr("x2", d => d.target.x) .attr("y2", d => d.target.y); nodesPointer.attr("cx", d => d.x).attr("cy", d => d.y); }); invalidation.then(() => simulation.stop()); return svg.node(); }31:[{"id":"ebd9ae71c5ab384aa2fc84caa6ac4441c7322ead424e27eb199c24c7c7a28b192d598335489fd1de05f0e8c4d84248dcde7d492621aad481aaa72e655e2ebdbf","href":"https://static.observableusercontent.com/files/ebd9ae71c5ab384aa2fc84caa6ac4441c7322ead424e27eb199c24c7c7a28b192d598335489fd1de05f0e8c4d84248dcde7d492621aad481aaa72e655e2ebdbf","name":"stack_network_links.csv","type":"text/csv","lastModified":1592762700026.607,"size":16490}] 2e:{"title":"Coding Language Networks","cells":[{"id":0,"value":"md`# Coding Language Networks`","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":82,"value":"md`### Language name`","pinned":true,"hidden":false,"mode":"ojs"},{"id":70,"value":"viewof newLanguageInput = text({\n value: \"psql\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":104,"value":"md`### Language target`","pinned":true,"hidden":false,"mode":"ojs"},{"id":106,"value":"viewof languageTargetInput = text({\n value: \"spring\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":110,"value":"md`### Linkage Strength`","pinned":true,"hidden":false,"mode":"ojs"},{"id":114,"value":"viewof linkageStrengthInput = html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":77,"value":"onSubmitButtonClick = () => {\n let newLanguageName = newLanguageInput;\n let languageTarget = languageTargetInput;\n let linkageStrength = linkageStrengthInput;\n\n if (newLanguageName && languageTarget) {\n if (!linkageStrength) {\n linkageStrength = 50;\n }\n links.push({\n source: newLanguageName,\n target: languageTarget,\n value: linkageStrength,\n new: true\n });\n resetNodes();\n\n d3.select(\"#submitResponse\").text(\n newLanguageName + \" and \" + languageTarget + \" added!\"\n );\n } else {\n d3.select(\"#submitResponse\").text(\n \"Please input both a node and target name.\"\n );\n }\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":68,"value":"{\n const btn = html`

Add new Link

`;\n btn.onclick = onSubmitButtonClick;\n\n\n return btn;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":332,"value":"{\n const clearBtn = html``;\n clearBtn.onclick = element => {\n /* _.forEach(links, (element, index) => {\n if (element.new) {\n console.log(\"Deleteing \", element);\n delete links[index];\n }\n });*/\n d3.select(\"#submitResponse\").text(\"Dataset reset.\");\n mutable links = _.cloneDeep(baseLinks);\n resetNodes();\n };\n return clearBtn;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":223,"value":"md`### Force Slider\n* Lower values are more zoomed in.\n* Higher values are more compact.\n* Small groupings won't go offscreen with higher values.\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":220,"value":"viewof forceSlider = slider({\n min: -80,\n max: -1\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":127,"value":"$30","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\n\nData from https://www.kaggle.com/stackoverflow/stack-overflow-tag-network?select=stack_network_nodes.csv\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":128,"value":"width = 800","pinned":true,"hidden":false,"mode":"ojs"},{"id":130,"value":"height=700","pinned":true,"hidden":false,"mode":"ojs"},{"id":132,"value":"margin = ({\n top: 30,\n bottom: 20,\n left: 50,\n right: 10\n})","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":63,"value":"_ = require('lodash')","pinned":true,"hidden":false,"mode":"ojs"},{"id":64,"value":"d3 = require('d3')","pinned":true,"hidden":false,"mode":"ojs"},{"id":73,"value":"import { text, button, slider } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":83,"value":"linksRaw = FileAttachment(\"stack_network_links.csv\").text()","pinned":true,"hidden":false,"mode":"ojs"},{"id":271,"value":"baseLinks=d3.csvParse(linksRaw)","pinned":true,"hidden":false,"mode":"ojs"},{"id":88,"value":"mutable links = _.cloneDeep(baseLinks)","pinned":true,"hidden":false,"mode":"ojs"},{"id":95,"value":"mutable nodes = {\n let idSet = _.uniqBy(links, \"source\").map(element => {\n console.log(element.source);\n return { id: element.source };\n });\n let targetSet = _.uniqBy(links, \"target\").map(element => {\n return { id: element.target };\n });\n let combinedArrays = _.union(idSet, targetSet);\n let combinedSet = _.uniqBy(combinedArrays, \"id\");\n return combinedSet;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":353,"value":"resetNodes = () => {\n let idSet = _.uniqBy(links, \"source\").map(element => {\n return { id: element.source };\n });\n let targetSet = _.uniqBy(links, \"target\").map(element => {\n return { id: element.target };\n });\n let combinedArrays = _.union(idSet, targetSet);\n let combinedSet = _.uniqBy(combinedArrays, \"id\");\n mutable nodes = combinedSet;\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}