Moving Histogram

<!DOCTYPE html>
<html>
<head>
    <title>Moving Histogram</title>
    
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@2.10.3/d3.v2.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@12.10.3/d3.csv.js"></script>
    <style type="text/css">

svg {
            font: 10px sans-serif;
        }

.bar {
            stroke: white;
            fill: steelBlue;

}

.axis path, .axis line {
            fill: none;
            stroke: #000;
            shape-rendering: crispEdges;
        }

rect.mover {
            stroke: lightSteelBlue;
            stroke-opacity: 0.3;
            fill: lightSteelBlue;
            fill-opacity: 0.1;
        }

</style>
</head>
<body>

d3.csv("data.csv", function (data) {

data.forEach( function (d) {
            d.value = parseInt(d.value);
        });

var margin =  {top: 20, right: 10, bottom: 20, left: 40},
            selectorHeight = 20
            width = 400 - margin.left - margin.right,
            height = 300 - margin.top - margin.bottom - selectorHeight,
            barWidth = 45;

var numBars = Math.round(width/barWidth);

var xscale = d3.scale.ordinal()
                .domain(data.slice(0,numBars).map(function (d) { return d.label; }))
                .rangeBands([0, width]),
            yscale = d3.scale.linear()
                .domain([0, d3.max(data, function (d) { return d.value; })])
                .range([height, 0]);

var xAxis  = d3.svg.axis().scale(xscale).orient("bottom"),
            yAxis  = d3.svg.axis().scale(yscale).orient("left");

var svg = d3.select("#diagram").append("svg")
                    .attr("width", width + margin.left + margin.right)
                    .attr("height", height + margin.top + margin.bottom + selectorHeight);

var diagram = svg.append("g")
                    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

diagram.append("g")
                .attr("class", "x axis")
                .attr("transform", "translate(0, " + height + ")")
                .call(xAxis);

diagram.append("g")
                .attr("class", "y axis")
                .call(yAxis);

var bars = diagram.append("g");

bars.selectAll("rect")
            .data(data.slice(0, numBars), function (d) {return d.label; })
            .enter().append("rect")
            .attr("class", "bar")
            .attr("x", function (d) { return xscale(d.label); })
            .attr("y", function (d) { return yscale(d.value); })
            .attr("width", xscale.rangeBand())
            .attr("height", function (d) { return height - yscale(d.value); });

var displayed = d3.scale.quantize()
            .domain([0, width])
            .range(d3.range(data.length));

diagram.append("rect")
            .attr("transform", "translate(0, " + (height + margin.bottom) + ")")
            .attr("class", "mover")
            .attr("x", 0)
            .attr("y", 0)
            .attr("height", selectorHeight)
            .attr("width", Math.round(parseFloat(numBars * width)/data.length))
            .attr("pointer-events", "all")
            .attr("cursor", "ew-resize")
            .call(d3.behavior.drag().on("drag", display));

function display () {
            var x = parseInt(d3.select(this).attr("x")),
                nx = x + d3.event.dx,
                w = parseInt(d3.select(this).attr("width")),
                f, nf, new_data, rects;

if ( nx < 0 || nx + w > width ) return;

d3.select(this).attr("x", nx);

f = displayed(x);
            nf = displayed(nx);

if ( f === nf ) return;

new_data = data.slice(nf, nf + numBars);

xscale.domain(new_data.map(function (d) { return d.label; }));
            diagram.select(".x.axis").call(xAxis);

rects = bars.selectAll("rect")
                .data(new_data, function (d) {return d.label; });

rects.attr("x", function (d) { return xscale(d.label); });

rects.enter().append("rect")
                .attr("class", "bar")
                .attr("x", function (d) { return xscale(d.label); })
                .attr("y", function (d) { return yscale(d.value); })
                .attr("width", xscale.rangeBand())
                .attr("height", function (d) { return height - yscale(d.value); });

rects.exit().remove();
        };
});
    </script>
</body>
</html>

Modified http://mbostock.github.com/d3/d3.js to a secure url

Modified http://mbostock.github.com/d3/d3.csv.js to a secure url

https://mbostock.github.com/d3/d3.js

https://mbostock.github.com/d3/d3.csv.js