I've gotten lost amongst the d3.js weeds. I'm putting together a chart using nvd3.js (https://i.stack.imgur.com/ghueS.png).
But, while the colors appear correct in the legend, they do not in the chart. Additionally, there is significant white space in the hovering tooltip.
Looking into the object structure, I get what looks like one layer of keys too many, which makes me think the color issue and white space have to do with my actual keys being too far buried in the object (https://i.stack.imgur.com/k46CO.png).
I've looked into nest() and rollup(), but can't comprehend how they might help.
My javascript is as follows:
d3.csv("http://fwllc.wpstagecoach.com/wp-content/themes/frameworkcr/markers.csv",function(err,data){
var noDates = d3.keys(data[0]).filter(function(k){return k!="date"});
var dataToPlot = noDates.map(function(k){
return {"key":k,
"values":data.map(function(d){
return {
"x":d3.time.format("%m/%d/%y").parse(d.date),
"y":+d[k]
}
})}
})
console.log(d3.entries(dataToPlot));
nv.addGraph(function() {
var chart = nv.models.lineChart()
.margin({left: 100}) //Adjust chart margins to give the x-axis some breathing room.
.useInteractiveGuideline(true) //We want nice looking tooltips and a guideline!
// .transitionDuration(350) //how fast do you want the lines to transition?
.showLegend(true) //Show the legend, allowing users to turn on/off line series.
.showYAxis(true) //Show the y-axis
.showXAxis(true) //Show the x-axis
;
chart.xAxis //Chart x-axis settings
.tickFormat(function(d) { return d3.time.format("%m/%d/%y")(new Date(d)); });
chart.yAxis //Chart y-axis settings
.axisLabel('Total Return Percent')
.tickFormat(d3.format('%'));
d3.select('#chart').append("svg")
.datum(dataToPlot)
.call(chart);
nv.utils.windowResize(function() { chart.update() });
return chart;
});
})
And a portion of my .csv file:
date,ESG,global100,outperformance
12/22/08,0,0,0
3/23/09,-0.059812891,-0.094081914,0.034269023
6/22/09,0.137426291,0.033160892,0.104265399
9/21/09,0.418041893,0.249191458,0.168850435
12/21/09,0.460914373,0.294278644,0.166635729
3/22/10,0.504442354,0.306489826,0.197952528
