Old school D3 from simpler times

All examples By author By category About

curran

Full window Github gist

Multiple Axes Experiment

An experiment in nested D3 components.

forked from curran's block: Dynamic Baseball Scatter Plot

<!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>

https://d3js.org/d3.v4.js