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}.....
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?
CodePudding user response: