Search code examples
d3.jscolorbrewer

D3 Floorplan custom colour the heatmaps


I would like to colour the heatmaps in the D3 Floorplan library with custom hexidecimal values. For example "heatmap1 = '#000'".

https://github.com/dciarletta/d3-floorplan

It states it uses http://colorbrewer2.org/ for it's colour functionality.

I would like the colour of the heatmaps to change according to a sliding timeline, which can be slid by the user. In other words if it's Jan 2016, the heatmap is green and if it's Feb 2016 the heatmap is red.

Does anyone have an example of how to achieve this?


Solution

  • Ok the way to edit colours explicitly is doing what Mark said by modifying the CSS and then:

    heatmap.colorMode(['custom']);
    heatmap.customThresholds([1, 2, 3]); // choose the values you want to indicate a change of colour
    

    Then update the map:

    mapdata[heatmap.id()] = data.heatmap;
    d3.select("#demo")
        .datum(mapdata)
        .call(map);
    

    You then modify the value in the JSON heatmaps element and this correlates to the class names i.e. ".d6-6".