Interactive Ribbon Charts with plotly.js
Test interactive plotly.js ribbon charts with date-related data.
plotly.js is a pretty awesome library for charting. It extends and is built on D3.js.
Unlike highcharts, plotly supports pretty rich interation with the charts it produces.
Describing a Ribbon Chart
- xaxis: Category
- yaxis: Date
- zaxis: Value
The data the describes the coordinates of the ribbon is set in
z is a 2D array with [start, end] values.
y can either be 1D or 2D arrays. For this example:
- a 2D arrays is used for the
xarray to give the ribbon width. The
xaxis basically spreads out (categorizes) the separate traces.
- a 1D array of dates is used for the
The color scale corresponds to the
z values by default. A custom color scales is set with the
surfacecolor 2D array, where its bounds can be controlled using
Color scales can get quite sophisticated. I’m using the simplest form which sets the min and max colors (0, 1) and let plotly interpolate between them. For example
[[0, 'rgb(31,31,128)'], [1, 'rgb(31,31,255)']].
The yaxis is set as type: ‘date’. I can’t find the definitive documentation, but is appears dates may be provided in a flexible range of formats. I demonstrate three versions in the example:
new Date(2016, 4, 26)
- as milliseconds since midnight January 1, 1970 UTC:
new Date(2016, 4, 26).valueOf
- as a simple date string: ‘2016-05-26’
What doesn’t work:
new Date(2016, 4, 26).toString()=> “Fri Feb 26 2016 00:00:00 GMT+0800 (SGT)”
Only a 1D array of dates is required for the
y array. But a 2D may be provided.
The xaxis is set to type: ‘category’, rather than numeric data.
A 2D array is required to give the ribbon width, so it’s necessary to figure out how to express the category as an array.
I’m using an array of name and number, like
Or run the demo live from GitHub Pages.