Color of non-selected Choropleth regions

25 views
Skip to first unread message

Daniel Salas

unread,
Nov 16, 2016, 1:10:09 AM11/16/16
to dc-js user group
Looked around for similar questions and couldn't find anything... apologies in advance if this has been answered before.

I've created two charts: a choropleth and a row chart. Selecting any bar on the row chart filters for a set of regions of the choropleth, so that this set of regions stays colored and the rest become white:




Now, what I'd like to have is the set of selected regions stay colored and have the rest also be colored but with an opacity factor. Any ideas on how to do this? I've played around with the source code and the CSS file but can't seem to get it.

Thanks!
Daniel

Gordon Woodhull

unread,
Nov 21, 2016, 3:13:12 PM11/21/16
to dc.js user group
Hi Daniel,

When you select a bar, it filters the data, so that any regions which are not selected have a zero value. So that's what turns the unselected values white.

If you want the values to remain, you have a couple of choices:
1. If the row chart has a compatible dimension (regions are proper subsets of bars), then you could use the same dimension for both, and then the map will not observe filtering on the row chart. Then you'd respond to rowChart.on('filtered', ...) and update the opacity on the map accordingly.
2. You could also reduce the values for the choropleth differently, saving the "unfiltered value" and using it for color, but the filtered value for opacity. This would depend what you want to do when another chart filters the data such that a region is only partly filled.

I think you can apply the opacity in response to events (e.g. filter, pretransition), so you shouldn't need to modify the code. But I don't think there is currently any dc.js chart which binds values to opacity.

Cheers,
Gordon


--
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/853fad90-04af-4db8-a801-dac97e993788%40googlegroups.com.

Reply all
Reply to author
Forward
0 new messages