Radial color gradients within arcs

[evodevosys]

I have some data where a flow proceeds in discrete time chunks, but the value of my key variable changes from the beginning to the end of a chunk. I've been using the sund2b function to represent the data, using the ending value to color each of the arcs.

Would it be possible to change the fill color to a gradient? With a gradient I could represent the change in my variable value within a time chunk. (In my particular example the starting variable value of a time chunk is not necessarily the ending value of its ancestor).

I posted this question to d2b initially (here) with the idea that if it were implemented in d2b then I could modify the sund2b interface to pass the gradient values along, but after playing around with the d2b.min.js and the d2b.R files, I realized that I don't know how to do that.

Thanks for any help.

[timelyportfolio]

@evodevosys I like the idea but had a couple of questions.

• How many slices do you expect in your sunburst?

• Will there be a gradient for each slice?

• Will you be in rmarkdown or shiny or some other context?

• Can you provide some sample data?

[evodevosys]

My dataset is structured as a trifurcating tree with 20 time chunks. The underlying data is an ecology dataset where a population is consuming food and growing according to a differential equation. The growth rate depends on temperature. At some point they eat up all the food and that is the end of one chunk. I then start a new chunk by (1) replenishing the food, (2) picking one of 3 temperatures (and thus a one of 3 sets of parameters), (3) starting the population growth again either from where it left off or from a modified version of where it left off - modified by killing some of the population off. So the starting population value in one chunk may or may not be the same as the ending value of the previous chunk. A sequence of arcs represents a sequence of temperatures and I'd like the color of the arcs to represent the population size or some other value that could change within a chunk. Right now I'm just using the ending population size as the arc color.

For both display and memory limitations I only look at a maximum of 5 or 6 chunks at once - the zooming capability of your sunburst plots helps with this because even if the last chunks are really small in the initial view, they can be expanded by zooming.

I'd like to have a gradient for each slice or arc.

Being in shiny would be good. Right now I have a function to generate the sund2b plot in a regular .R file and then I either analyze it from the RStudio console or use a shiny app so that I can interactively enter the starting sequence and how many chunks I want it to load.

testData.txt

library(sunburstR)
library(d3r)
testData=read.csv('testData.txt')
testData2=d3_nest(testData, value_cols = colnames(testData)[-c(1:5)],json=T)

sund2b(
  testData2,
  colors = htmlwidgets::JS(
    "function(name, d){return d.color || '#ccc';}"
  ),
  valueField = "vSize",
  breadcrumbs = sund2bBreadcrumb(
    html = htmlwidgets::JS("
                           function(nodedata, size, percent) {

                           return '<span style=\"font-weight: bold;\">' + nodedata.name+ '</span>' 

                           }
                           ")
  ),
  tooltip = sund2bTooltip(
    html = htmlwidgets::JS("
                           function(nodedata, size, percent) {
                           return '<span style=\"font-weight: bold;\">' + nodedata.name + '</span><br/>EndValue: '+' '+nodedata.endValue

                           }
                           ")
  )
)

I thought of a few other features that might prove interesting/useful in conjunction with a gradient.

In the css in d2b.min.js there is a definition:
.d2b-sunburst-arc{transition:opacity .2s,stroke-width .2s;cursor:pointer;opacity:.9;stroke-width:.8px;stroke:#fff}
If the stroke width were to shrink to nothing (or perhaps the opacity?), then the arcs would abut each other. With a gradient, this could create a neat effect. Perhaps there could be an option available for controlling that parameter?

Similarly, the sund2b plot currently has a fairly large central white area. I played around with the inner radius in d2b.min.js here:

}).addPropFunctor('innerRadius', function (d, w, h) {
      return Math.min(50, Math.min(w, h) / 4);

and that changed it.

Another idea affects how the gradient is made, although this seems a bit more complicated. I was initially just thinking of linearly interpolating from the startValue to the endValue and mapping that to some continuous color scale/palette. However, in my case and probably in many data situations, the actual data isn't really a linear interpolation between the start and end but instead changes nonlinearly. If there is a function that describes the change within a chunk, then perhaps the values could be mapped to the colors in the gradient by running it through that function. For example, let's say there is an exponential change from start to end of the key value. Then if the data frame had a column for the exponential parameter, that could be used to transform the gradient. I would imagine that this could get too complicated if the functional form differs in different chunks, which would be true for actual (not approximated) data.

Thanks!

[timelyportfolio]

@evodevosys I'll work on this in steps. innerRadius / outerRadius should be easy since I just need to expose these as arguments on the R side. For reference, here is the link in the docs and my amended sandbox playing with innerRadius and outerRadius.