NVD3 Stacked Area Chart
This NVD3 Stacked Area Chart, built through the dex.js framework, visualizes 12 months of fake sales data for ten people, using 1,728 tuples of name, date, and sales values. It offers three interactive views—traditional stacked areas, a streamgraph, and an expanded percentage view—with smooth transitions preserving object constancy. Users can toggle series via the interactive legend, and the styled, semi-transparent labels keep underlying data visible. The chart leverages the NVD3 library, D3 version 3, and Faker for generating the dataset.
AI-generated descriptionNVD Stacked Area Chart
This is the dex.js stacked area chart based upon NVD3. It pays great attention to the details which make a chart both responsive and usable for visual understanding.
In particular it provides three distinct views into the dataset preserving object constancy throughout the transitions. It allows one to shift between a traditional stacked area view into a stream (or steam chart) view and lastly into an expanded view which translates the view into percentages of the whole.
Next, the legend is interactive. Series may be toggled on and off and the view will adjust responsively.
Lastly the labels are nicely colored, formatted and even have a small degree of transparency so that the underlying data is still slightly visible.
The high quality of this chart was enough to virtually force me to port NVD3 into the dex.js component framework. Kudos to the NVD3 community currently supporting this awesome D3 framework!
This demo is graphing 12 months of sales data over 8 years for 18 ficticious people. That's 1,728 tuples of [name, date, sales] presented in a way that's pleasing to the eye and very easy to visually understand.
References
- dex.js The main site