31:Tf21, Timeline = { const height = 300; const svg = d3.select(DOM.svg(width, height)); var nodes = []; history.forEach(function(d,i) { nodes.push({ year:+d.year, index:i, history:d.history, }) }) var margin = {top: 20, right: 20, bottom: 60, left: 20} var x = d3.scaleLinear().rangeRound([50, width-50]).domain(d3.extent(nodes,function(d) { return d.year})); var palette = d3.interpolatePlasma; // https://github.com/d3/d3-scale-chromatic const simulation = d3.forceSimulation() .force("x", d3.forceX(function(d) { return x(+d.year); }).strength(1)) .force("y", d3.forceY(height / 2)) .force("collide", d3.forceCollide(4)); simulation .nodes(nodes) .on("tick", ticked); var color = d3.scaleLinear().range([0,1]); svg.append("g").attr("transform", "translate(0," + (height-margin.bottom) + ")") .call(d3.axisBottom(x)); // Update the data with circleData! const markers = [[1991,"The World Wide Web went online"],[1997,"The first social media site was created: SixDegrees"], [2004,"Facebook started"]] const timeLineLines = svg.selectAll("line.timeLineLines").data(markers); // Nothing happens at this point because the data is not entered yet // So let's enter the data and use it to position (cx,cy) and size (r) the circles timeLineLines.enter().append("line") .attr("class","timeLineLines") .attr("x1", function(d) { return x(d[0]); }) .attr("x2", function(d) { return x(d[0]); }) .attr("y1", function(d) { return (height/2)-50; }) .attr("y2", function(d) { return height-margin.bottom; }) .style("stroke", "black") .style("opacity",.5) .style("stroke-width", "1px") const timeLineMarkers = svg.selectAll("circle.timeLineMarkers").data(markers); // Nothing happens at this point because the data is not entered yet // So let's enter the data and use it to position (cx,cy) and size (r) the circles timeLineMarkers.enter().append("circle") .attr("class","timeLineMarkers") .attr("cx", function(d) { console.log(d); return x(d[0]); }) .attr("cy", function(d) { return (height/2)-50; }) .attr("r", function(d) { return 5; }) .style("stroke", "black") .style("stroke-width", "1px") .style("fill", "white") .append("title") .text(function(d) { return d[1] }) // Update the data with circleData! const newCircles = svg.selectAll("circle.timelinepips").data(nodes); color.domain(d3.extent(nodes,function(d) { return d.year})) // Nothing happens at this point because the data is not entered yet // So let's enter the data and use it to position (cx,cy) and size (r) the circles newCircles.enter().append("circle") .attr("id","timelinepips") .attr("class",function(d) { return (d.year==1934) ? "point" : "timelinepips"; }) .attr("cx", function(d) { return x(d.year); }) .attr("cy", function(d) { return height/2; }) .attr("r", function(d) { return 4; }) .style("stroke", "black") .style("stroke-width", function(d) { return (d.year==1934) ? "2px" : "0px"; }) .style("fill", function(d) { return palette(color(d.year)); }) .append("title") .text(function(d) { return d.history }) svg.selectAll("circle.timelinepips") .on("mouseover", function() { d3.select(this).style("stroke-width","1px") }) .on("mouseout", function() { d3.select(this).style("stroke-width","0px") }) function ticked() { svg.selectAll("circle#timelinepips") .attr("cx", function(d) { return d.x; }) .attr("cy", function(d) { return d.y; }) } return svg.node(); }32:T4b0,chart = { const width = 800 const height = 400 const simulation = d3.forceSimulation(nodes) .force("link", d3.forceLink(links).id(d => d.id).distance(10).strength(1)) .force("charge", d3.forceManyBody().strength(-10)) .force("center", d3.forceCenter(width / 2, height / 2).strength(1)); const svg = d3.select(DOM.svg(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", "lightgrey") .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(); }33:T4cc,center = { const width = 800 const height = 400 const simulation = d3.forceSimulation(nodes) .force("link", d3.forceLink(links).id(d => d.id).distance(+linkDistance).strength(+linkStrength)) .force("charge", d3.forceManyBody().strength(+charge)) .force("center", d3.forceCenter(width / 2, height / 2).strength(1)); const svg = d3.select(DOM.svg(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", "lightgrey") .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(); }34:T5a1,Degree = { const height = 150 var n = [{name:0},{name:1},{name:2},{name:3},{name:4},{name:5}] var l = [{source:n[0],target:n[1]},{source:n[0],target:n[2]},{source:n[0],target:n[3]},{source:n[0],target:n[4]},{source:n[0],target:n[5]}] console.log(n); console.log(n[0]); const simulation = d3.forceSimulation(n) .force("link", d3.forceLink(l).distance(50) ) .force("charge", d3.forceManyBody().strength([-100])) .force("center", d3.forceCenter(width / 2, height / 2)) .on("tick", ticked); const svg = d3.select(DOM.svg(width, height)); const link = svg.append("g") .style("stroke", "#999") .style("stroke-opacity", 0.6) .selectAll("line") .data(l) .enter().append("line") .attr("stroke-width", "2px"); const node = svg.append("g") .style("stroke", "#fff") .style("stroke-width", 1.5) .selectAll("circle") .data(n) .enter().append("circle") .attr("r", 10) .attr("stroke-width", "2px").style("stroke", "#999") .attr("fill", function(d,i) { return (d.name=="0") ? "black" : (d.name=="1") ? "steelblue" : "white"}) .call(drag(simulation)); function ticked() { 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); } return svg.node(); }35:T62b,degreeChart = { ComputerCentrality() const height = 900 const simulation = d3.forceSimulation(nodes) .force("link", d3.forceLink(links).id(d => d.index) .distance(d => 0) .strength(1) ) .force("charge", d3.forceManyBody()) .force("center", d3.forceCenter(width / 2, height / 2)) .on("tick", ticked); const svg = d3.select(DOM.svg(width, height)); const link = svg.append("g") .style("stroke", "#999") .style("stroke-opacity", 0.6) .selectAll("line") .data(links) .enter().append("line") .attr("stroke-width", d => Math.sqrt(d.value)); const scale = d3.scaleOrdinal(d3.schemeCategory10); const node = svg.append("g") .style("stroke", "#fff") .style("stroke-width", 1.5) .selectAll("circle") .data(nodes) .enter().append("circle") .attr("class","degree") .attr("r", d => 0) .attr("fill", function(d) { return scale(d.group)}) node.append("title") .text(d => d.name); function ticked() { 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); } console.log(degreeType); while(true){ yield Promises.tick(1000, svg.node()); svg.selectAll("circle.degree") .transition() .duration(750) .delay(function(d,i) { return i * 100; }) .attr("r", d => d[degreeType]*5) } yield svg.node(); }36:[] 2f:{"title":"Network Graphs","cells":[{"id":0,"value":"md`# Network Graphs`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"html`\n\nJacob Moreno is credited with developing the first\n

sociogram\n \n

\n\n

\nin the 1930s to study interpersonal relationships.\n
\n\nHis 1934 book Who Shall Survive? contains some of the earliest graphical depictions of social networks (sociograms).\n

\n\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":197,"value":"md`### Data Prep`","pinned":false,"hidden":false,"mode":"ojs"},{"id":203,"value":"data = (await fetch(\"https://gist.githubusercontent.com/dudaspm/1b2d88fa42a1c945f9f758493248c0e5/raw/359a85131949abb01ca88d93075715cd7f1de453/tree.json\")).json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":204,"value":"nodes = data.nodes.map(d=> ({id:d.name}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":365,"value":"links = data.links.map(d=>({\"source\":nodes[d.source.index],\"target\":nodes[d.target.index]}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":199,"value":"md`## Starting Graph: `","pinned":false,"hidden":false,"mode":"ojs"},{"id":200,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":360,"value":"md` ### Simulation\n\nLink: https://observablehq.com/@d3/simulation-tick`","pinned":false,"hidden":false,"mode":"ojs"},{"id":326,"value":"viewof linkStrength = radio({title: 'Link Strength',options:d3.range(11).map(d=>(d/10).toString()),value: '0.5'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":345,"value":"viewof linkDistance = radio({title: 'Link Distance',options:d3.range(11).map(d=>(d*10).toString()),value: '10'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":351,"value":"viewof charge = radio({title: 'Charge',options:d3.range(11).map(d=>(d*10-90).toString()),value: '-10'})","pinned":false,"hidden":false,"mode":"ojs"},{"id":292,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":213,"value":"tex.block`G(raph):=(V|E) \\quad V(ertices) = 0,1,...i \\quad E(dge) = (0,1),(1,2),(s_{ource},t_{arget})`","pinned":false,"hidden":false,"mode":"ojs"},{"id":214,"value":"md`Degree Centrality - Historically first and conceptually simplest is degree centrality, which is defined as the number of links incident upon a node (i.e., the number of ties that a node has). The degree can be interpreted in terms of the immediate risk of a node for catching whatever is flowing through the network (such as a virus, or some information). In the case of a directed network (where ties have direction), we usually define two separate measures of degree centrality, namely indegree and outdegree. Accordingly, indegree is a count of the number of ties directed to the node and outdegree is the number of ties that the node directs to others. When ties are associated to some positive aspects such as friendship or collaboration, indegree is often interpreted as a form of popularity, and outdegree as gregariousness. - https://en.wikipedia.org/wiki/Centrality#Degree_centrality`","pinned":false,"hidden":false,"mode":"ojs"},{"id":216,"value":"tex.block`c_i^d=\\sum_{t:t \\neq s} E_{s,t}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":255,"value":"md`In each of the following networks, the black node has higher centrality than the blue node according to\na particular measure. \nhttps://cs.brynmawr.edu/Courses/cs380/spring2013/section02/slides/05_Centrality.pdf`","pinned":false,"hidden":false,"mode":"ojs"},{"id":220,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":224,"value":"function ComputerCentrality() {\n nodes.forEach(function(d,i) {\n nodes[i].degree = 0;\n nodes[i].indegree = 0;\n nodes[i].outdegree = 0;\n })\n links.forEach(function(d,i) {\n links[i].source.degree = links[i].source.degree + 1;\n links[i].target.degree = links[i].target.degree + 1;\n links[i].target.indegree = links[i].target.indegree + 1;\n links[i].source.outdegree = links[i].source.outdegree + 1;\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":226,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":228,"value":"viewof degreeType = DOM.select([\"degree\", \"indegree\", \"outdegree\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":230,"value":"md`Betweenness Centrality`","pinned":false,"hidden":false,"mode":"ojs"},{"id":232,"value":"tex.block`c_i^b=\\displaystyle \\sum \\lim_{s\\neq v \\in V} \\sum\\lim_{t\\neq v\\in V}\\delta_{st}(v)\\quad where \\quad \\delta_{st}(v)=\\frac{\\sigma_{st}(v)}{\\sigma_{st}}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":286,"value":"drag = simulation => {\n \n function dragstarted(event) {\n if (!event.active) simulation.alphaTarget(0.3).restart();\n event.subject.fx = event.subject.x;\n event.subject.fy = event.subject.y;\n }\n \n function dragged(event) {\n event.subject.fx = event.x;\n event.subject.fy = event.y;\n }\n \n function dragended(event) {\n if (!event.active) simulation.alphaTarget(0);\n event.subject.fx = null;\n event.subject.fy = null;\n }\n \n return d3.drag()\n .on(\"start\", dragstarted)\n .on(\"drag\", dragged)\n .on(\"end\", dragended);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"history = {\n const data = [];\n // https://data.giss.nasa.gov/gistemp/tabledata_v3/GLB.Ts+dSST.csv\n await d3.csv(\"https://gist.githubusercontent.com/dudaspm/cce3554fb3e850db23d2f6b6e8b2b883/raw/79e4b646a0c28ec666e542580b801015132a48dd/history.csv\", (d, i, columns) => {\n data.push({\n year: d.year,\n history: d.history,\n index: i,\n });\n\n });\n return data;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":325,"value":"import {radio} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}