Source code for the Timeline Consideration Chart

The following code is a rough and ready stab at arranging a string of cases over time according to the class of consideration they exert against an earlier passive case. 

You can see a working example of the chart on CodePen.

<html>

<head>
  <script type="text/javascript" src="http://mbostock.github.com/d3/d3.v2.js"></script>
  <style type="text/css">
    .chart {
                shape-rendering: crispEdges;
            }
    
            .mini text {
                font: 12px Helvetica Neue, sans-serif;
          color: white;
            }
    
            .main text {
                font: 12px sans-serif;  
            }
    
            .miniItem0 {
                fill: blue;
          fill-opacity: 0.6;
                stroke-width: 2;
          height: 10px;
          
            }
    
            .miniItem1 {
                fill: green;
                fill-opacity: .6;
                stroke-width: 6;    
            }
          
            .miniItem1:hover {
                fill: black;
                fill-opacity: .6;
                stroke-width: 6;    
            }
    
            .miniItem2 {
                fill: slategray;
                fill-opacity: .7;
                stroke-width: 6;    
            }
          
          .miniItem3 {
                fill: blue;
                fill-opacity: .7;
                stroke-width: 6;    
            }
          
          .miniItem4 {
                fill: blue;
                fill-opacity: .7;
                stroke-width: 6;    
            }
          
          .miniItem4 {
                fill: blue;
                fill-opacity: .7;
                stroke-width: 6;    
            }
          
          .miniIte5 {
                fill: blue;
                fill-opacity: .7;
                stroke-width: 6;    
            }
          .miniItem6 {
                fill: orange;
                fill-opacity: .4;
                stroke-width: 6;    
            }
          
          .miniItem10 {
                fill: red;
                fill-opacity: .4;
                stroke-width: 6;    
            }
    
            .brush .extent {
                stroke: gray;
                fill: dodgerblue;
                fill-opacity: .365;
            }
  </style>
</head>

