sunburst or nested donut chart

[PBrockmann]

It would be nice to have a sunburst or a nested donut chart directly from dc.js.
I call sunburst or nested donut chart a chart like

Is it possible, already done by someone, I would be very interested to know.

[gordonwoodhull]

Blair Nilsson @blairn had been working on the sunburst. I don't know if his repo is current but we plan to incorporate this into dc.js 2.1:

https://github.com/blairn/dc.js/tree/sunburst

I bet you wouldn't have any trouble using it now, but it needs to be reviewed and Blair said it needed just a few more tests.

[PBrockmann]

Wouah ! Super impressive. Very enthusiastic to see sunburst chart merged into dc.js 2.1

[tttp]

@PBrockmann is this last graph generated with @blairn fork?

I'm not sure I understand the "rings" after the second one. shouldn't "wedding+aftermath+wife" be on the same ring (3rd one) for instance?

ie. on a sunburst, I expect to have each ring containing a bigger number of divisions than the parent item:
http://bl.ocks.org/mbostock/4063423

but here you have 1 child per parent for several rings (eg music->hiphop->... ->chap

Or I might just be trying to read too much on a graph that is mostly random data to test ;)

[madebydna]

@tttp - the hierarchy implied in the input data is such that after the second level (ring) all nodes (and their child nodes) only have a single child node. You can see the different paths in the legend, by the way.

For example, while pics has multiple child nodes (all, cats, others, park, wellington), music has only a single child node - hiphop. So yes, the generated graph is an artifact of the input data not having deeper branching.

[PBrockmann]

Is there fine control on colors ? I would like to have colors of sub pie-slices derivated from colors of pie-slices from the 1st level ? I can control them from the css but then would need hierarchy in the names of slice. Classes are coded as follow pie-slice _1, pie-slice _2, ... but it would be better with pie-slice _1, pie-slice _1.1, pie-slice _1.2, pie-slice _2.1, pie-slice _2.2, pie-slice _2.3, ...
Any idea on how to do this ?

[IgorShch]

@PBrockmann Could you please post the code you used to generate the sunburst chart? I struggle to understand how to get crossfilter to represent the hierarchical data. Thanks a lot

[blairn]

I'll explain it. We use an array for a key. say we have these lines in a csv. location, value animal/moose, 5 animal/cat,2 animal/frog,3 location/house,3 location/fridge,4 location/island,2 ant/red/angry,3 ant/red/happy,2 You can see you have a hierarchy (filled with junk data, but a hierarchy all the same) we turn the data into the form.... {location:['animal','moose'] , value:5} {location:['animal','cat'], value 2} ... and push that into crossfilter (with other fields, since you will want to actually be able to crossfilter it on something!). When we get the data out, the key still contains the path in the heirachy... How we do the filters, is.... crossfilter lets you pass in a function describing the filter. so... we can build a filter for ['animal'], which filters for everything whos path starts with animal. I'll post code later today. I'm unfortunately without net at home. and doing this off the top of my head from a cell phone is pretty hard - hopefully it is giving you an idea of what is going on. if not, I'll post the actual code fragments which do things soon.

[IgorShch]

@blairn Thanks a lot. I found the code in the examples folder, but I'm sure it will be useful for other people. This graph is just awesome. If you are going to post an example, could you please explain how to control the width of every doughnut?

[blairn]

You don't yet :)

Currently it is using an sqrt function to set them, I'll make it so you can
set your own function.

On Wed, Feb 25, 2015 at 10:48 AM, IgorShch notifications@github.com wrote:

@blairn https://github.com/blairn Thanks a lot. I found the code in the
examples folder, but I'm sure it will be useful for other people. This
graph is just awesome. If you are going to post an example, could you
please explain how to control the width of every doughnut?

—
Reply to this email directly or view it on GitHub
#781 (comment).

[nsubordin81]

I wasn't sure where to comment on this since it didn't look like the code had been merged yet so it isn't a dc-js issue. I am loving the sunburst chart, thanks @blairn. one change I made to my code locally after adding sunburst was to the drawChart() method for sunburst:

  // if we have data...
        if (d3.sum(_chart.data(), _chart.valueAccessor())) {
        //. . . 
        } else {
           //. . . 
            sunburstData = partitionLayout([{key:[0], value:1}]);
           //. . . 
        }

was changed to

  // if we have data...
        if (d3.sum(_chart.data(), _chart.valueAccessor())) {
        //. . . 
        } else {
            //. . . 
            sunburstData = partitionLayout().nodes([{key:[0], value:1}]);
            //. . . 
        }

Otherwise if my dimensions were filtered to the point of having no data I ended up with an exception somewhere down the road because d3's hierarchy function was trying to set depth on an undefined parameter. Aside from that, it is working great for me and I can't wait for it to be added in 2.1, thanks.

[nsubordin81]

I also made a small modification to isSelectedSlice to return false if d.path is not defined, since this dummy object we pass in doesn't contain one. Not sure if that is the best approach.

[gordonwoodhull]

Thanks @nsubordin81. FWIW, the "files changed" tab of PR #907 would be the best place to comment so that we can see your feedback in context. Also welcome here, of course!

[blairn]

Yay!!! feedback! :) I'll go make sure it is all fixed :) thanks so much ^.^

