CODEWITHSUNDEEP
javascriptd3.js
onkami
onkami

Reputation: 9411

Plot complex data format as heatmap in d3.js

I would like to build a 'heatmap' (as here http://bl.ocks.org/tjdecke/5558084) with d3js. The heatmap shows when some event (coded as Y) is observed by some station (coded as X) and must contain gray square when it was not observed and green one when it was observer. I know how to execute plotting itself, but I need to feed the data to d3js.

I have data in following form, that indicate what stations seen event. In total I have say 20 events and 30 stations. The stations that did not seen events are not listed.

  avail = [
{
    event: 1,
    stations: [1, 3, 4, 5, 6, 7]
},
{ event: 2,
    stations: [1, 2, 4, 5, 6, 7]
},
{ event: 3,
    stations: [1, 3, 4, 5, 6, 7]
},...

How I can declare for d3js the aforementioned heatmap and how can I process the data in given format to show as heat map? Taken the event 3, I would like gray square appear for stations NOT mentioned in list and green squares for stations mentioned in stations: array.

Note that I have control on the format, but this format I like as it is very compact and natural.

Upvotes: 0

Views: 926

Answers (1)

Lars Kotthoff
Lars Kotthoff

Reputation: 109232

Assume that you convert your data into a matrix where rows are stations and events are columns. 1 denotes that an event has been observed, 0 that it hasn't. You can use the following code to display this in a heatmap:

var data = [[matrix]];
var rows = svg.selectAll("g.row")
              .data(data).enter()
              .append("g")
              .attr("class", "row")
              .attr("transform", function(d, i) { return "translate(0," + i * 50 + ")"); });

rows.selectAll("rect")
    .data(function(d) { return d; }).enter()
    .append("rect")
    .attr("x", function(d, i) { return i * 50; })
    .attr("width", 50).attr("height", 50)
    .attr("fill", function(d) { return d == 0 ? "gray" : "green"; });

Upvotes: 1

Related Questions