25:null 26:["$","title",null,{"children":"Untitled | pdeshlab | Observable"}] 2b:T8ef,chart = { const scale = 3 const textOffset = 10 var data = data_gen(csv,["TREE", "MOUNTAIN"]); 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().strength(-800)) .force("center", d3.forceCenter(width / 2, height / 2)); const svg = d3.create("svg") .attr("viewBox", [0, -30, width, height]); /* .force("x", d3.forceX()) .force("y", d3.forceY()); const svg = d3.create("svg") .attr("viewBox", [-width / 2, -height / 2, width, height]); */ const link = svg.append("g") .attr("stroke", "#999") .attr("stroke-opacity", .8) .selectAll("line") .data(links) .join("line") .attr("stroke-width", d => Math.sqrt(d.value)); const node = svg.append("g") .selectAll(".node") .data(nodes) .join("g") .attr("class", "node") .call(drag(simulation)); /* .attr("stroke", "#fff") .attr("stroke-width", 1.5) .selectAll("circle") .data(nodes) .join("circle") .attr("r", 7) .attr("fill", color) .call(drag(simulation)); */ const circle = node.append("circle") .attr("r", 5) .attr("fill", "#000000") .call(drag(simulation)); const text = node.append("text") .text(d => d.id) .attr("font-family", "Arial") .attr("font-size", "12px") .attr("stroke", "#00000"); 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); text .attr("x", d => d.x+textOffset) .attr("y", d => d.y); circle .attr("cx", d => d.x) .attr("cy", d => d.y); }); invalidation.then(() => simulation.stop()); //highlights paths node.on("mouseover", function(d) { var thisNode = d.id d3.selectAll(".circleNode").attr("r", 6); d3.select(this).attr("r", 12); link.attr("opacity", function(d) { return (d.source.id == thisNode || d.target.id == thisNode) ? 1 : 0.1 }); }); return svg.node(); } 2c:T5f7,function data_gen(csv, list) { var node = {}; var links = []; var link = {}; var nodes = []; var csv2 = csv.slice(); for (var j = 0; j < list.length; j++) { for (var i = 0; i < csv2.length; i++) { var row = csv2[i]; if (row[list[j]] == "0") { csv2.splice(i,1); i--; } } } for(var i = 0; i < csv2.length; i++) { var row = csv2[i]; for (var key in row) { if (row[key] == "1") { node[key] = 1; for (var k = 0; k < Math.max(nodes.length, 1); k++) { if (nodes.length > 0 && nodes[k].id == key) { break; } else if (k == Math.max(nodes.length, 1) - 1) { nodes.push({id:key, group:1}); } } } } var j1 = 0; for (var key1 in node) { var j2 = 0; for (var key2 in node) { link = {}; if (j1 < j2) { for (var k = 0; k < Math.max(links.length, 1); k++) { if (links.length > 0 && links[k].source == key1 && links[k].target == key2) { links[k].value += .1; break; } else if (k == Math.max(links.length, 1) - 1) { link.source = key1; link.target = key2; link.value = .1; links.push(link); } } } j2++; } j1++; } node = {}; } var data = {nodes: nodes, links: links}; return data; } 2d:[] 29:{"id":"f3046be86d911f39","slug":"untitled/2","title":"","thumbnail":"c05e9971f230daf92d05851a8a6caba06c08c177624b8a988725cdd7f8e9ed7d","access_level":"public","create_time":"$D2019-10-10T20:20:26.516Z","update_time":"$D2019-10-10T21:08:47.699Z","view_time":null,"first_public_time":"$D2019-10-10T21:06:50.454Z","fork":{"id":"5b9f11e1270fa602","slug":"force-directed-graph/2","title":"Force-Directed Graph","owner":{"id":"965c0c3c524a1179","login":"ar3607","name":"Anne-Laure Razat"}},"stars":0,"starred":false,"owner":{"type":"team","id":"30cb978b7bca5234","login":"pdeshlab","name":"","avatar_url":"https://avatars-next.observableusercontent.com/df68225bce3d1c68af97423ac617d34ddf9c418647935d1441bbc0a0b24a5ee2","tier":"starter_2024"},"version":455,"publish_version":455,"role":null,"authored":false,"authors":[{"type":"individual","id":"5d9be9f37b296f3b","login":"pdeshlab","name":"","avatar_url":"https://avatars-next.observableusercontent.com/df68225bce3d1c68af97423ac617d34ddf9c418647935d1441bbc0a0b24a5ee2","tier":null}],"members":[{"type":"individual","id":"5d9be9f37b296f3b","login":"pdeshlab","name":"","avatar_url":"https://avatars-next.observableusercontent.com/df68225bce3d1c68af97423ac617d34ddf9c418647935d1441bbc0a0b24a5ee2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"","cells":[{"id":1,"value":"{}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$2b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"csv = d3.csv(\"https://raw.githubusercontent.com/pdeshlab/Bob-Ross-Data-Viz/master/Bob%20Ross%20Data.csv\");\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"$2c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"color = {\n const scale = d3.scaleOrdinal(d3.schemeCategory10);\n return d => scale(d.group);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"drag = simulation => {\n \n function dragstarted(d) {\n if (!d3.event.active) simulation.alphaTarget(0.3).restart();\n d.fx = d.x;\n d.fy = d.y;\n }\n \n function dragged(d) {\n d.fx = d3.event.x;\n d.fy = d3.event.y;\n }\n \n function dragended(d) {\n if (!d3.event.active) simulation.alphaTarget(0);\n d.fx = null;\n d.fy = null;\n }\n \n return d3.drag()\n .on(\"start\", dragstarted)\n .on(\"drag\", dragged)\n .on(\"end\", dragended);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":364,"value":"viewof button = {\n const form = html`