I'm new to JS and D3 and having trouble loading and organizing csv data the way that I need, using d3.dsv.
The dummy data is in the format:
| date | Company A Sales | Company A Hires | Company B Sales | Company B Hires |
|---|---|---|---|---|
| 1/1/1900 | 100 | 4 | 210 | 7 |
| 1/2/1900 | 80 | 2 | 400 | 16 |
| ... | ... | ... | ... | ... |
And I would like to create an Object that combines the date, sales, and hires columns. Eventually I'll need to access the date and sales/hire data points to create x and y scales in d3.
{
id: "Company A",
values:
[
{date: 1/1/1900,sales: 100,hires: 4}
{date: 1/2/1900,sales: 80,hires: 2}
...
]
}
So far I've tried one nested function, but can't wrap my head around how to do it for my problem.
const dataset = d3.dsv(",", "data.csv");
dataset.then(function(data) {
var slices = data.columns.slice(1).map(function(id) {
return {
id: id,
values: data.map(function(d){
return {
date: d.date,
value: +d[id]
};
})
};
});
But this only gives a list of Objects that have an ID, and two values (date and value). As per the above, I'd like Objects to have an ID and three values (date, sales, and hires).
I've had to iterate over the slice object again to combine columns based on substrings and modulo and some other crazy things...and I have a sense there's an easier way to do this.
Thanks for any help!