Generalizing D3 patterns ad infinitum

This is a scatter plot of the Iris data set.

This is an experiment to see how far one can go in generalizing D3 visualization patterns. The main file of interest here is reactivis.js. For example, a single code path creates all scales (x, y, size, color) and sets up their reactive dependencies. This is a proof-of-concept for a larger scale project that aims to provide a base layer for many different D3 visualizations.

Notice that if you open this in a new window, it responds when you resize the browser window. This is coded in such a way that the visualization size can be controlled via CSS.

The code for this is derived from example 106 of the screencast Introduction to D3.js.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>D3 Example</title>
    <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <script src="model-min.js"></script>
    <script src="reactivis.js"></script>
    <script src="scatterPlot.js"></script>
    <script src="barChart.js"></script>
    <link href='https://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
    <style>

body {
        background-color: lightgray;
      }
    
      .axis text {
        font-family: 'Poiret One', cursive;
        font-size: 16pt;
      }
      .axis .label {
        font-size: 20pt;
      }

.axis path, .axis line {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
      }

.visualization {
        position: fixed;
        top: 50px;
        bottom: 50px;
        left: 280px;
        right: 280px;
        background-color: white;
        border-radius: 25px;
        border-style: dotted;
        border-width: 2px;
      }

</style>
  </head>
  <body>
    <div class="visualization" id="scatterPlotContainer"></div>
    <script>

function setupScatterPlot(){
        var container = d3.select("#scatterPlotContainer");
        var scatterPlot = ScatterPlot();

scatterPlot.set({
          outerWidth: 100,
          outerHeight: 500,
          margin: { left: 80, top: 10, right: 15, bottom: 80 },
          rMin: 2, // "r" stands for radius
          rMax: 15,
          xColumn: "sepal_length",
          yColumn: "petal_length",
          rColumn: "sepal_width",
          colorColumn: "species",
          colorRange: d3.scale.category10().range(),
          xAxisLabelText: "Sepal Length (cm)",
          xAxisLabelOffset: 65,
          xAxisTicks: 10,
          xAxisTickFormat: d3.format("s"),    
          yAxisLabelText: "Petal Length (cm)",
          yAxisLabelOffset: 35,
          yAxisTicks: 5,
          yAxisTickFormat: d3.format("s"),    
          container: container
        });

function type(d){
          d.sepal_length = +d.sepal_length;
          d.sepal_width  = +d.sepal_width;
          d.petal_length = +d.petal_length;
          d.petal_width  = +d.petal_width;
          return d;
        }

d3.csv("iris.csv", type, function (data) {
          scatterPlot.data = data;
        });
      }

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

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