Loading csv data with d3.csv in nvd3 multiBar Chart example (JSON format)

Question

I am trying to reproduce a nvd3.js multiBar Chart using my own .csv data. Similar questions have been asked in the past, but have been unable to help me in solving it for this particular issue. In different question I have seen the use of d3.entries d3.nest and variable creation to reproduce the correct input format, but have a hard time grasping how it works.

Similar questions: d3.js csv to nvd3 (stacked area chart) format ScatterChart in NVD3 – Reading the data from csv file d3 csv data loading

These questions try to reproduce other chart types which expect different JSON data format. I have issues with creating the "x" and "y" values in the nest. In the chart example they use a function to generate data and in the function they create the x (number of bars) and y (actual input) values.

I wish to reproduce this graph: http://nvd3.org/examples/multiBar.html

With this csv data:

date,Equipment:Electricity:LGF,Equipment:Electricity:GF,Equipment:Electricity:1st,Equipment:Electricity:2nd
jan,6726.864146,5648.080727,2598.709507,2042.260163
feb,6405.091236,5377.910358,2474.402801,1944.570663
mar,6727.448125,5648.571054,2598.935109,2042.437457
apr,6433.12227,5401.446071,2485.231698,1953.080819
may,6993.742947,5872.160325,2701.809623,2123.28394
jun,6433.12227,5401.446071,2485.231698,1953.080819
jul,6727.448125,5648.571054,2598.935109,2042.437457
aug,6993.742947,5872.160325,2701.809623,2123.28394
sep,6166.827448,5177.8568,2382.357183,1872.234336
oct,6993.742947,5872.160325,2701.809623,2123.28394
nov,6699.417092,5625.035342,2588.106212,2033.927301
dec,6167.411428,5178.347127,2382.582785,1872.411631

It expects this type of data, JSON format (actual version has more data):

[
  {
    "key": "Stream #0",
    "values": [
      {
        "x": 0,
        "y": 0.4428573444644372
      },
      {
        "x": 1,
        "y": 1.1148710782512004
      },
      {
        "x": 2,
        "y": 1.4665579659689634
      }
    ]
  },
  {
    "key": "Stream #1",
    "values": [
      {
        "x": 0,
        "y": 0.14053699714131654
      },
      {
        "x": 1,
        "y": 0.1493057878687978
      },
      {
        "x": 2,
        "y": 0.12193947387887433
      }
    ]
  }
]

I have been trying with the answers from the similar questions and one of the results was this: http://i.imgur.com/lNcXLSp.png, where on the left is my try from one of the examples and on the right I loaded the JSON file.

CODE:

Any hint or explanation is appreciated!

timelyportfolio timelyportfolio · Accepted Answer · 2014-07-28T16:28:08

Not exactly clear on the final expected output, but this should get you started or completely answer your question. I stuck with basic Javascript for the data transform to hopefully make it more understandable.

To see a working version, see http://bl.ocks.org/timelyportfolio/c7c9dbc75975df7322bd.

    <script src = "http://d3js.org/d3.v3.js"></script>
    <script src = "http://cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.js"></script>

    <link rel = "stylesheet" href = "http://cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.css">


    <div id = "chart1">
      <svg></svg>
    </div>

    <script>
        d3.csv("data.csv",function(err,data){

          //get each key of the data that is not date
          //these will be our key in the key/value pair
          //the values x and y will be month and the value
          var dataToPlot = Object.keys(data[0]).filter(function(k){return k!="date"})
            .map(function(k){
              return {"key":k,"values":data.map(function(d){
               return {
                 //let's make this a real date
                 "x":d3.time.format("%Y-%b-%d").parse("2014-" + d.date + "-01"),
                 "y":+d[k]
               }
              })}
            })

          nv.addGraph(function() {
            var chart = nv.models.multiBarChart()
              .transitionDuration(350)
              .reduceXTicks(true)   //If 'false', every single x-axis tick label will be rendered.
              .rotateLabels(0)      //Angle to rotate x-axis labels.
              .showControls(true)   //Allow user to switch between 'Grouped' and 'Stacked' mode.
              .groupSpacing(0.1)    //Distance between each group of bars.
            ;

            chart.xAxis
                .tickFormat(d3.time.format('%b'));

            chart.yAxis
                .tickFormat(d3.format(',.1f'));

            d3.select('#chart1 svg')
                .datum(dataToPlot)
                .call(chart);

            nv.utils.windowResize(chart.update);

            return chart;
          });

        })



    </script>

    </html>

Loading csv data with d3.csv in nvd3 multiBar Chart example (JSON format)

1 Answers