D3 stacked area chart with data from ajax and with Legends

Community Help
1

I’m trying to build D3 stacked area chart with x-axis (Fixed Jan to Dec) as Month names but there are some errors as MNaN and also on D3 official site there is data loading for chart from a file (.csv. .json, .tsv, etc) but I want to load data from array.
I am referring this code for generating Stacked area chart : Stacked area chart template for d3.js
Can anyone help me with the code, below is the data required

D

2

Have you a link to your notebook?

This might help, it uses arrays.

3

Hello @hellonearthis, I don’t have any link to notebook but I have structure of my array

var data = [{ "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" }    ]
4

This should help: Not a D3 stacked area chart with data from ajax and with Legends / Brett Cooper / Observable

process the raw data you provided, converting the data and making the Value a number type.
data = RAWdata.map( d=>{ return {Month:parseData(d.Month),Category:d.Category,Value:+d.Value} })

Convert the date string into data object
parseData = d3.utcParse('%b %Y')