Separate graphs for separate sub-sets of a dimension

[Richard Jones]

I've been having trouble finding the best way to solve a visualisation issue I'm having with dc.js.

My example is a situation I have data something like

[

 {

   type:'human"

   age:4

   orderArrived:1

 },

 {

   type:"human"

   age:10,

   orderArrived:2

 },

 {

   type:"dog" 

   age:10,

   orderArrived:3

  },

  {

   type:"dog"

   age:14

   orderArrived:4

   }

etc etc

]

Now I'd like to visualise the dogs and humans based on age category. Say three categories <3 , >=3 <=6, >6.

I 'd also like to have one line chart which shows the age of the entity on the y-axis and order arrived on the x-axis (this part I have no problem with).

I'd also like a donut graph counting the number of entities of any type with each age category (I can also do this with no problem).

The part I am having trouble with is providing another two donut charts showing age category separated by species. So one donut showing the count of only dogs in each age category and another showing the count of only humans in each age category. I'm sure the answer is obvious, and I'm missing something simple, but it wasn't clear to me how to achieve the grouping by age category and making it specific to the species. I had a few hacks that almost worked by using reduceSum and ignoring the items of the other category, but I seemed to have trouble with consistent behaviour when clicking on donut segments and reseting filters.

Regards,

Richard.

   

[Gordon Woodhull]

Similar to today's question from Usha, do you want to filter the categories independently or together? Maybe it would make sense to have two crossfilter instances, one for dogs and one for humans. You'd partition your data before passing it to the crossfilter instances.

If on the other hand you do want to filter them together but you want those two charts only to apply to those specific categories, it's going to get messy. At the very least, you'll need to define your own filter handler [1] so that you're only filtering out records for the species your chart is about. 

An alternative to the reduceSum hack you mention, is to define your dimension and group to bin based on both species and age. Then use a "fake group" [2] to remove the bins you don't care about dynamically after reduction. Somewhat cleaner conceptually but probably the same effect for this use case.

[1] https://github.com/dc-js/dc.js/blob/develop/web/docs/api-latest.md#basemixinfilterhandlerfilterhandler--function--basemixin

[2] https://github.com/dc-js/dc.js/wiki/FAQ#filter-out-bins-by-a-predicate-function-on-the-values

--
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/c7af28ac-b0d4-4eb1-873e-c6f29fcbcb2b%40googlegroups.com.

[Richard Jones]

Thanks Gordon!

I do indeed want to be able to filter them together (so that clicks on either donut filter another graph that includes data from both humans and dogs). I hacked away at this a bit longer after posting, and discovered I had a bug in an unrelated area of the code where I was accidentally applying a filter on external user interactions, and this had prevented the reduceSum hack from working consistently, as well as breaking a previous attempt I'd made at using the super group method you describe in the FAQ. Thanks for confirming that this approach is what I'm after, now that I've squashed the other bug, I think I'll be able to make progress using the fake groups idea (which seems a lot less hacky than the reduceSum method).

Thanks again!

Regards,

Richard.

[Richard Jones]

Just confirming with my bug squashed, the fake group is working fine for my use case.

Thanks for the great library!

Regards,

Richard.

On Wednesday, May 25, 2016 at 11:54:35 PM UTC+10, Gordon Woodhull wrote: