d3.js csv to nvd3 (stacked area chart) format

Question

d3.js csv to nvd3 (stacked area chart) format

1.7k views Asked by snowman55 At 23 November 2024 at 11:58

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.

Original Q&A

There are 1 answers

**snowman55** · Answer 1 · 2013-09-12 18:23:16

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
});

TechQA.

d3.js csv to nvd3 (stacked area chart) format

There are 1 answers

Related Questions in D3.JS

Related Questions in STACKED-AREA-CHART

Popular Questions

Popular Tags

Trending Questions