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