Old school D3 from simpler times

All examples By author By category About

zamfi

Full window Github gist

Weird clock thing!

<html>
  <head>
    <title>D3 Test</title>
    <script src="https://d3js.org/d3.v2.min.js"></script>
  </head>
  <body>
    <script type="text/javascript">
      var w = 500, h = 500;
      var svg = d3.select("body")
                  .append("svg")
                  .attr("width", w)
                  .attr("height", h);
      
      // var scale = d3.scale.linear().domain([-10,10]).range([-200,200]);
      var scale = d3.scale.linear();
      var scaleT = 10 ;
      
      //  4
      // 2 0
      //  5
      // 3 1
      //  6
      function makeSegments(x, y) {
        return [
          {x: 2-x, y: -3-y, v: true},
          {x: 2-x, y: 0-y, v: true},
          {x: -1-x, y: -3-y, v: true},
          {x: -1-x, y: 0-y, v: true},
          {x: -1-x, y: -3-y, v: false},
          {x: -1-x, y: 0-y, v: false},
          {x: -1-x, y: 3-y, v: false},
        ].reverse();
      }
      var segmentLocations =
        makeSegments(12, 0)
        .concat(makeSegments(7, 0))
        .concat(makeSegments(-6, 0))
        .concat(makeSegments(-11, 0)).reverse();
      
      // var segmentStates = segmentLocations.map(function() {return 0;});

var digits = [
        [true, true, true, true, true, false, true],
        [true, true, false, false, false, false, false],
        [true, false, false, true, true, true, true],
        [true, true, false, false, true, true, true],
        [true, true, true, false, false, true, false],
        [false, true, true, false, true, true, true],
        [false, true, true, true, true, true, true],
        [true, true, false, false, true, false, false],
        [true, true, true, true, true, true, true],
        [true, true, true, false, true, true, true],
        [false, false, false, false, false, false, false]
      ]
      function setSegments(segments, pos, digit) {
        for (var i = 0; i < 7; ++i) {
          segments[pos+i] = digits[digit][i] ? 0 : 90;
        }
      }
       
      var line = d3.svg.line()
                       .x(function(d) {return scale(d[0]);})
                       .y(function(d) {return scale(d[1]);})
                       .interpolate('linear');
      
      function generateTarget() {
        var newSegments = [];
        var d = new Date();
        var h = (d.getHours() % 12) || 12;
        var m = d.getMinutes();
        var s = d.getSeconds();
        var pos = Math.floor(Math.random()*4);
        setSegments(newSegments, 21, Math.floor(h/10) || 10);
        setSegments(newSegments, 14, h%10);
        setSegments(newSegments, 7, Math.floor(m/10));
        setSegments(newSegments, 0, m%10);
        return newSegments;
      }
      
      function lastMismatch(a, b) {
        if (a.length != b.length) 
          return -1;
        
          for (var i = a.length-1; i >= 0; --i) {
            if (a[i] != b[i]) {
              return i;
            }
          }
          return -1;
      }
      
      function redraw(target) {
        var oldData = svg.selectAll(".segment").data();
        if (oldData.length == 0)
           oldData = segmentLocations.map(function() {return 0;});
        var segments = svg.selectAll(".segment");

var pathGroup = 
          segments.data(oldData).enter()
                  .append("g")
                  .attr("class", "segment")
                  .attr("transform", "translate("+w/2+","+h/2+") scale("+scaleT+")");
        pathGroup.append("path")
                 .attr("fill", "black")
                 .attr("d", function(d, i) { 
                   var l = segmentLocations[i];
                   return line(l.v ?
                     [[l.x, l.y],
                      [l.x+0.5, l.y+0.5],
                      [l.x+0.5, l.y+2.5],
                      [l.x, l.y+3],
                      [l.x-0.5, l.y+2.5],
                      [l.x-0.5, l.y+0.5]] :
                     [[l.x, l.y],
                      [l.x+0.5, l.y+0.5],
                      [l.x+2.5, l.y+0.5],
                      [l.x+3, l.y],
                      [l.x+2.5, l.y-0.5],
                      [l.x+0.5, l.y-0.5]]
                   ) + " Z" });
        pathGroup.append("line")
                 .attr("x1", 0).attr("y1", 0)
                 .attr("x2", function(d, i) { 
                   if (segmentLocations[i].v) {
                     return scale(segmentLocations[i].x)
                   } else {
                     return segmentLocations[i].x < 0 ? 
                       scale(segmentLocations[i].x+3) :
                       scale(segmentLocations[i].x)
                   }
                 })
                 .attr("y2", function(d, i) { 
                   return scale(segmentLocations[i].y)
                 })
                 .attr("stroke", "black")
                 .attr("stroke-width", "0.03");
        var stop = true;

var delay = 0;
        // for (var i = lastMismatch(current, target); i >= 0; i = lastMismatch(current, target)) {
        var i = lastMismatch(oldData, target);
        if (i >= 0) {
          var delta = target[i] - oldData[i];
          var nextIntermediary = oldData.map(function(x, idx) { 
            if (idx <= i) 
              return x + delta;
            else 
              return x;
            });
          segments.data(nextIntermediary).transition()
                  .attr("transform", function(d) { return "translate("+w/2+","+h/2+") scale("+scaleT+") rotate("+(d)+")"; })
                  .duration(500)
        }
      }
      redraw(generateTarget());

setInterval(function() {
        redraw(generateTarget());
      }, 700);
    </script>
  </body>
</html>

Modified http://d3js.org/d3.v2.min.js to a secure url

https://d3js.org/d3.v2.min.js