block by danharr d89b3941d0e7dbccf8bf577f4b52edf8

D3 Stacked Area Chart with Increasing Uncertainty Over Time

Full Screen

This chart represents a modification of the Multi Series Line Chart, focusing on presenting values in the future that have a degree of uncertainty. It uses a “fan tail” style as often seen in financial charts to which increases it’s height as a function over time. The mean of which is drawn as a dashed line.

The fan tail aspect is produced quite simply by using an area chart that has 0 height up until the point of moving into the future. After that the upper and lower bounds for the the area are calculated by scaling the temperature and applying the following modifier:

((d.date - predictDate) / 1000 / 60 / 60 / 24 / 10)) // predicitDate is the cut off date to mark all future values as a prediction

The line chart is a little more complex, as this has to use a custom path generator to provide the dashed affect going forwards.

index.html

line.json

style.css