Old school D3 from simpler times

All examples By author By category About

bquast

Full window Github gist

NVD3 multiBarChart with external JSON

<!DOCTYPE html>
<html lang="en">
<head>
  
  <meta charset="utf-8" />

<link href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.min.css" rel="stylesheet" />
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.min.js"></script>
  
</head>
<body>
        
  <div id="multibarchart"><svg style="width:500px;height:400px;"></svg></div>
  
  <script>
    d3.json('./data.json', function(error, data) {
     if (error) return console.error(error);
     console.log(data);  
      
    nv.addGraph(function() {
      var chart = nv.models.multiBarHorizontalChart();
        chart.margin({top: 30, right: 60, bottom: 20, left: 60});
      var datum = data;
        chart.yAxis
          .tickFormat(d3.format(',.2f'));
      chart.showLegend(true);
        
      d3.select('#multibarchart svg')
        .datum(datum)
        .transition().duration(500)
        .attr('width', 500)
        .attr('height', 400)
        .call(chart);
    });
  });
  </script>

</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js

https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.6/nv.d3.min.js