coloring sections of a stacked bar chart

[evan wheeler]

Hello,

First off, dc.js rocks. Thanks for all of the great work in marrying d3 and crossfilter in such a lovely way. I'm new to dc.js and crossfilter, but have been using d3 for quite some time. I believe my question concerns dc, but perhaps my crossfilter group/reduce usage is to blame.

I have been working on some choropleth maps with associated charts for exploring data about emergency 'red alert' risks observed during labor that is aggregated by district in Rwanda. Here is an example: http://bl.ocks.org/ewheeler/5354775 -- you'll need to click 'Open in a new window' to be able to scroll down and see all of the charts. Basically, the map and other charts are updated based on clicking the donut charts (provinces and risks) on the right-hand side.

My question: how can I color the sections of the stacked bar chart at the bottom to show the 'red alert' risks in the same color as in the corresponding donut chart? 

I am able to color the provinces correctly in the bubble chart, but can't figure out how to do so for the elements of the stacked bar chart. The stacked bar chart doesn't seem to implement 'colors' in the same way as the other chart types. In the dc.js examples, stacked segments are colored with css, but in my case the risks vary per district, so each risk is not present for every district (hence the numbered css classes for the stacks are not consistent for each risk -- e.g., 'mother in labor at home' is given the class 'stack0' for Gakenke but it is given the class 'stack3' for Musanze). I tried to update the fill colors with pure d3 after the dc.renderAll() call, but i haven't been successful with that approach. Any ideas?

Thanks,

Evan

[Nick Zhu]

Currently the stacked bar chart has to be colored via css therefore require consistency in stack index regarding to the data group. Is it possible to fill the missing data using 0 height bars? so you can have the same stack index for each risk in different region?

Nick

[evan wheeler]

Thanks Nick. I'll look into using 0 height bars to fill in the missing data

[evan wheeler]

I came up with a workaround (that doesnt use 0 height bars for missing data) and have updated my code here: http://bl.ocks.org/ewheeler/5354775

It might not be applicable to anyone else due to my complicated crossfilter reduce functions - but it might provide inspiration for others trying to work around this issue. Basically, I wired up some listeners to use d3 to fill in the bar chart stack segments with the appropriate color after render and redraw. This works because the numbered css classes added by dc.js to the segments are in the same order as the list of data used when adding the stacks to the chart -- and this same list of data is accessible to d3

[Nick Zhu]

Thanks for sharing Evan =)