I am currently working on visualizing data from a large array and aiming to create a multi-line chart.
The data is in CSV format for easier handling with D3.js.
The structure of my data looks like this:
category, date, frequency <-- column headers
shopping, 23/7/90, 9
dating, 23/3/96, 3
To handle each category individually for the multi-line chart, I transformed the data into another array shown below:
Check out DataNest using console.log()
My current challenge is figuring out how to extract the information needed to draw the lines on my chart.
Here's the code snippet I'm using:
var dataNest = d3.nest()
.key(function(d) {return d.category;})
.entries(data_out);
dataNest.forEach(function(d,i) {
var line = d3.line()
.x(d3.values(dataNest).map(function(d) { return d.date; }).filter(function(key) { return key !== "date"; }))
.y(d3.values(dataNest).map(function(d) { return d.frequency; }).filter(function(key) { return key !== "frequency"; }))
;
chartGroup.append('path').attr('d',line(d));
});