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')
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
