Skip to content

Instantly share code, notes, and snippets.

@PatMartin
Last active August 7, 2017 06:18
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save PatMartin/a52e6fa2398a5c81861d4b57fb1a584e to your computer and use it in GitHub Desktop.
Save PatMartin/a52e6fa2398a5c81861d4b57fb1a584e to your computer and use it in GitHub Desktop.
NVD3 Stacked Area Chart
license: mit

NVD 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

<!DOCTYPE html>
<meta charset="utf-8">
<style>
html, body, #Nvd3_StackedAreaChartParent {
height: 100%;
min-height: 100%;
width: 100%;
min-width: 100%;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.theme.min.css">
<link rel="stylesheet" href="https://dexjs.net/js/dex-jquery.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css"/>
<link rel="stylesheet" href="https://dexjs.net/js/dex-bootstrap.css">
<link rel="stylesheet" href="https://dexjs.net/js/dex.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.5/nv.d3.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://dexjs.net/js/dex-jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://dexjs.net/js/dex-bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://dexjs.net/js/dex-libs.js"></script>
<script src="https://dexjs.net/js/dex.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Faker/3.1.0/faker.min.js"></script>
<script>d3 = dex.charts.d3.d3v3;</script>
</script><script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.5/nv.d3.min.js"></script>
<body>
<div id="Nvd3_StackedAreaChartParent"></div>
<script>
var csv = new dex.csv(['Name', 'Date', 'Sales']);
var months = [
"Jan", "Feb", "Mar", "Apr", "May", "Jun",
"Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
for (var nameIndex = 0; nameIndex < 10; nameIndex++) {
var name = faker.name.firstName();
months.forEach(function (month) {
csv.data.push([name, month, faker.random.number()])
});
}
var stackedAreaChart = new dex.charts.nvd3.StackedAreaChart({
'parent': '#Nvd3_StackedAreaChartParent',
'csv': csv
}
).render();
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment