Khan Academy Knowledge Graph

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/processing.js/1.4.8/processing.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>
<script src="https://getfirebug.com/firebug-lite.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>

CSS

.circle {
    stroke: #fff;
    stroke-width: 1.5px;
}
.link {
    stroke: #999;
    stroke-opacity: .6;
    
}
#constructing-consistent-and-inconsistent-system {stroke: red;
}

JavaScript

// to do: 1. label each 2. use word searching CSS to find color common groups // draw transparent polynomails shading areas of related videos

// load data async
$.ajaxSetup({
    async: false
});
data = $.getJSON("https://gist.githubusercontent.com/dderiso/d02e5a3d77258fe87363/raw/ec7932d0b78fd37df1d0aa4836f519a146bb1740/khan_data").responseJSON;

// sanity check
console.log(data);

nodes = [];
links = [];

$(data).each(function (i, d) {
    nodes.push({name: d.name, display_name: d.display_name, group: 1});
    if (d.prereqs) {
        links.push(
        d.prereqs.map(function (j, k) {
            return {
                source: i,
                target: data.map(function (c, i, a) {
                    return (c.name == j) * i;
                }).filter(function (x) {
                    return x != 0;
                })[0],
                value: 1
            }
        })[0])
    }
});

links = _.compact(links)
links = _.reject(links, function(e){ return _.isUndefined(e.target); })

//console.log(nodes);
//console.log(links);

graph = {
    nodes: nodes,
    links: links
};



var width = 1000,
    height = 700;

var color = d3.scale.category20();

var force = d3.layout.force()
    .charge(-10)
    .linkDistance(2)
    .size([width, height]);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

force.nodes(graph.nodes)
    .links(graph.links)
    .start();

var link = svg.selectAll(".link")
    .data(graph.links)
    .enter().append("line")
    .attr("class", "link")
    .style("stroke-width", function (d) {
        return Math.sqrt(d.value);
    });

var node = svg.selectAll(".node")
    .data(graph.nodes)
    .enter().append("g");

var circle = node.append("circle")
    .attr("class", "node")
    .attr("id", function (d) { return d.name; })
    .attr("r", 5)
    .style("fill", function (d) {
        return color(d.group);
    });

var label = node.append("svg:text")
    .text(function (d) { return d.name;...