Home > front end >  D3.js - Issue creating normalised stacked bar chart using provided function
D3.js - Issue creating normalised stacked bar chart using provided function

Time:02-10

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:

  •  Tags:  
  • Related