D3 Examples - Histogram II

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
.bar text {
  fill: #fff;
  font: 10px sans-serif;
}
​
</style>
<body>
<script src="//d3js.org/d3.v4.0.0-alpha.45.min.js"></script>
<script>
​
var data= ["2014-03-31T00:00:00-04:00","2014-03-31T00:00:00-04:00","2013-12-31T19:00:00-05:00","2013-09-30T00:00:00-04:00","2013-12-31T19:00:00-05:00","2013-01-03T00:00:00-05:00","2009-12-31T19:00:00-05:00","2010-06-30T00:00:00-04:00","2009-12-31T19:00:00-05:00","2010-06-29T00:00:00-04:00","2011-12-31T19:00:00-05:00","2012-12-04T00:00:00-05:00","2011-12-31T19:00:00-05:00","2012-10-31T00:00:00-04:00","2015-12-31T19:00:00-05:00","2015-08-31T00:00:00-04:00","2015-12-31T19:00:00-05:00","2016-03-07T00:00:00-05:00","2016-10-19T00:00:00-04:00","2016-10-17T00:00:00-04:00","2010-06-30T00:00:00-04:00","2013-08-08T00:00:00-04:00","2016-03-21T00:00:00-04:00","2016-03-25T00:00:00-04:00","2016-09-16T00:00:00-04:00","2019-09-15T00:00:00-04:00","2013-03-28T00:00:00-04:00","2016-06-23T00:00:00-04:00","2013-09-23T00:00:00-04:00","2016-09-23T00:00:00-04:00","2013-04-03T00:00:00-04:00","2016-08-11T00:00:00-04:00","2016-08-18T00:00:00-04:00","2017-03-28T00:00:00-04:00","2017-04-03T00:00:00-04:00","2017-04-09T00:00:00-04:00","2020-04-09T00:00:00-04:00","2017-03-28T00:00:00-04:00","2017-04-03T00:00:00-04:00","2017-04-09T00:00:00-04:00","2020-04-09T00:00:00-04:00","2014-08-08T00:00:00-04:00","2014-08-14T00:00:00-04:00","2014-08-25T00:00:00-04:00","2016-08-25T00:00:00-04:00","2013-12-31T19:00:00-05:00","2014-04-29T00:00:00-04:00","2014-05-05T00:00:00-04:00","2014-05-12T00:00:00-04:00","2017-05-12T00:00:00-04:00","2013-12-31T19:00:00-05:00","2016-02-29T00:00:00-05:00","2016-03-01T00:00:00-05:00","2016-05-16T00:00:00-04:00","2016-05-17T00:00:00-04:00","2012-03-03T00:00:00-05:00","2015-07-02T00:00:00-04:00","2012-09-02T00:00:00-04:00","2015-09-01T00:00:00-04:00","2010-12-31T19:00:00-05:00","2012-03-06T00:00:00-05:00","2015-07-15T00:00:00-04:00","2012-09-02T00:00:00-04:00","2015-09-01T00:00:00-04:00","2010-12-31T19:00:00-05:00","2012-09-25T00:00:00-04:00","2012-10-02T00:00:00-04:00","2012-10-08T00:00:00-04:00","2015-10-08T00:00:00-04:00","2011-12-31T19:00:00-05:00","2012-09-27T00:00:00-04:00","2012-10-03T00:00:00-04:00","2012-10-08T00:00:00-04:00","2015-10-08T00:00:00-04:00","2011-12-31T19:00:00-05:00","2016-03-22T00:00:00-04:00","2016-03-22T00:00:00-04:00","2011-12-31T19:00:00-05:00","2011-10-28T00:00:00-04:00","2011-12-31T19:00:00-05:00","2011-12-31T00:00:00-05:00","2016-07-11T00:00:00-04:00","2016-07-11T00:00:00-04:00","2016-05-03T00:00:00-04:00","2016-05-03T00:00:00-04:00"]
var margin = {top: 10, right: 30, bottom: 30, left: 30},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom
        rowHeight = 125;
​
var x = d3.scaleTime()
    .domain([new Date(2015, 0, 1), new Date(2016, 0, 1)])
    .rangeRound([0, width]);
​
var y = d3.scaleLinear()
    .range([height, 0]);
​
var yAccessor = function(d) { return d.length; }
​
var z = d3.scaleLinear().range(["white", "green"])
​
var histogram = d3.histogram()
    .value(function(d) { return d; })
    .domain(x.domain())
    .thresholds(x.ticks(d3.timeWeek));
​
var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
​
svg.append("g")
    .attr("class", "axis axis--x")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x));
​
  
  
​
  var bins = histogram(data);
​
  y.domain([0, d3.max(bins, yAccessor)]);
    z.domain(d3.extent(bins, yAccessor))
​
  var bar = svg.selectAll(".bar")
      .data(bins)
    .enter().append("g")
      .attr("class", "bar")
      .attr("transform", function(d) { return "translate(" + x(d.x0) + "," + (height - rowHeight) + ")"; });
​
  bar.append("rect")
      .attr("x", 1)
      .attr("width", function(d) { return x(d.x1) - x(d.x0) - 1; })
      .attr("height", rowHeight)
        .attr("fill", d => z(yAccessor(d)));
​
  bar.append("text")
      .attr("dy", ".75em")
      .attr("y", 6)
      .style("opacity","0")
      .attr("x", function(d) { return (x(d.x1) - x(d.x0)) / 2; })
      .attr("text-anchor", "middle")
      .text(function(d) { return formatCount(d.length); });
​
</script>
​
    