D3 time series heatmap

Question

I am trying to make a heatmap using d3 which on x axis a time series, on ya 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.