NVD3 Stacked Area Chart

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

dex.js The main site

<!DOCTYPE html>
<meta charset="utf-8">
<style>
    html, body, #Nvd3_StackedAreaChartParent {
        height: 100%;
        min-height: 100%;
        width: 100%;
        min-width: 100%;
    }
</style>

<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>

Updated missing url https://cdnjs.cloudflare.com/ajax/libs/Faker/3.1.0/faker.min.js to https://cdnjs.cloudflare.com/ajax/libs/faker/3.1.0/faker.min.js

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js

https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js

https://dexjs.net/js/dex-jquery.js

https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js

https://dexjs.net/js/dex-bootstrap.js

https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js

https://dexjs.net/js/dex-libs.js

https://dexjs.net/js/dex.js

https://cdnjs.cloudflare.com/ajax/libs/Faker/3.1.0/faker.min.js

https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.5/nv.d3.min.js