Built with blockbuilder.org
forked from danaoira's block: cgv2-proto1-force
license: mit |
Built with blockbuilder.org
forked from danaoira's block: cgv2-proto1-force
{ | |
"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" } | |
] | |
} |
<!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> |