The height of the line represents the number of values falling within 1/2 of the bin width on either side of the x axis point.
So if the line is at height 200 for an x value of 20 and your binwidth is 10, then there are 200 points from the range of 15 to 25 in the data.
Eventually to be made into an R htmlwidgets library.
ToDo:
Make the bin interval sit as a legend normally but then when moused over it becomes the interval that we use on the y axis.
xxxxxxxxxx<meta charset="utf-8"><style>.axis { font: 10px sans-serif;}.axis path,.axis line { fill: none; stroke: #000; shape-rendering: crispEdges;}.axis--x path { display: none;}.line { fill: none; stroke: steelblue; stroke-width: 1.5px;}svg text{ font-family:optima;}</style><body> <div id = "chart"></div><script src="https://d3js.org/d3.v4.min.js"></script><script src="sliding_hist.js"></script><script>//Function to generate vector of normals.var randomNormalArray = (n, mu, variance) => [...new Array(n)] .map((_, i) => d3.randomNormal(mu, variance)());//Generate our datavar data = randomNormalArray(500, 100, 10)var slidey = sliding_hist() .height(500) .width(800) .fillColor("#a6bddb") .binWidth(10);d3.select("#chart") .datum(data) .call(slidey);</script> https://d3js.org/d3.v4.min.js