dc.js heatmap expanding data

0
votes

I am trying to show machine states over time. Part of this is to reproduce/automate a report that used to be done by hand. It consists of coloring 2minute 'time slices' in Excel based on what the machine is doing.

(Sorry, not enough reputation to post a picture, but it is a classic heatmap where the state drives the color. Some non DC-JS fiddle: http://jsfiddle.net/ww6Lbnc5/4/)

I was able to generate most of what I want in the following jsfiddle: http://jsfiddle.net/hwhfxz2t/14/ 

See fiddle for code.

The total state duration (for selected time frame) is shown in the pieChart, followed by the individual state lines and then the heatmap that people are used to. (the ZOOM and date selection buttons do not work in the fiddle but are there to select specific data ranges or zoom in if you like).

The line charts uses the original representation of the states, which consists of a time the state is entered and a duration.

In order to make the heat map work, I had to (I think) take the original data and convert it into individual minute chunks and mark them with a state. So for instance the original data specifying:
    RUN state starting 14:30 for 300 seconds
becomes:
    14:30=RUN, 14:31=RUN, 14:32=RUN, 14:33=RUN and 14:34=RUN

The code in lines 233-297 loops through the original data and generates a new one that does this. In cases where there is more than one state within a given minute, the last state survives.

This works okay but it seems that this code is exactly what is normally done in group().reduce(add,remove,init). But in this case I need to add multiple timeslots depending on the duration of a state.

Also, because it is now using a different crossfilter, maps do not update each other.

Here are my questions related to this:

  1. Can I display a heatmap without supplying information for all individual 'cells'? (i.e. straddle cells based on a value, similar to rowspan in a table)
  2. Can I add multiple values at once inside group().reduce()?
  3. Is there an easy way to invert the yAxis so 0 is at the top?
  4. When clicking a row in the heatmap, it selects a column and vice-versa?

I'm not sure if this should be in the crossfilter group. If so please ignore my rambling. If someone knows how to keep the charts linked by grouping better, please let me know.

--Nico

1
dc.jscrossfilter
I don't think you can do this using group().reduce() (add a single record RUN at 14:30 for 300 seconds to multiple groups, e.g. 14:30, 14:31, etc). You can do this using groupAll().reduce(), but it's a little different than group().reduce() and is not well documented. I actually just put together an example of how to do this using for moving averages Reductio and Crossfilter (github.com/esjewett/reductio) that you might be able to use as its a very similar problem: gist.github.com/esjewett/8291936a4e4054342ba4 (also the discussion github.com/esjewett/reductio/issues/12 - Ethan Jewett

1 Answers

0
votes

Concerning Question 3:

DC.js heatmaps currently do not support custom order functions on axis but there is a pull request that has been merged into the developing branch and should be accessible to the public soon.

You could manually edit the dc.js file to set the sorting in heatmaps to a custom function. In the latest (2.0.0-beta10) version it is the following line:

rowValues.sort(d3.ascending);

and accordingly

colValues.sort(d3.ascending);