Reusable Scatter Plot with Model.js

This is a scatter plot of the Iris data set.

The purpose of this example is to show one approach for using Model.js to make reusable visualization modules. This also introduces a way to isolate reusable reactive flows that are reusable between 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.

This example is a lead-in to The Reactivis Concept, which takes generalization of D3 patterns further.

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>
    <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;
      }

circle:hover {
        stroke-width: 2px;
        stroke: black;
      }

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

function ScatterPlot(container){

var model = Model();

var svg = container.append("svg");
        var g = svg.append("g");

var xAxisG = g.append("g")
          .attr("class", "x axis");
        var xAxisLabel = xAxisG.append("text")
          .style("text-anchor", "middle")
          .attr("class", "label");

var yAxisG = g.append("g")
          .attr("class", "y axis");
        var yAxisLabel = yAxisG.append("text")
          .style("text-anchor", "middle")
          .attr("class", "label");

var xAxis = d3.svg.axis()
          .orient("bottom")
          .tickFormat(d3.format("s"))
          .outerTickSize(0);

var yAxis = d3.svg.axis()
          .orient("left")
          .tickFormat(d3.format("s"))
          .outerTickSize(0);

// This encapsulates the D3 margin convention from https://bl.ocks.org/mbostock/3019563
        model.when(["outerWidth", "outerHeight", "margin"],
            function(outerWidth ,  outerHeight ,  margin){
          model.set({
            innerWidth:  outerWidth  - margin.left - margin.right,
            innerHeight: outerHeight - margin.top  - margin.bottom
          });
        });

model.when(["outerWidth" ], function (outerWidth ){ svg.attr("width" , outerWidth ); });
        model.when(["outerHeight"], function (outerHeight){ svg.attr("height", outerHeight); });

model.when("margin", function (margin){
          g.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
        });

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

model.when(["innerWidth", "xAxisLabelOffset", "xAxisLabelText"],
            function(innerWidth,   xAxisLabelOffset,   xAxisLabelText){
          xAxisLabel
            .attr("x", innerWidth / 2)
            .attr("y", xAxisLabelOffset)
            .text(xAxisLabelText);
        });

model.when(["innerHeight", "yAxisLabelOffset", "yAxisLabelText"],
            function(innerHeight,   yAxisLabelOffset,   yAxisLabelText){
          yAxisLabel
            .attr("transform", "translate(-" + yAxisLabelOffset + "," + (innerHeight / 2) + ") rotate(-90)")
            .text(yAxisLabelText);
        });

(function (){
          var xScale = d3.scale.linear();

model.when(["data", "xAccessor"], function(data, xAccessor){
            model.xScaleDomain = d3.extent(data, xAccessor);
          });

model.when(["xScaleDomain", "innerWidth"], function (xScaleDomain, innerWidth){
            model.xScale = xScale.domain(xScaleDomain).range([0, innerWidth]);
          });
        }());

(function (){
          var yScale = d3.scale.linear();

model.when(["data", "yAccessor"], function(data, yAccessor){
            model.yScaleDomain = d3.extent(data, yAccessor);
          });

model.when(["yScaleDomain", "innerHeight"], function (yScaleDomain, innerHeight){
            model.yScale = yScale.domain(yScaleDomain).range([innerHeight, 0]);
          });
        }());

(function (){
          var rScale = d3.scale.linear();

model.when(["data", "rColumn"], function(data, rColumn){
            model.rScaleDomain = d3.extent(data, function (d){ return d[rColumn]; });
          });

model.when(["rScaleDomain", "rMin", "rMax"], function (rScaleDomain, rMin, rMax){
            model.rScale = rScale.domain(rScaleDomain).range([rMin, rMax]);
          });
        }());

model.when(["xScale", "xAxisNumTicks"], function (xScale, xAxisNumTicks){
          xAxisG.call(xAxis.scale(xScale).ticks(xAxisNumTicks));
        });

model.when(["yScale", "yAxisNumTicks"], function (yScale, yAxisNumTicks){
          yAxisG.call(yAxis.scale(yScale).ticks(yAxisNumTicks));
        });

model.when("xColumn", function (xColumn){
          model.xAccessor = function (d){ return d[xColumn]; };
        });

model.when(["xScale", "xAccessor"], function (xScale, xAccessor){
          model.x = compose(xScale, xAccessor);
        });

model.when("yColumn", function(yColumn){
          model.yAccessor = function (d){ return d[yColumn]; };
        });

model.when(["yScale", "yAccessor"], function (yScale, yAccessor){
          model.y = compose(yScale, yAccessor);
        });

model.when("rColumn", function(rColumn){
          model.rAccessor = function (d){ return d[rColumn]; };
        });

model.when(["rScale", "rAccessor"], function (rScale, rAccessor){
          model.r = compose(rScale, rAccessor);
        });

model.when("colorColumn", function(colorColumn){
          model.colorAccessor = function (d){ return d[colorColumn]; };
        });

model.when(["colorScale", "colorAccessor"], function (colorScale, colorAccessor){
          model.color = compose(colorScale, colorAccessor);
        });

model.when(["data", "x", "y", "r", "color"], function(data, x, y, r, color){
          var circles = g.selectAll("circle").data(data);
          circles.enter().append("circle");
          circles
            .attr("cx", x)
            .attr("cy", y)
            .attr("r", r)
            .attr("fill", color)
          circles.exit().remove();
        });

return model;
      }

// https://en.wikipedia.org/wiki/Function_composition
      function compose(g, f){
        return function(d){ return g(f(d)); };
      }

function main(){

var container = d3.select("#scatterPlotContainer");

var scatterPlot = ScatterPlot(container);

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",
          colorScale: d3.scale.category10(),
          xAxisLabelText: "Sepal Length (cm)",
          xAxisLabelOffset: 65,
          xAxisNumTicks: 10,
          yAxisLabelText: "Petal Length (cm)",
          yAxisLabelOffset: 35,
          yAxisNumTicks: 5
        });

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;
        });

function setSize(){
          var containerNode = container.node();
          scatterPlot.set({
            outerWidth:  containerNode.clientWidth,
            outerHeight: containerNode.clientHeight
          });
        }

d3.select(window).on("load"  , setSize);
        d3.select(window).on("resize", setSize);
      }

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

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