Sorry I haven't been spending much time of getting the tests for sunburst
finished (it is why it isn't merged yet...) I'm working on the server
connection system these days, and will get back to sunburst / force /
sankey / chord when I'm done with it.

On Tue, May 5, 2015 at 5:21 AM, Gordon Woodhull notifications@github.com
wrote:

Thanks @nsubordin81 https://github.com/nsubordin81. FWIW, the "files
changed" tab of PR #907 #907 would
be the best place to comment so that we can see your feedback in context.
Also welcome here, of course!

—
Reply to this email directly or view it on GitHub
#781 (comment).

[tttp]

Hi @blairn ,
Just so you know, we are several interested with this graph, thanks for sharing ;)

[KatiRG]

I was able to get the sunburst chart working using the code here https://github.com/blairn/dc.js/tree/sunburst, but the weird this is that it turns all my rowChart bars dark grey. Anyone else find this?

[KatiRG]

innerRadius cannot be changed using the .innerRadius() option...assistance appreciated! thanks.

[blairn]

I had someone mention innerRadius support for it yesterday as something they wanted :), I've been crazy busy, but I should get to it this weekend.

I don't know why it would turn your rowChart bars dark grey. :/

Getting tests up and running will take longer though, so it won't have a proper merge yet.

[KatiRG]

Thanks @blairn, that sounds great! As for the grey bars, we worked around it by specifiying the colour in the css.

[KatiRG]

Hi @blairn! Any luck with the inner radius?

[blairn]

I have a fix, I'll check in tonight and issue a new pull request.

[gordonwoodhull]

You can just push to the same branch of your fork and it will update the PR.

[blairn]

oh sweet!

On Thu, Jul 16, 2015 at 8:48 AM, Gordon Woodhull notifications@github.com
wrote:

You can just push to the same branch of your fork and it will update the
PR.

—
Reply to this email directly or view it on GitHub
#781 (comment).

[KatiRG]

by the way, do you know if your sunburst is supposed to work with .valueAccessor (for calculating means as in this example? http://stackoverflow.com/questions/21519856/dc-js-how-to-get-the-average-of-a-column-in-data-set). I have had some trouble.

[blairn]

It should, but it doesn't :(
On Jul 17, 2015 4:16 AM, "KatiRG" notifications@github.com wrote:

by the way, do you know if your sunburst is supposed to work with
.valueAccessor (for calculating means as in this example?
http://stackoverflow.com/questions/21519856/dc-js-how-to-get-the-average-of-a-column-in-data-set).
I have had some trouble.

—
Reply to this email directly or view it on GitHub
#781 (comment).

[KatiRG]

Is there a simple way around this by configuring the custom reduce functions to output only the average in the value part of the key-value pair, and not an object of key-value pairs?

This is the output of the normal group filter myGroup = myDim.group().reduceCount(function(d) {return d.Value;}); :
[Object { key=[2], value=1025}, ...]

Whereas the output in value of the custom reduce functions is not one number but an object of three pairs:

[Object { key=[2], value={...}}, ...], where value is an object of three pairs:
Object { count=1025, numDataSets=2, average=513}

because count, numDataSets and average are declared as follows in the reduceInitial fn:

function reduceInitial() { return { count: 0, numDataSets: 0, average: 0 }; }

Is there a way to only output average to mimic the original structure?

[alemarre]

Hello,

Thank you @blairn for your work, it helped me a lot.

I found a little bug:
If you specify a custom value accessor, ie :

chart.valueAccessor(function(d) { return d.myKey; });

Function dc.utils.toHierarchy will use this accesor to access value, and will store it in attribute value of tree nodes.

Then in partitonLayout() (which uses the tree data), the accesor used is _chart.cappedValueAccessor. But behind the scene, this accessor also use valueAccessor, and try to access d.myKey, which doesn't exist in the tree data.

One solution is to use the default accesor in partitionLayout() to acces d.value and not d.myKey.

I think this is related to @KatiRG issue.

[csymill26]

The sunburst is an awesome graph. Is there a way to make it zoomable? I have not been able to make it do so. Also, .innerRadius does not seem to work for me either. No matter the value I give it, the inner ring is the same size. I saw someone else mentioned having this problem. Is there a fix? Another thing, is it possible to add spaces between the levels? Thanks!

[akuji1993]

@gordonwoodhull Have you been able to incorporate this into the dc.js standard yet? What is the status on it? We would love to be able to use this.

[gordonwoodhull]

Hi @akuji1993, clearly I have not found the time to integrate this. It's fantastic that @blairn included tests, but the tests have a lot of failures. Also there have been many suggested corrections here and on the PR which will also need to be reviewed.

If you can try it out by pasting the code from PR #907 into your project, and then leave a review on the PR, that would help a lot.

The quickest way to get this into the library proper would be to start a new PR based on the existing work, and review the test failures and other comments.

[akuji1993]

Hi Gordon, since this would be a very nice addition to DC.js for us, I might help with this. I will include the PR in our project the week after next when I'm back from vacation.

And since I would be implementing the Bostock Sunburst myself if we wouldn't have this, I might as well take a look at the PR and maybe help with finalizing it. I'll let you know.

Thanks for the update.

[tehsenaus]

@akuji1993 did you make any progress with this?

I managed to get the PR running locally with a few modifications, it's working great. Would be good to see it merged.

[akuji1993]

@tehsenaus The project got halted because we got a new one in... didn't get any time to take a look at it. But awesome that you were able to get it to work!

[tehsenaus]

Hi all, I've raised a new pull request here with my updated version:
#1337

[gordonwoodhull]

Thanks @blairn, @tehsenaus, @kum-deepak for the collective effort getting this into dc.js!

It is merged for 3.0.0