I'm trying to convert my csv to the format needed by nvd3's stacked area chart: http://nvd3.org/ghpages/stackedArea.html
but got lost in the arrays conversion. Can someone help?
csv:
length,m1,m2,m3,m4
9,1,2,3,4
99,11,22,33,44
999,111,222,333,444
format needed by nvd3
var histcatexplong = [
{
"key" : "Consumer Discretionary" ,
"values" : [ [ 0000000000000 , 27.38478809681] , [ 0000000000000 , 27.371377218208] , [ 0000000000000 , 26.823411519395] } ,
{
"key" : "Consumer Staples" ,
"values" : [ [ 0000000000000 , 27.45458809681] , [ 0000000000000 , 27.444444444408] , [ 0000000000000 , 26.455555555395] } ,
so if the conversion is right, I should get:
var myall = [
{
"key" : "m3" ,
"values" : [ [ 9 , 3] , [ 99, 33] , [ 999, 333] } ,
{
"key" : "m1" ,
"values" : [ [ 9 , 1] , [ 99, 11] , [ 999, 111] } ,
My code for the conversion:
d3.csv("s1.csv", function (csv) {
var myall = [
{
"key" : "m3",
"values" : []
},
{
"key" : "m2",
"values" : []
}
];
v3 = csv.map(function(d) { return [ +d["length"], +d["m3"] ]; });
v2 = csv.map(function(d) { return [ +d["length"], +d["m2"] ]; });
d3.keys(csv).forEach(function(d) {
myall[0].values.push(v3);
myall[1].values.push(v2);
});
console.log(myall);
The problem is that myall didn't show up in the DOM (console output seems to be missing a top hierarchy:
[Object { key="m345", values=[249]}, Object { key="m2", values=[249]}]
For the nvd3 stacked area chart example, DOM copy/paste for the histcatexplong var:
*histcatexplong
[Object { key="Consumer Discretionary", values=[77]}, Object { key="Consumer Staples", values=[77]}, Object { key="Energy", values=[77]}, 7 more...]*
Thanks.
After some debugging, I fixed the issue. As a help to fellow learners, I post the code.
This is useful for people that need:
a. nvd3 stacked area chart(gives you the tooltips and other utilities for free i.e. no extra programming)
b. x-axis with values instead of dates
c. has csv data (flat hierarchy) in this format:
length,m1,m2
103.10,111,2222
137.91,0.36980639547531,99.6301936045247
113.30,0.176522506619594,99.8234774933804
159.59,0.244376214048499,99.7556237859515
code (modified from http://nvd3.org/ghpages/stackedArea.html):
<script>
<!DOCTYPE html>
<meta charset="utf-8">
<link href="../src/nv.d3.css" rel="stylesheet" type="text/css">
<style>
body {
overflow-y:scroll;
}
text {
font: 12px sans-serif;
}
#chart1, #chart2 {
height: 500px;
}
</style>
<body>
<div>
<svg id="chart1"></svg>
</div>
<script src="../lib/d3.v3.js"></script>
<script src="../nv.d3.js"></script>
<script src="../src/utils.js"></script>
<script src="../src/models/axis.js"></script>
<script src="../src/tooltip.js"></script>
<script src="../src/models/legend.js"></script>
<script src="../src/models/axis.js"></script>
<script src="../src/models/scatter.js"></script>
<script src="../src/models/stackedArea.js"></script>
<script src="../src/models/stackedAreaChart.js"></script>
<script>
var myall = [
{
"key" : "m1",
"values" : []
},
{
"key" : "m2",
"values" : []
}
];
d3.csv("s1.csv", function (error, csv) {
if (error) return console.log("there was an error loading the csv: " + error);
console.log("there are " + csv.length + " elements in my csv set");
csv.sort(function(a,b) {return a.length-b.length;});
var mmm = ["m1","m2"];
for (var i = 0; i < mmm.length; i++) {
myall[i].values = csv.map(function(d) { return [ +d["length"], +d[mmm[i]] ]; });
};
var colors = d3.scale.category20();
keyColor = function(d, i) {return colors(d.key)};
var chart;
nv.addGraph(function() {
chart = nv.models.stackedAreaChart()
.x(function(d) { return d[0] })
.y(function(d) { return d[1] })
.color(keyColor)
.clipEdge(true);
// chart.xAxis
// .tickFormat(function(d) { return d3.time.format('%x')(new Date(d)) });
chart.yAxis
.tickFormat(d3.format(',.2f'));
d3.select('#chart1')
.datum(myall)
.transition().duration(500).call(chart);
nv.utils.windowResize(chart.update);
chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); });
return chart;
});
// end read csv
});