5

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

Nasir
  • 1,982
  • 4
  • 19
  • 35
  • 1
    I guess you need to get started somewhere first. Usually people here won't solve your whole job from scratch. You could, e.g., start with a [bar chart](http://mbostock.github.com/d3/tutorial/bar-1.html) and then think how to impove it. Maybe the [stacked normalized](http://bl.ocks.org/3886394) example is somewhat similar to your idea? At least it shows you how to draw a data series using boxes. – Juve Nov 09 '12 at 20:04

2 Answers2

8

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/

Nasir
  • 1,982
  • 4
  • 19
  • 35
4

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.

Superboggly
  • 5,804
  • 2
  • 24
  • 27