I've been recently trying to recreate Mike Bostock's stacked chart, in the form he's presented in an Observable notebook here:

https://observablehq.com/@mbostock/most-popular-operating-systems-2003-2020

The code actually work in the notebook when I am plugging in the data, but seems to be crashing when I'm running it on the local environment. I'm no master of converting Observable notebook code to HTML/JS, but usually I can pull it off after some trial and error. This seems to be eluding me right now. When I'm running this code:

function _series(d3,data){return(
d3.stack()
    .keys(d3.group(data, d => d.Article).keys())
    .value(([, values], name) => values.get(name) || 0)
  (d3.rollup(data, ([d]) => d.stock, d =>  d.date, d => d.Article))
)}

the function returns an array of arrays with only single inputs, while in the original notebook it actually returns an array of arrays with values for individual dates for individual items.

So my problem is that I don't actually understand what's happening in this code. Why is there a separate d3.rollup in brackets after the value is called? Is value actually called with two sets of arguments in two different brackets? My JavaScript is pretty bad, and it's not something I'm very acquainted with.

May the fact that it works in a notebook but not outside of it be somehow related to what's happening in Observable behind the scenes? How can I alter the code so that it can run outside of Observable?

Many thanks,

Raf

CodePudding user response：

I've been loading the data which looked pretty much exactly as it did in the notebook, but 'date' was a string and not a datetime. I didn't notice that in the notebook there was a separate cell dealing with date.

Anyways, after I parsed the dates everything works fine.