Old school D3 from simpler times

All examples By author By category About

timelyportfolio

Full window Github gist

attempt at http://stackoverflow.com/questions/24951042

<!DOCTYPE html>
<html meta-charset="utf-8">

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

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

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

<script>
  //$(document).ready(function(){
    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>