D3 Examples - Biham–Middleton–Levine traffic model

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    .axis path {
      display: none;
    }
​
    .line {
      fill: none;
      stroke: steelblue;
      stroke-width: 1.5px;
    }
  </style>
</head>
​
<body>
  <script>
    /* things to do:
       - graph (SVG?) of %age of mobile cars over time
       - user-editable parameters
       - wrap (either just L/R, or U/D as well)
     */
    
    const EMPTY = 0, A = 1, B = 2;  // A = L -> R, B = U -> D
    const TIMEW = 400;
    
    // user-settable things
    var width = 500, height = 400,  // size of grid
        perc = 40,                                  // %age of cars
        scale = 1;                                  // scale factor (canvas is scale*w by scale*h)  
        
    var grid, imgGrid, canvasw = width*scale, canvash = height*scale,
        nCars, nMovable, historyMovable = [], lastNow, nSec;    
    
    // --- canvas one-time setup
    
    var canvas = d3.select("body").append("canvas")
      .attr("width", canvasw)
      .attr("height", canvash);
​
    var ctx = canvas.node().getContext("2d");
    
    var imgData = ctx.getImageData(0, 0, canvasw, canvash);
    var data = imgData.data;
    
    // --- svg one-time setup
        
    var svg = d3.select("body").append("svg")
        .attr("width", TIMEW)
      .attr("height", 300);
    
    var  margin = {top: 20, right: 20, bottom: 30, left: 50},
              gwidth = svg.attr("width") - margin.left - margin.right,
            gheight = svg.attr("height") - margin.top - margin.bottom,
            g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")"),
         x = d3.scaleLinear().range([0, gwidth]),
            y = d3.scaleLinear().range([gheight, 0]).domain([0,100]);   
     
    var xAxis = g.append("g")
       .attr("class", "axis")
       .attr("transform", "translate(0," + gheight + ")")
       .call(d3.axisBottom(x));
 
    var yAxis = g.append("g")
       .attr("class", "axis")
       .call(d3.axisLeft(y));
    yAxis.append("text")
       .attr("transform", "rotate(-90)")
       .attr("y", 6)
       .attr("dy", "-3.5em")
       .attr("fill", "#000")
       .text("%age movable cars");
    var speedText = yAxis.append("text")
         .attr("y", 6)
       .attr("x", 100)
       .attr("fill", "#000");
    
    var lineGen = d3.line()
        .curve(d3.curveBasis)
        .x(function(d, i) {
        return x(i); })
        .y(function(d, i) {
        return y(d); });
    
    var lineKeys = [ 'A', 'B', 'total'],
            line = g.selectAll('path')
        .data(lineKeys);
    
    line = line.enter().append("path")
       .attr("class", "line")
         .merge(line);
    console.log(line.data());
    
    line = g.selectAll('path');
    console.log(line.data())
 
    var updateHistory = function() {
      x.domain([0, d3.max([gwidth, historyMovable.total.length])]);
      xAxis.call(d3.axisBottom(x));
      console.log(line.data());
      line.attr("d", function(which) {
        return lineGen(historyMovable[which]);
                       });
    }
    
    var grid2img = function() {
      grid.forEach(function(v, i) {
        if (imgGrid[i] == v) { return; }
        
        var x = i%width, y = Math.floor(i/width),
            xx = x*scale, yy = y*scale, 
            r = v == EMPTY ? 255 : v == A ? 255 : 0,
            g = v == EMPTY ? 255 : 0,
            b = v == EMPTY ? 255 : v == B ? 255 : 0,
            dx, dy;
        for (dx = 0; dx < scale; dx++) {
          for (dy = 0; dy < scale; dy++) {
            var j = ((yy+dy) * canvasw + (xx+dx))*4;
            data[j+0] = r;
            data[j+1] = g;
            data[j+2] = b;
            data[j+3] = 255; // alpha
          }
        }
      });
      
      ctx.putImageData(imgData, 0, 0);
      imgGrid = grid.slice();
    }
    
    var resetSimulation = function() {
      nCars = 0;
      grid = d3.range(width * height).map(function() {
        if (Math.floor(Math.random() * 100) > perc) {
          return EMPTY;
        } 
        nCars += 1;
        return (Math.random() >= 0.5) ? A : B;
      });
      imgGrid = grid.slice();
      
      historyMovable = { A: [], B: [], total: [] };
      
      grid2img();
      updateHistory();
      
      lastNow = performance.now();
      nSec = 0;
      
      window.requestAnimationFrame(tick);
    }
    
    var tickOne = function(which) {
      var gridCopy = grid.slice();
      gridCopy.forEach(function(v, i) {
        if (v != which) { return; }
        
        var x = i%width, y = Math.floor(i/width), newx, newy, newi;
        if (v == A) { // A cars go left-to-right
          // TODO change following line if we wrap and flip
          newx = (x == width-1) ? 0 : x+1;
          newy = y;
        } else if (v == B) {
          newx = x;
          newy = (y == height-1) ? 0 : y+1;
        }
        newi = newy*width + newx;
        if (gridCopy[newi] == EMPTY) {
          // move the car
          grid[i] = EMPTY;
          grid[newi] = v;
          nMovable[which] += 1;
        }
      });
    }
    
    var tick = function() {
      nMovable = { A: 0, B: 0 };
      tickOne(A);
      tickOne(B);
      
      historyMovable.A.push(nMovable.A*100/nCars);
      historyMovable.B.push(nMovable.B*100/nCars);
      historyMovable.total.push((nMovable.A+nMovable.B)*100/nCars);
      
      grid2img();
      updateHistory();
      
      nSec += 1;
      var now = performance.now();
      if (now > (lastNow + 1000)) {
        speedText.text("" + nSec + " frames/sec");
        lastNow = now;
        nSec = 0;
      }
      
      if (nMovable.total > 0) {
        window.requestAnimationFrame(tick)  
      //} else {
      //  console.log('done')
      //  setTimeout(resetSimulation, 5000)
      }
      
    }
    
    resetSimulation()
    
    
  </script>
</body>
​
    