Roadmap Graph

by eprouver

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<!-- click on green circles to show blue children -->
<!-- red and green circles are draggable -->

CSS

.link {
    stroke: #000;
    stroke-width: 1.5px;

  }
  .node {
    cursor: move;
    fill: #ccc;
    stroke: #000;
    stroke-width: 1.5px;

  }
  .node.test {
    fill: red;
  }
  .node.lesson {
    fill: lime;
  }
  .node.help {
    fill: blue;
  }
  .node.advanced {
    fill: yellow;
  }

JavaScript

var width = 400,
        height = 800;      

function drawGraph(graph, $element) {
        var force = d3.layout.force()
          .size([width, height])
          .charge(-60)
          .linkDistance(15)
          .on("tick", tick);

        var drag = force.drag();

        var svg = d3.select($element).append("svg")
          .attr('class', 'forcermtree')
          .attr("width", width)
          .attr("height", height);

        var link = svg.selectAll(".link"),
          node = svg.selectAll(".node");

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

        function lessonTest(d) {
          return d.type == 'lesson' || d.type == 'test';
        }

        link = link.data(graph.links)
          .enter().append("line")
          .attr("class", "link")
          .style('visibility', function(d) {
            if (!lessonTest(d.source) || !lessonTest(d.target))
              return 'hidden'

            return 'visible'
          })

          function findkids(index, visible) {
            _.chain(link.data())
              .each(function(v, i) {
                if (!lessonTest(v.source) || !lessonTest(v.target)) {
                  if (v.source.index == index || v.target.index == index) {
                    d3.select(link[0][i]).style('visibility', visible);

                    //For future when further branching happens
                    if (!lessonTest(v.source)) {
                      d3.select(node[0][v.source.index]).style('visibility', visible);
                    }

                    if (!lessonTest(v.target)) {
                      d3.select(node[0][v.target.index]).style('visibility', visible);
                    }

                  }
                }
              });
          }

        node = node.data(graph.nodes)
          .enter().append("circle")
          .attr("class", function(d) {
            return d.type + " node";
          })
          .attr("r", function(d) {
           ...