<body>
  <script type="text/javascript">
    // The consideration types and data follow
            var lanes = ["Considered","Applied","Followed", "Adopted", "Approved", "Explained", "Distinguished", "Not applied", "Not followed", "Doubted", "Disapproved", "Overruled"],
                laneLength = lanes.length,
                items = [{"lane": 6, "id": "R v Barr (1986)", "start": 50, "end": 400},
                        {"lane": 1, "id": "R v Slack (1989)", "start": 405, "end": 800},
                        {"lane": 1, "id": "R v Hyde (1990)", "start": 805, "end": 1200},
                        {"lane": 1, "id": "Hui Chi-ming v The Queen (1991)", "start": 1205, "end": 1820},
                   {"lane": 0, "id": "R v Roberts (Kelvin) (1993)", "start": 1825, "end": 2350}, 
                   {"lane": 0, "id": "R v Stewart (Heather) (1995)", "start": 2355, "end": 2900}, 
                   {"lane": 1, "id": "R v Powell (Anthony) (1997)", "start": 2905, "end": 3450}, 
                   {"lane": 1, "id": "Flowers v The Queen (1997)", "start": 3455, "end": 4000}, 
                   {"lane": 0, "id": "R v Rahman (2009)", "start": 4005, "end": 4380}, 
                   {"lane": 10, "id": "R v Jogee (2016)", "start": 4385, "end": 4700}, 
                   ] 
                timeBegin = 0,
                timeEnd = 4700;
  </script>
  <script type="text/javascript">
    var m = [20, 15, 15, 120], //top right bottom left
                w = 1500 - m[1] - m[3],
                h = 300 - m[1] - m[2],
                miniHeight = laneLength * 15 + -10,
                mainHeight = h - miniHeight - 50;
    
            //scales
            var x = d3.scale.linear()
                    .domain([timeBegin, timeEnd])
                    .range([0, w]);
            var x1 = d3.scale.linear()
                    .range([0, w]);
            var y1 = d3.scale.linear()
                    .domain([, laneLength])
                    .range([0, mainHeight]);
            var y2 = d3.scale.linear()
                    .domain([0, laneLength])
                    .range([0, miniHeight]);
    
            var chart = d3.select("body")
                        .append("svg")
                        .attr("width", w + m[1] + m[3])
                        .attr("height", h + m[1] + m[2])
                        .attr("class", "chart");
            
            chart.append("defs").append("clipPath")
                .attr("id", "clip")
                .append("rect")
                .attr("width", w)
                .attr("height", mainHeight);
    
            var main = chart.append("g")
                        .attr("transform", "translate(" + m[3] + "," + m[0] + ")")
                        .attr("width", w)
                        .attr("height", mainHeight)
                        .attr("class", "main");
    
            var mini = chart.append("g")
                        .attr("transform", "translate(" + m[3] + "," + (mainHeight + m[1]) + ")")
                        .attr("width", w)
                        .attr("height", miniHeight)
                        .attr("class", "mini");
            
        //   main lanes and texts
        /*  main.append("g").selectAll(".laneLines")
                .data(items)
                .enter().append("line")
                .attr("x1", m[1])
                .attr("y1", function(d) {return y1(d.lane);})
                .attr("x2", w)
                .attr("y2", function(d) {return y1(d.lane);})
                .attr("stroke", "lightgray")  */
    
            /* main.append("g").selectAll(".laneText")
                .data(lanes)
                .enter().append("text")
                .text(function(d) {return d;})
                .attr("x", -m[1])
                .attr("y", function(d, i) {return y1(i + .5);})
                .attr("dy", ".5ex")
                .attr("text-anchor", "end")
                .attr("class", "laneText");  */
            
            //mini lanes and texts
            mini.append("g").selectAll(".laneLines")
                .data(items)
                .enter().append("line")
                .attr("x1", m[1])
                .attr("y1", function(d) {return y2(d.lane);})
                .attr("x2", w)
                .attr("y2", function(d) {return y2(d.lane);})
                .attr("stroke", "grey");
    
            mini.append("g").selectAll(".laneText")
                .data(lanes)
                .enter().append("text")
                .text(function(d) {return d;})
                .attr("x", -m[1])
                .attr("y", function(d, i) {return y2(i + .5);})
                .attr("dy", ".5ex")
                .attr("text-anchor", "end")
                .attr("class", "laneText");
    
            var itemRects = main.append("g")
                                .attr("clip-path", "url(#clip)");
            
            //mini item rects
            mini.append("g").selectAll("miniItems")
                .data(items)
                .enter().append("rect")
                .attr("class", function(d) {return "miniItem" + d.lane;})
                .attr("x", function(d) {return x(d.start);})
                .attr("y", function(d) {return y2(d.lane + .5) - 5;})
                .attr("width", function(d) {return x(d.end - d.start);})
                .attr("height", 10);
    
            //mini labels
            mini.append("g").selectAll(".miniLabels")
                .data(items)
                .enter().append("text")
                .text(function(d) {return d.id;})
                .attr("x", function(d) {return x(d.start);})
                .attr("y", function(d) {return y2(d.lane + .5);})
                .attr("dy", ".5ex");
    
            //brush
            var brush = d3.svg.brush()
                                .x(x)
                                .on("brush", display);
    
            mini.append("g")
                .attr("class", "x brush")
                .call(brush)
                .selectAll("rect")
                .attr("y", 1)
                .attr("height", miniHeight - 2);
    
            display();
            
            function display() {
                var rects, labels,
                    minExtent = brush.extent()[0],
                    maxExtent = brush.extent()[1],
                    visItems = items.filter(function(d) {return d.start < maxExtent && d.end > minExtent;});
    
                mini.select(".brush")
                    .call(brush.extent([minExtent, maxExtent]));
    
                x1.domain([minExtent, maxExtent]);
    
                //update main item rects
                rects = itemRects.selectAll("rect")
                        .data(visItems, function(d) { return d.id; })
                    .attr("x", function(d) {return x1(d.start);})
                    .attr("width", function(d) {return x1(d.end) - x1(d.start);});
                
                rects.enter().append("rect")
                    .attr("class", function(d) {return "miniItem" + d.lane;})
                    .attr("x", function(d) {return x1(d.start);})
                    .attr("y", function(d) {return y1(d.lane) + 10;})
                    .attr("width", function(d) {return x1(d.end) - x1(d.start);})
                    .attr("height", function(d) {return .8 * y1(1);});
    
                rects.exit().remove();
    
                //update the item labels
                labels = itemRects.selectAll("text")
                    .data(visItems, function (d) { return d.id; })
                    .attr("x", function(d) {return x1(Math.max(d.start, minExtent) + 2);});
    
                labels.enter().append("text")
                    .text(function(d) {return d.id;})
                    .attr("x", function(d) {return x1(Math.max(d.start, minExtent));})
                    .attr("y", function(d) {return y1(d.lane + .5);})
                    .attr("text-anchor", "start");
    
                labels.exit().remove();
    
            }
  </script>
</body>

</html>