Dynamic Baseball Scatter Plot

A dynamic scatter plot of Baseball data that uses ReactiveModel.

Forked from Responsive Axes with ReactiveModel.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Scatter Plot with ReactiveModel</title>
    <script src="//d3js.org/d3.v4.0.0-alpha.49.min.js"></script>
    <script src="//datavis-tech.github.io/reactive-model/reactive-model-v0.11.0.min.js"></script>
    <style>

/* Make the chart container fill the page using CSS. */
      #chart-container {
        position: fixed;
        left: 0px;
        right: 0px;
        top: 0px;
        bottom: 0px;
      }
    
      .axis text {
        font: 10pt sans-serif;
      }

.axis-label {
        font: 14pt sans-serif;
      }

.axis path {
        display: none;
      }
      .tick line {
        fill: none;
        stroke: #DDD;
        stroke-width: 1px;
        shape-rendering: crispEdges;
      }
      
    </style>
  </head>
  <body>

<div id="chart-container"></div>

("innerHeight", function (height, marginTop, marginBottom){
            return height - marginTop - marginBottom;
          }, "height, marginTop, marginBottom")

("g", function (svg){
            return svg.append("g");
          }, "svg")

("g-transform", function (g, marginLeft, marginTop){
            g.attr("transform", "translate(" + marginLeft + "," + marginTop + ")");
          }, "g, marginLeft, marginTop");
        
      }

// Adds the "data" property.
      function Data(my){
        my("data");
      }

// Adds a column and accessor for the given column name.
      function Column(my, name){
        my(name + "Column")
          (name + "Accessor", function (column){
            return function (d){ return d[column]; };
          }, name + "Column");
      }
      
      // Sets up a linear scale with the given name.
      function ScaleLinear(my, name){
        var scale = d3.scaleLinear();
        
        my(name + "ScaleDomain", function (data, accessor){
          return d3.extent(data, accessor);
        }, "data, " + name + "Accessor");
        
        if(name === "x"){
          my("xScaleRange", function (innerWidth){
            return [0, innerWidth];
          }, "innerWidth");
        } else if(name === "y"){
          my("yScaleRange", function (innerHeight){
            return [innerHeight, 0];
          }, "innerHeight");
        }
          
        my(name + "Scale", function(domain, range){
            return scale
              .domain(domain)
              .range(range)
              .nice();
          }, name + "ScaleDomain, " + name + "ScaleRange")

(name + "Scaled", function(scale, accessor){
            return function (d){
              return scale(accessor(d));
            };
          }, name + "Scale, " + name + "Accessor");
      }

// Sets up an axis with the given name ("x" or "y")
      function Axis(my, name){

var axisLengthProperty;
        var tickSizeProperty;
        var axis;

// Approximate number of pixels between ticks.
        my(name + "AxisTickSpacing", 70)
        
          (name + "AxisG", function (g){
            return g.append("g").attr("class", name + " axis");
          }, "g");
        
        if(name === "x"){
          axisLengthProperty = "innerWidth";
          tickSizeProperty = "innerHeight";
          axis = d3.axisBottom();

my(function(xAxisG, innerHeight){
            xAxisG.attr("transform", "translate(0," + innerHeight + ")");
          }, "xAxisG, innerHeight");

} else if(name === "y"){
          axisLengthProperty = "innerHeight";
          tickSizeProperty = "innerWidth";
          axis = d3.axisLeft();
        }

my(name + "AxisTicks", function (xAxisTickSpacing, axisLength){
            return axisLength / xAxisTickSpacing;
          }, name + "AxisTickSpacing," + axisLengthProperty)

(name + "Axis", function(ticks, scale, tickSize){
            return axis
              .scale(scale)
              .tickSize(-tickSize)
              .ticks(ticks);
          }, name + "AxisTicks, " + name + "Scale," + tickSizeProperty)

(function(axisG, axis){
            axis(axisG.transition().duration(transitionDuration));
          }, name + "AxisG, " + name + "Axis");
        
      }

function AxisLabel(my, name){
        my(name + "AxisLabelOffset", 15)

(name + "AxisLabel", function (svg){
            return svg.append("text")
              .attr("class", name + " axis-label")
              .style("text-anchor", "middle");
          }, "svg")

my(function (axisLabel, column){
            axisLabel.text(column);
          }, name + "AxisLabel," + name + "Column");

if(name === "x"){

my(function (axisLabel, marginLeft, innerWidth){
              axisLabel.attr("x", marginLeft + innerWidth / 2);
            }, "xAxisLabel, marginLeft, innerWidth")

(function (axisLabel, height, offset){
              axisLabel.attr("y", height - offset);
            }, "xAxisLabel, height, xAxisLabelOffset");

} else if(name === "y"){
          my(function (label, offset, innerHeight, marginTop){
            label.attr("transform", [
              "translate(",
                offset,
              ",",
                marginTop + innerHeight / 2,
              ") rotate(-90)"
            ].join(""));
          }, "yAxisLabel, yAxisLabelOffset, innerHeight, marginTop");
        }
      }

function ScatterPlotMarks(my){

my("circleG", function (g){
            return g.append("g");
          }, "g")

// Tweak properties
        scatterPlot
          .marginTop(10)
          .marginBottom(40)
          .marginLeft(70)
          .marginRight(40)
          .xAxisLabelOffset(10)
          .yAxisLabelOffset(20)
          .yAxisTickSpacing(20);

// Configure the visual encoding.
        scatterPlot
          .xColumn("atbat")
          .yColumn("hits");

var interestingColumns = ["atbat", "hits", "homeruns", "rbi", "runs", "walks", "years"];

// Load the data.
        d3.csv("Baseball.csv", function (d){
          interestingColumns.forEach(function (column){
            d[column] = +d[column];
          });
          return d;
        }, function(err, data){
          scatterPlot.data(data);
        });

function randomColumn(){
          var i = Math.floor(Math.random() * interestingColumns.length);
          return interestingColumns[i];
        }

// Update the X and Y columns randomly.
        setInterval(function (){
          scatterPlot.xColumn(randomColumn());
        }, 2345);
        setInterval(function (){
          scatterPlot.yColumn(randomColumn());
        }, 3456);

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

https://d3js.org/d3.v4.0.0-alpha.49.min.js

https://datavis-tech.github.io/reactive-model/reactive-model-v0.11.0.min.js