Radial stacked bar graph implementation using Vega

[Banu Prakash]

Hi,

I still a novice in Vega and trying to implement a radial stacked bar graph per below image.

I've tried the sunburst example which is similar but it diverges every category into sub categories which is not my case.

My requirement is basically an alternate representation of stacked bar chart . 

Can someone help me with a config snippet or guide me on how to proceed.

Thanks in advance.

[Banu Prakash]

I have made a little progress(attached JSON config) starting with pie chart as reference.Have been able to get the charts rendered but  I'm stuck at coloring the arcs & adding an axis.

I need a coloring scheme wherein each arc range starts with a darker shade and then a lighter shade of the same color. I have attached is the current code in which I have hard-coded the the colors("clr" field). Below is the o/p:

[Jeffrey Heer]

Hi! It looks like your current design is creating a layered set of arcs. To create a *stacked* radial bar chart, you can use the "stack" transform to compute stack levels for the inner and outer radius values. See the stacked bar chart example for a usage example: https://vega.github.io/vega/examples/stacked-bar-chart/

You can also use the "pie" transform to compute the angles, if you prefer that to signal expressions.

To create the color encoding you describe, you might consider encoding along separate color channels. For example, using the "hsl" or "hcl" color spaces, you could set the "h" (hue) channel based on the arc set, and the "s" (saturation) / "c" (chroma) and or "l" (luminance) channels based on data values within each group. For more about using color channels, see https://vega.github.io/vega/docs/marks/#colorref

Hope that helps,

-jeff

--
You received this message because you are subscribed to the Google Groups "vega-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to vega-js+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Banu Prakash]

Thanks. Will it be possible to elaborate the usage of hsl or hcl in vega with a small example. 

I've tried multiple ways, but am not arrive at a solution.

To unsubscribe from this group and stop receiving emails from it, send an email to vega-js+u...@googlegroups.com.