'D3.js - Issue creating normalised stacked bar chart using example function on Obsevablehq

I'm having issues using the function provided at:

https://observablehq.com/@d3/stacked-normalized-horizontal-bar

The data i'm passing into the function is in the format that is used as an example

{Airline: 'Virgin America', Sentiment: 'positive', Count: 11},
{Airline: 'Virgin America', Sentiment: 'neutral', Count: 8},
{Airline: 'Virgin America', Sentiment: 'negative', Count: 3},
{Airline: 'Delta', Sentiment: 'neutral', Count: 10}.....

The data was not already in this format so I use the following code to process to this format, here is the original dataset

for (object of data){


    if (processed.length === 0){
        processed.push({Airline: object.airline, Sentiment: object.airline_sentiment, Count: 1})
    } else {
        objIndex = processed.findIndex((obj => obj.Airline === object.airline && obj.Sentiment === object.airline_sentiment))

        if (objIndex === -1){
            processed.push({Airline: object.airline, Sentiment: object.airline_sentiment, Count: 1})
        } else {
            processed[objIndex].Count += 1
            
        }
    }      
}

I'm also passing in a sentiment array as follows for zDomain values

sentiment = ['positive', 'neutral', 'negative']

Here is the parameters i'm using for my function, basically the same as the example

chart = StackedBarChart(processed, {
    x: d => d.Count,
    y: d => d.Airline,
    z: d => d.Sentiment,
    yDomain: d3.groupSort(
        processed,
        D) => D[0].Count / d3.sum(D, d => d.Count), 
        d => d.Airline 
    ),
    colors: d3.schemeSpectral[sentiment.length],
    zDomain: sentiment
)

In the StackedBarChar function i've noticed that the variable series is becoming undefined. Here is the code that defines this which I don't fully understand.

// Compute a nested array of series where each series is [[x1, x2], [x1, x2],
// [x1, x2], …] representing the x-extent of each stacked rect. In addition,
// each tuple has an i (index) property so that we can refer back to the
// original data point (data[i]). This code assumes that there is only one
// data point for a given unique y- and z-value.
const series = d3.stack()
    .keys(zDomain)
    .value(([, I], z) => X[I.get(z)])
    .order(order)
    .offset(offset)
(d3.rollup(I, ([i]) => i, i => Y[i], i => Z[i]))
    .map(s => s.map(d => Object.assign(d, {i: d.data[1].get(s.key)})));

Also the error message is

   Uncaught TypeError: svg.append(...).selectAll(...).data(...).join is not a 
   function
   at StackedBarChart (chart.js:132:8)

which I believe is caused by series being undefined.

What could be causing this? could the format of my data must be wrong somehow?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source