D3 Examples - d3 Virtual Scrolling Plugin

xxxxxxxxxx
 
<!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 rowEnter = function(rowSelection) {
            rowSelection.append("rect")
                .attr("rx", 3)
                .attr("ry", 3)
                .attr("width", "250")
                .attr("height", "24")
                .attr("fill-opacity", 0.25)
                .attr("stroke", "#999999")
                .attr("stroke-width", "2px");
            rowSelection.append("text")
                .attr("transform", "translate(10,15)");
        };
        var rowUpdate = function(rowSelection) {
            rowSelection.select("rect")
                .attr("fill", function(d) {
                    return colorScale(d.id);
                });
            rowSelection.select("text")
                .text(function (d) {
                    return (d.index + 1) + ". " + d.label;
                });
        };
​
        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>
    