Search code examples
dated3.jsscalehistogram

D3 Histogram - Date Based

I have an array of dates 

["01/01/2001", "01/01/2001", "03/01/2001", "01/04/2001", "01/05/2001", "02/05/2001", "01/07/2001", "01/07/2001", "01/07/2001", "01/10/2001"]

Some are duplicates and in no particular order, over a varying timescale (1 week, 43 days, 2 years etc).

What I want to do is produce a histogram (or bar chart) that shows counts of "dates" in arbitrary # of buckets (like 20 buckets).

Where there are no dates in a bucket it shows zero and a total for those buckets that contain dates.

Basically like this example: http://bl.ocks.org/mbostock/3048450

But instead of showing random "seconds" I need "dates".

Like:

Histogram of dates

I guess I'm looking to change X scale domain to the range of dates in my data.

Solution

  • So the solution for this is as @LarsKotthoff suggested in the comments.

    var x = d3.time.scale().domain([firstDate, lastDate]).range([0, width]);

var data = d3.layout.histogram()
        .bins(x.ticks(bins))  
        (values);

var formatDate = d3.time.format("%d/%m/%y");
var xAxis = d3.svg.axis()
            .scale(x)
            .orient("bottom")
            .tickFormat(formatDate);