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:T556,chart = { const height = 700 const simulation = d3.forceSimulation(nodes) .force("link", d3.forceLink(links).id(d => d.index) .distance(d => (d.source.group==d.target.group) ? 5 : 10) .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").attr("transform","translate(0,-100)") .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").attr("transform","translate(0,-100)") .style("stroke", "#fff") .style("stroke-width", 1.5) .selectAll("circle") .data(nodes) .enter().append("circle") .attr("r", 5) .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); } return svg.node(); }33:T722,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(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); 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); } function dragstarted(d) { if (!d3.event.active) simulation.alphaTarget(0.4).restart(); d.fx = d.x; d.fy = d.y; } function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(d) { if (!d3.event.active) simulation.alphaTarget(0); d.fx = null; d.fy = null; } return svg.node(); }34:T653,degreeChart = { ComputerCentrality() const height = 900 const simulation = d3.forceSimulation(nodes) .force("link", d3.forceLink(links).id(d => d.index) .distance(d => (d.source.group==d.target.group) ? 5 : 10) .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(); }35:[] 2f:{"title":"Social Networks","cells":[{"id":0,"value":"md`# Social Networks`","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`# This is a basic introduction to network analytics. Including:\n\n(In\\\\Out)-Degree Centrality\n\nCentralization Scores`","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":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":"$33","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":"$34","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(\"https://d3js.org/d3.v5.min.js\",\"https://rawgit.com/susielu/d3-annotation/master/d3-annotation.min.js\")","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":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 = {\n \tvar node = []\n\t data.nodes.forEach(d => node.push(d))\n node.forEach(function(d,i) {\n node[i].fx = node[i].x\n node[i].fy = node[i].y\n })\n \treturn node\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":206,"value":"links = {\n \tvar link = []\n\tdata.links.forEach(d => link.push({\"source\":nodes[d.source.index],\"target\":nodes[d.target.index]}))\n \treturn link\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}