Search code examples
javascriptd3.jsdata-visualizationgraph-visualization

D3 time series heatmap

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

Solution

  • 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/