Multiple Axes Experiment by curran

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Multiple Axes Experiment</title>
    <script src="//d3js.org/d3.v4.js"></script>
  </head>
  <body>
    <svg width="960" height="500"></svg>
    <script>

      var svg = d3.select("svg"),
          margin = {top: 20, right: 20, bottom: 20, left: 55},
          width = svg.attr("width") - margin.left - margin.right,
      		height = svg.attr("height") - margin.top - margin.bottom,
          axis = d3.local();
      
      function render(data, columns){
        
        var g = svg.selectAll("g").data([null]);
        g = g.merge(g.enter().append("g"));
        g.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
        
        var axesScale = d3.scalePoint()
        	.domain(columns)
        	.range([0, width]);
        
        var axes = g.selectAll(".axis-container")
        	.data(columns, function (column){ return column; });
        
        axes.exit().remove();
        
        axes = axes
          .enter().append("g")
          	.attr("class", "axis-container")
            .each(function(column) {
          		axis.set(this, d3.axisLeft().scale(d3.scaleLinear()
              	.domain(d3.extent(data, function (d){ return d[column]; }))
              	.range([height, 0])))
            })
        	.merge(axes);
        
        axes
          .attr("transform", function (column){
            return "translate(" + axesScale(column) + ", 0)";
          })
        	.each(function (){
          	d3.select(this).call(axis.get(this));
          });
        
      }
      
      function main(){
        var columns = ["atbat", "hits", "homeruns", "rbi", "runs", "walks", "years"];
        d3.csv("Baseball.csv", function (d){
          columns.forEach(function (column){ d[column] = +d[column]; });
          return d;
        }, function(err, data){
          
          render(data, columns);
          
          // Render with random columns to test general update pattern.
          setInterval(function (){
            render(data, columns.slice(0, Math.random() * columns.length));
          }, 1000)
        });
      }

      main();
      
    </script>
  </body>
</html>