Plotly Tip #5: sand charts
About Plot.ly
Plot.ly is a company that has created a set of open-source libraries for creating graphs in languages like Python, R, and client-side JavaScript. It’s built on top of the popular d3 and stack.gl libraries, renders charts in SVG and WebGL, and targets compatibility for most of its features as far back as IE 9.
Plotly Tips
I’ve found that many more questions arise than can be easily answered from the plotly.js documentation and forum. So I’m putting together a series of small examples and code snippets that have helped my solved some of my data visualization problems.
Issue #5
Sand charts are effectively line charts with the area under each line filled in with a different color. They’re often used for time series data and may or may not be normalized (often as a percent). Plotly has a guide on Filled Area Plots that helps explain some of what’s needed to accomplish this, but these demos also show several issues.
Below is what I’ve been working on and some of the issues I’ve run in to.
Above is what I accomplished simply by overlaying several time series data. Effectively each filled area stacks above those before it. To get the lines to stack properly, all traces will need to draw to the next trace (tonexty) except the first, which draws to the zero line.
fill : (index === 0) ? 'tozeroy' : 'tonexty'I also use a solid white line above each trace to help separate similar colors.
trace.line = { 'color' : 'white', width : 1 };Then there’s the issue of using chart legends. By default, these toggle trace visibility. Because of the masking trick used, we get an inaccurate representation of the data.
The trace selected only represents 30 — 40% at any given time point, but it shows up as being more than 60% because the other traces masking it are now hidden. One solution I’ve found is to fade all other traces:
Another solution would be to set the fill color of the “hidden” traces to the same color as the background, in this case white.
There’s a few options and considerations when making sand/ filled area plots in Plotly. It’s worth considering these rather than just deploying what Plotly does by default. As shown above, even the Plotly documentation provides examples that inaccurately represent data.
