Not a D3 stacked area chart with data from ajax and with Legends / Brett Cooper

In New Zealand being kid of human. We might make mistakes but we will make other things too. - Michael Joseph Savage

Published unlisted

Edited

Oct 11, 2021

# Not a D3 stacked area chart with data from ajax and with Legends

https://talk.observablehq.com/t/d3-stacked-area-chart-with-data-from-ajax-and-with-legends/5665

https://www.d3-graph-gallery.com/graph/stackedarea_template.html

RAWdata = [{ "Month": "Jan 2021", "Category": "A", "Value": "37" },

{ "Month": "Feb 2021", "Category": "A", "Value": "73" },

{ "Month": "Mar 2021", "Category": "A", "Value": "110" },

{ "Month": "Apr 2021", "Category": "A", "Value": "147" },

{ "Month": "May 2021", "Category": "A", "Value": "183" },

{ "Month": "Jun 2021", "Category": "A", "Value": "218" },

{ "Month": "Jul 2021", "Category": "A", "Value": "253" },

{ "Month": "Aug 2021", "Category": "A", "Value": "287" },

{ "Month": "Sep 2021", "Category": "A", "Value": "317" },

{ "Month": "Oct 2021", "Category": "A", "Value": "342" },

{ "Month": "Nov 2021", "Category": "A", "Value": "384" },

{ "Month": "Dec 2021", "Category": "A", "Value": "420" },

{ "Month": "Jan 2021", "Category": "B", "Value": "96" },

{ "Month": "Feb 2021", "Category": "B", "Value": "192" },

{ "Month": "Mar 2021", "Category": "B", "Value": "288" },

{ "Month": "Apr 2021", "Category": "B", "Value": "387" },

{ "Month": "May 2021", "Category": "B", "Value": "493" },

{ "Month": "Jun 2021", "Category": "B", "Value": "657" },

{ "Month": "Jul 2021", "Category": "B", "Value": "874" },

{ "Month": "Aug 2021", "Category": "B", "Value": "1107" },

{ "Month": "Sep 2021", "Category": "B", "Value": "1363" },

{ "Month": "Oct 2021", "Category": "B", "Value": "1524" },

{ "Month": "Nov 2021", "Category": "B", "Value": "1749" },

{ "Month": "Dec 2021", "Category": "B", "Value": "1998" } ]

data = RAWdata.map( d=>{ return {Month:parseData(d.Month),Category:d.Category,Value:+d.Value} })

parseData = d3.utcParse('%b %Y')

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.

Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.

Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.