D3 time series heatmap

Question

I am trying to make a heatmap using d3 which on x axis a time series, on y a number and the color is the value for the cell. The data is loaded based on the input and the domain and range can change on different input. I was not able to find such example. Does anyone have an idea how I can create that?

Thanks

Answer 1

So I finally got the time to write this piece of code that I was looking for. My main problem was that I had understood the scales well. So after reading a bit I could define a time scale and map it to my data with the following code:

var xscale = d3.time.scale()
                     .domain([startDate, endDate])
                     .range([padding, w - padding]);

var xAxis = d3.svg.axis()
            .scale(xscale)
            .orient("bottom")
            .ticks(d3.time.days, 5);

You can find a working demo of my code in the following jsfiddle: http://jsfiddle.net/TD5Sk/1/

Answer 2

Explore around the d3 gallery of examples, mixing and matching you should be able to find a good starting point. The co-occurrence matrix has many of the properties you describe. Even the calendar example probably has some useful pointers.