How Do I make this sunburst start with the inner ring consuming the entire diameter of the chart?

Question

The Start of my visualization does not 'match' what I want it to. The start of my sunburst does not consume the entire radius of the circle, instead only a partial diameter.

I'm trying to adapt an example, that uses hierarchical data, to my own iteration, that uses a flat json dataset (see example).

1. Convert flat json data to a hierarchical format (d3.stratify then d3.hierarchy)
2. make a dataJoin
3. draw the arcs

Source example: https://bl.ocks.org/denjn5/3b74baf5edc4ac93d5e487136481c601

My Current iteration https://codepen.io/mretfaster/pen/LwjxGw

I expect the starting visualization to consume the entire diameter of the sunburst

Answer 1

In your makeRoot function and in toggleOrder you are doing .sum(d => d.value) replace it to .sum(d => d.data.size).

value is generated by d3 after calling d3.hierarchy and used by the d3.partition to get the angles. But size is the name of the values in your data source, and that is what sum expects.

Here is the updated codepen