D3 getting data from multiple column CSV - csv

Question

I'm following this example for a multi-line graph
I want to plot each forecast in my CSV using values for years 2010, 2011, 2012.
forecast.csv
forecast,2010,2011,2012
Outlook,87,88,88
Reform,50,20,88
Renewal,43,21,88
If my data was simple like the example link, the code to build the chart would look like this:
var priceline = d3.svg.line()
.x(function(d) { return x(d.year); })
.y(function(d) { return y(d.value); });
var dataNest = d3.nest()
.key(function(d) {return d.forecast;})
.entries(data);
dataNest.forEach(function(d) {
svg.append("path")
.attr("class", "line")
.attr("d", priceline(d.values));
console.log(dataNest)
});
However my data is coming from a multi column CSV.
I'm trying to nest the forecasts, so each forecast would have an array of year and value pairs. i.e
[0] Object
[key] Outlook
[values]
[0] year: 2010
value: 28
[1] year: 2011
value: 88
but dataNest currently looks like this
[0] Object
[key] Outlook
[values]
[0] 2010: 87
2011: 88
2012: 88
There are many other years in the real data so transposing is not an option. How can I draw a line from this multi column CSV data?

Answer 1

You can change your data format or modify your d3.nest function. However, I reckon the easiest solution is using plain JavaScript to modify your array:
dataNest.forEach(function(d) {
d.values.forEach(function(e) {
var myArr = [];
for (var key in e) {
if (e[key] != d.key) {
myArr.push({
"year": key,
"value": e[key]
});
}
}
d.values = myArr;
})
})
Here is a demo, using the data in your question:
var data = d3.csv.parse(d3.select("#csv").text());
var dataNest = d3.nest()
.key(function(d) {
return d.forecast;
})
.entries(data);
dataNest.forEach(function(d) {
d.values.forEach(function(e) {
var myArr = [];
for (var key in e) {
if (e[key] != d.key) {
myArr.push({
"year": key,
"value": e[key]
});
}
}
d.values = myArr;
})
})
console.log(dataNest)
pre {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<pre id="csv">forecast,2010,2011,2012
Outlook,87,88,88
Reform,50,20,88
Renewal,43,21,88</pre>