d3 Virtual Scrolling Plugin

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Virtual Scrolling Demo</title>
    <style>
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: sans-serif;
            font-size: 12px;
        }
        .viewport {
            position: absolute;
            top: 15px;
            left: 15px;
            overflow-y: auto;
            width: 280px;
            height: 400px;
            background-color: #e8e8e8;
            border: 1px solid #AAAAAA;
            border-radius: 4px;
            box-shadow: inset 1px 1px 6px 2px rgba(0,0,0, .25);
        }
        .scroll-svg {

}
        .longscroll .row {
            font-family: Arial;
            font-size: 11px;
            height: 19px;
            padding: 0 8px;
            border-bottom: solid #eee 1px;
        }

.information {
            position: absolute;
            top: 15px;
            left: 300px;
            width: 350px;
            height: 400px;
        }

.info-svg {
            fill: #2968AA;
            overflow: visible;
        }

.brace {
            stroke: #2968AA;
            stroke-width: 2px;
            fill: none;
        }

.infotext {
            font-size: 20px;
        }
    </style>
    <script src="https://d3js.org/d3.v3.min.js" type="text/javascript"></script>
    <script src="virtualscroller.js"></script>
</head>
<body>
<div class="viewport"></div>
<div class="information"></div>
<script type="text/javascript">
    d3.json("states.json", function (states) {

var colorScale = d3.scale.category20();

var scrollSVG = d3.select(".viewport").append("svg")
            .attr("class", "scroll-svg");

var defs = scrollSVG.insert("defs", ":first-child");

createFilters(defs);

var chartGroup = scrollSVG.append("g")
            .attr("class", "chartGroup")
            //.attr("filter", "url(#dropShadow1)"); // sometimes causes issues in chrome

chartGroup.append("rect")
            .attr("fill", "#FFFFFF");

var infoSVG = d3.select(".information").append("svg")
            .attr("class", "info-svg");

var braceGroup = infoSVG.append("g")
            .attr("transform", "translate(0,0)");

braceGroup.append("path")
            .attr("class", "brace")
            .attr("d", makeCurlyBrace(10, 380, 10, 20, 30, 0.55));

var braceLabelGroup = braceGroup.append("g")
            .attr("transform", "translate(45, 176)");

braceLabelGroup.append("text")
            .attr("class", "infotext")
            .attr("transform", "translate(0, 0)")
            .text("50 data items but only ");

braceLabelGroup.append("text")
            .attr("class", "infotext")
            .attr("transform", "translate(-1, 30)")
            .text("15 dom nodes rendered");

braceLabelGroup.append("text")
            .attr("class", "infotext")
            .attr("transform", "translate(0, 60)")
            .text("at any given time!");

var rowExit = function(rowSelection) {
        };

var virtualScroller = d3.VirtualScroller()
            .rowHeight(30)
            .enter(rowEnter)
            .update(rowUpdate)
            .exit(rowExit)
            .svg(scrollSVG)
            .totalRows(50)
            .viewport(d3.select(".viewport"));

// tack on index to each data item for easy to read display
        states.items.forEach(function(nextState, i) {
            nextState.index = i;
        });

virtualScroller.data(states.items, function(d) { return d.id; });

chartGroup.call(virtualScroller);

function createFilters(svgDefs) {
            var filter = svgDefs.append("svg:filter")
                .attr("id", "dropShadow1")
                .attr("x", "0")
                .attr("y", "0")
                .attr("width", "200%")
                .attr("height", "200%");

filter.append("svg:feOffset")
                .attr("result", "offOut")
                .attr("in", "SourceAlpha")
                .attr("dx", "1")
                .attr("dy", "1");

filter.append("svg:feColorMatrix")
                .attr("result", "matrixOut")
                .attr("in", "offOut")
                .attr("type", "matrix")
                .attr("values", "0.1 0 0 0 0 0 0.1 0 0 0 0 0 0.1 0 0 0 0 0 0.2 0");

filter.append("svg:feGaussianBlur")
                .attr("result", "blurOut")
                .attr("in", "matrixOut")
                .attr("stdDeviation", "1");

filter.append("svg:feBlend")
                .attr("in", "SourceGraphic")
                .attr("in2", "blurOut")
                .attr("mode", "normal");
        }

function makeCurlyBrace(x1,y1,x2,y2,w,q)
        {
            //Calculate unit vector
            var dx = x1-x2;
            var dy = y1-y2;
            var len = Math.sqrt(dx*dx + dy*dy);
            dx = dx / len;
            dy = dy / len;

//Calculate Control Points of path,
            var qx1 = x1 + q*w*dy;
            var qy1 = y1 - q*w*dx;
            var qx2 = (x1 - .25*len*dx) + (1-q)*w*dy;
            var qy2 = (y1 - .25*len*dy) - (1-q)*w*dx;
            var tx1 = (x1 -  .5*len*dx) + w*dy;
            var ty1 = (y1 -  .5*len*dy) - w*dx;
            var qx3 = x2 + q*w*dy;
            var qy3 = y2 - q*w*dx;
            var qx4 = (x1 - .75*len*dx) + (1-q)*w*dy;
            var qy4 = (y1 - .75*len*dy) - (1-q)*w*dx;

return ( "M " +  x1 + " " +  y1 +
                " Q " + qx1 + " " + qy1 + " " + qx2 + " " + qy2 +
                " T " + tx1 + " " + ty1 +
                " M " +  x2 + " " +  y2 +
                " Q " + qx3 + " " + qy3 + " " + qx4 + " " + qy4 +
                " T " + tx1 + " " + ty1 );
        }
    });

</script>
</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js