|
<!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> |