This shows the force-directed network of mentions in the READMEs of various bl.ocks. I cleaned Micah Stubb’s data from May 2016 slightly: I removed missing nodes, solitary nodes, self-links, and redundant links. The original dataset contains 2,101 nodes and 8,617 links, and is 1.2 MB. The cleaned dataset contains 1,238 nodes and 2,602 links, and is 281 KB.
-
-
Save bcrisp/4f74d9eaea1e8795afc6497737094194 to your computer and use it in GitHub Desktop.
Blocks Graph
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| license: gpl-3.0 | |
| height: 960 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "nodes": [ | |
| {"id":"1","name":"mbostock","description":"Force-Directed Graph"}, | |
| {"id":"2","name":"zeffii","description":"mediseen0.2"}, | |
| {"id":"3","name":"zeffii","description":"mediseen0.2 18march2016"}, | |
| {"id":"4","name":"zeffii","description":"mediseen0.2 18march2016"}, | |
| {"id":"5","name":"zeffii","description":"mediseen0.2 18march2016"}, | |
| {"id":"6","name":"zeffii","description":"mediseen0.2 18march2016"}, | |
| {"id":"7","name":"zeffii","description":"mediseen0.2 18march2016"}, | |
| {"id":"8","name":"zeffii","description":"mediseen0.2 18march2016"}, | |
| {"id":"9","name":"zeffii","description":"mediseen0.2 18march2016"}, | |
| {"id":"10","name":"zeffii","description":"mediseen0.2 18march2016"}, | |
| {"id":"11","name":"zeffii","description":"mediseen0.2 18march2016"} | |
| ], | |
| "links": [ | |
| {"source":"1","target":"2","optional":true}, | |
| {"source":"1","target":"3","optional":true}, | |
| {"source":"3","target":"4","optional":false}, | |
| {"source":"3","target":"5","optional":true}, | |
| {"source":"3","target":"6","optional":false}, | |
| {"source":"1","target":"7","optional":false}, | |
| {"source":"3","target":"8","optional":true}, | |
| {"source":"3","target":"9","optional":true} | |
| ] | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <canvas width="960" height="600"></canvas> | |
| <script src="https://d3js.org/d3.v4.min.js"></script> | |
| <script> | |
| var canvas = document.querySelector("canvas"), | |
| context = canvas.getContext("2d"), | |
| width = canvas.width, | |
| height = canvas.height; | |
| var color = d3.scaleOrdinal(d3.schemeCategory10); | |
| var simulation = d3.forceSimulation() | |
| .force("link", d3.forceLink().id(function(d) { return d.id; }).distance(75).strength(.5)) | |
| .force("charge", d3.forceManyBody()) | |
| .force("center", d3.forceCenter(width / 2, height / 2)); | |
| d3.json("graph.json", function(error, graph) { | |
| if (error) throw error; | |
| var n = graph.nodes.map(function(d){d.r = 15; return d;}) | |
| simulation | |
| .nodes(n) | |
| .on("tick", ticked); | |
| simulation.force("link") | |
| .links(graph.links); | |
| d3.select(canvas) | |
| .call(d3.drag() | |
| .container(canvas) | |
| .subject(dragsubject) | |
| .on("start", dragstarted) | |
| .on("drag", dragged) | |
| .on("end", dragended)); | |
| function ticked() { | |
| context.clearRect(0, 0, width, height); | |
| //context.beginPath(); | |
| graph.links.forEach(drawLink); | |
| context.strokeStyle = "steelblue"; | |
| //context.stroke(); | |
| //context.beginPath(); | |
| graph.nodes.forEach(drawNode); | |
| context.fill(); | |
| } | |
| function dragsubject() { | |
| return simulation.find(d3.event.x, d3.event.y); | |
| } | |
| }); | |
| function dragstarted() { | |
| if (!d3.event.active) simulation.alphaTarget(0.3).restart(); | |
| d3.event.subject.fx = d3.event.subject.x; | |
| d3.event.subject.fy = d3.event.subject.y; | |
| } | |
| function dragged() { | |
| d3.event.subject.fx = d3.event.x; | |
| d3.event.subject.fy = d3.event.y; | |
| } | |
| function dragended() { | |
| if (!d3.event.active) simulation.alphaTarget(0); | |
| d3.event.subject.fx = null; | |
| d3.event.subject.fy = null; | |
| } | |
| function drawLink(d) { | |
| context.save() | |
| context.beginPath() | |
| if(d.optional){ | |
| context.setLineDash([5,5]); | |
| } | |
| context.moveTo(d.source.x, d.source.y); | |
| context.lineTo(d.target.x, d.target.y); | |
| context.stroke(); | |
| //context.setLineDash([]); | |
| context.restore(); | |
| } | |
| function drawNode(d) { | |
| context.beginPath(); | |
| context.moveTo(d.x + 3, d.y); | |
| context.arc(d.x, d.y, d.r, 0, 2 * Math.PI, false); | |
| context.font="12px Georgia"; | |
| context.fillText(d.name, (d.x + d.r*2), d.y); | |
| context.strokeStyle = "darkblue"; | |
| context.fillStyle = color(d.name); | |
| context.stroke(); | |
| } | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment