Built with blockbuilder.org
Last active
July 20, 2017 02:53
Star
You must be signed in to star a gist
cgv2-proto1-force
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: mit |
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": "ROOT", "group": 0 }, | |
{ "id": "CPSC 120", "group": 1 }, | |
{ "id": "MATH 150A", "group": 1 }, | |
{ "id": "ENGL 101", "group": 1 }, | |
{ "id": "MATH 270A", "group": 1 }, | |
{ "id": "CPSC 121", "group": 2 }, | |
{ "id": "MATH 270B", "group": 2 }, | |
{ "id": "PHYS 225", "group": 2 }, | |
{ "id": "PHYS 225L", "group": 2 }, | |
{ "id": "MATH 150B", "group": 2 }, | |
{ "id": "CPSC 131", "group": 3 }, | |
{ "id": "PHYS 226", "group": 3 }, | |
{ "id": "PHYS 226L", "group": 3 }, | |
{ "id": "MATH 338", "group": 3 }, | |
{ "id": "MATH 250A", "group": 3 }, | |
{ "id": "CPSC 223", "group": 4 }, | |
{ "id": "CPSC 254", "group": 4 }, | |
{ "id": "CPSC 311", "group": 4 }, | |
{ "id": "CPSC 240", "group": 4 }, | |
{ "id": "CPSC 332", "group": 4 }, | |
{ "id": "CPSC 351", "group": 5 }, | |
{ "id": "CPSC 431", "group": 5 }, | |
{ "id": "CPSC 301", "group": 5 }, | |
{ "id": "CPSC 315", "group": 5 }, | |
{ "id": "CPSC 440", "group": 5 }, | |
{ "id": "CPSC 471", "group": 6 }, | |
{ "id": "CPSC 473", "group": 6 }, | |
{ "id": "CPSC 323", "group": 6 }, | |
{ "id": "CPSC 362", "group": 6 }, | |
{ "id": "CPSC 335", "group": 6 }, | |
{ "id": "CPSC 476", "group": 7 }, | |
{ "id": "CPSC 481", "group": 7 } | |
], | |
"links": [ | |
{ "source": "ROOT", "target": "CPSC 120", "priority": "True" }, | |
{ "source": "ROOT", "target": "MATH 150A", "priority": "True" }, | |
{ "source": "ROOT", "target": "MATH 270A", "priority": "True" }, | |
{ "source": "ROOT", "target": "ENGL 101", "priority": "True" }, | |
{ "source": "CPSC 120", "target": "CPSC 121", "priority": "True" }, | |
{ "source": "CPSC 121", "target": "CPSC 131", "priority": "True" }, | |
{ "source": "CPSC 131", "target": "CPSC 223", "priority": "True" }, | |
{ "source": "CPSC 131", "target": "CPSC 240", "priority": "True" }, | |
{ "source": "CPSC 131", "target": "CPSC 254", "priority": "True" }, | |
{ "source": "CPSC 131", "target": "CPSC 311", "priority": "True" }, | |
{ "source": "CPSC 131", "target": "CPSC 332", "priority": "True" }, | |
{ "source": "CPSC 223", "target": "CPSC 476", "priority": "False" }, | |
{ "source": "CPSC 240", "target": "CPSC 440", "priority": "False" }, | |
{ "source": "CPSC 254", "target": "CPSC 301", "priority": "True" }, | |
{ "source": "CPSC 254", "target": "CPSC 351", "priority": "True" }, | |
{ "source": "CPSC 311", "target": "CPSC 315", "priority": "False" }, | |
{ "source": "CPSC 311", "target": "CPSC 362", "priority": "False" }, | |
{ "source": "CPSC 332", "target": "CPSC 431", "priority": "False" }, | |
{ "source": "CPSC 332", "target": "CPSC 473", "priority": "False" }, | |
{ "source": "CPSC 301", "target": "CPSC 323", "priority": "True" }, | |
{ "source": "CPSC 301", "target": "CPSC 335", "priority": "True" }, | |
{ "source": "CPSC 301", "target": "CPSC 362", "priority": "True" }, | |
{ "source": "CPSC 351", "target": "CPSC 471", "priority": "False" }, | |
{ "source": "CPSC 351", "target": "CPSC 476", "priority": "False" }, | |
{ "source": "CPSC 335", "target": "CPSC 481", "priority": "True" }, | |
{ "source": "ENGL 101", "target": "CPSC 311", "priority": "False" }, | |
{ "source": "MATH 150A", "target": "MATH 150B", "priority": "True" }, | |
{ "source": "MATH 150B", "target": "MATH 338", "priority": "True" }, | |
{ "source": "MATH 150B", "target": "MATH 250A", "priority": "True" }, | |
{ "source": "MATH 338", "target": "CPSC 335", "priority": "True" }, | |
{ "source": "MATH 270A", "target": "CPSC 240", "priority": "True" }, | |
{ "source": "MATH 270A", "target": "MATH 270B", "priority": "True" }, | |
{ "source": "MATH 270B", "target": "CPSC 335", "priority": "True" }, | |
{ "source": "PHYS 225", "target": "PHYS 225L", "priority": "False" }, | |
{ "source": "PHYS 225", "target": "PHYS 226", "priority": "False" }, | |
{ "source": "PHYS 226", "target": "PHYS 226L", "priority": "False" } | |
] | |
} |
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> | |
<head> | |
<meta charset="utf-8"> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script> | |
<style> | |
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } | |
</style> | |
</head> | |
<body> | |
<script> | |
var margin = { top: 0, right: 0, bottom: 0, left: 0 } | |
var width = 480 - margin.left - margin.right; | |
var height = 500 - margin.top - margin.bottom; | |
var radius = 20; | |
var colors = d3.scaleOrdinal(d3.schemePastel1); | |
var svg1 = d3.select("body").append("svg") | |
.attr("id", "svg1") | |
.attr("width", width) | |
.attr("height", height); | |
var svg2 = d3.select("body").append("svg") | |
.attr("id", "svg2") | |
.attr("width", width) | |
.attr("height", height); | |
d3.json("courses.json", function(err, data) { | |
console.log(data); | |
var lines = svg1.selectAll("line") | |
.data(data.links) | |
.enter().append("line") | |
.attr("stroke", "#bbb"); | |
var circles = svg1.selectAll("circles") | |
.data(data.nodes, function(d) { return d.id; }) | |
.enter().append("circle") | |
.attr("r", radius) | |
.attr("fill-opacity", 0.75) | |
.attr("stroke", "#ccc") | |
.attr("fill", function(d) { return colors(d.group); }); | |
var lines2 = svg2.selectAll("line") | |
.data(data.links) | |
.enter().append("line") | |
.attr("stroke", "#bbb"); | |
var text = svg2.selectAll("text") | |
.data(data.nodes, function(d) { return d.id; }) | |
.enter().append("text") | |
.text(function(d) { return d.id; }) | |
.attr("font-family", "Tahoma, Arial, Verdana") | |
.attr("font-size", "12px") | |
.attr("fill", "#222") | |
.attr("fill-opacity", 0.75) | |
.attr("background-color", function(d) { return colors(d.group); }); | |
// define force | |
var simulation = d3.forceSimulation(data.nodes) | |
.force("center", d3.forceCenter(width / 2, height / 2)) | |
.force("repulse", d3.forceManyBody()) | |
.force("link", d3.forceLink(data.links).id(function(d) { return d.id; } )) | |
.on("tick", function() { | |
circles.attr("cx", function(d) { return d.x; }) | |
.attr("cy", function(d) { return d.y; }); | |
text.attr("x", function(d) { return d.x; }) | |
.attr("y", function(d) { return d.y; }); | |
lines.attr("x1", function(d) { return d.source.x; }) | |
.attr("x2", function(d) { return d.target.x; }) | |
.attr("y1", function(d) { return d.source.y; }) | |
.attr("y2", function(d) { return d.target.y; }); | |
lines2.attr("x1", function(d) { return d.source.x; }) | |
.attr("x2", function(d) { return d.target.x; }) | |
.attr("y1", function(d) { return d.source.y; }) | |
.attr("y2", function(d) { return d.target.y; }); | |
}); | |
}); | |
</script> | |
</body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment