Heat map label ordering and grouping

[Amergin]

Is it possible to order the labels presented left and below the cell table of a heat map? 

My situation is this: all the variables are members of a certain group. I would like the label ordering to reflect the membership of that group (and the order of the group, which is not alphabetic). Furthermore, it would be helpful if the variabl labels were presented under a title that indicates the group. 

The label grouping is not probably currently supported, and it would make little sense to try to squeeze it in the svg code with a renderlet, but any ideas on how to order the labels? The ordering would have to be based on two criteria: first based on the group of a variable, and then by the order of that particular variable within that group (which is not alphabetical). I see there's .ordering() in Base Mixing, but it is not applicable to heat maps and therefore not called.

[Matt Traynham]

The grouping is a cool idea, but yeah, not supported :(.  Pull requests are definitely encouraged. :)

On the question of ordering, it looks like the code forces an ascending sort in the rows/cols methods. 

https://github.com/dc-js/dc.js/blob/develop/src/heatmap.js#L145

https://github.com/dc-js/dc.js/blob/develop/src/heatmap.js#L164

To change that, you'll have to override those functions.  Do what they do, but provide your own ordering.  The `uniq` function here is actually unnecessary.  d3.ordinal.scales actually unique their domains anyway.

var chart = dc.heatmap('#foobar')
    .dimension....

var _rows;
chart.rows = function (_) {
    if (arguments.length) {
        _rows = _;
        return chart;
    }
    if (_rows) {
        return _rows;
    }
    var rowValues = chart.data().map(chart.valueAccessor());
    // Sort the rowValues however you want.
    rowValues.sort(function (a, b) {
        // Your comparator
    });
    return d3.scale.ordinal().domain(rowValues);
}

Now, I actually dislike this code...  The `uniq` function is unnecessary, these getter/setter methods do more than they should (i.e. the scale creation should be done in redraw/render of a chart), and it forces the ascending sort.

So I encourage you to go and create a pull request to make the sorting for rows/columns configurable :).  If you don't, I will...

[Matt Traynham]

Actually, no worries, I was getting overly opinionated about the solution so I went ahead and implemented it for you. :P

https://github.com/dc-js/dc.js/pull/869

When creating the heatmap, just specify the rows/cols that you want against the rows/cols setter, and then set the rowOrdering/colOrdering functions to null to turn off sorting.

[Amergin]

That was fast! I'll wait for the pull request to be merged and try it out then.

[Amergin]

Yep, works like a charm. 

Now, if only there was a proper way to group the labels. Fist I was thinking that for the time being, I could use css even/odd rules to distinguish the labels. Looking at the svg elements produced, g.rows.axis is a flat structure so alternating the text element styles based on the label group would be a pain and would require a renderlet.

On Monday, March 2, 2015 at 5:54:19 AM UTC+2, Matt Traynham wrote:

[Igor Shchukin]

I appreciate this is a bit different, but I wonder what's the proper way to move the col headers to the top of the chart instead of having them at the very bottom? 

[Gordon Woodhull]

Hi Igor,

This should be easier once we merge https://github.com/dc-js/dc.js/pull/919 - right now there is just a bunch of ad-hoc objects you'd have to move around. It's easy enough to reposition the labels but you'd also have to move all the heatmap elements down.

Sorry I don't have an easy answer here. The trade-off of using reusable charts versus bare d3 is that every customization has to be designed and implemented rather than just meddling with the code directly.

Cheers,

Gordon

On Apr 27, 2015, at 11:36 AM, Igor Shchukin <igorsh...@googlemail.com> wrote:

I appreciate this is a bit different, but I wonder what's the proper way to move the col headers to the top of the chart instead of having them at the very bottom? 

--
You received this message because you are subscribed to the Google Groups "dc-js user group" group.
To unsubscribe from this group and stop receiving emails from it, send an email to dc-js-user-gro...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/dc-js-user-group/c1cf8546-9ece-47bb-9432-df41aad927d7%40googlegroups.com.