Old school D3 from simpler times

All examples By author By category About

anqi-lu

Full window Github gist

Marks as Links - Containment

Dynamic Illustration of Marks as Links - Containment from Chapter 5 of Visualization Analysis and Design by Tamara Munzner.

Built with blockbuilder.org

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://cdnjs.com/libraries/svg.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    var svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 500)
    
    var squaresLayer = svg.append("g");
    var circlesLayer = svg.append("g");

var jsonCircles = [
       { "x": 100, "y": 100, "radius": 20},
       { "x": 200, "y": 100, "radius": 20},
       { "x": 300, "y": 100, "radius": 20},
       { "x": 400, "y": 100, "radius": 20},
    	 { "x": 100, "y": 200, "radius": 20},
       { "x": 200, "y": 200, "radius": 20},
       { "x": 300, "y": 200, "radius": 20},
       { "x": 400, "y": 200, "radius": 20},
    ];
    
    var jsonSquares = [
       { "x": 50, "y": 50, "side": 100},
       { "x": 150, "y": 50, "side": 100},
       { "x": 50, "y": 150, "side": 100}
    ];
    
    var jsonSquares2 = [
       { "x": 50, "y": 50, "side": 100},
       { "x": 150, "y": 50, "side": 100},
       { "x": 50, "y": 150, "side": 100},
       { "x": 250, "y": 50, "side": 100}
    ];
    
    var jsonSquares3 = [
       { "x": 50, "y": 50, "side": 100},
       { "x": 150, "y": 50, "side": 100},
       { "x": 50, "y": 150, "side": 100},
       { "x": 250, "y": 50, "side": 100},
       { "x": 350, "y": 50, "side": 100},
    ];
    
    
   function render(jsonSquares, jsonCircles) {
      var squares = squaresLayer
        .selectAll("rect")
        .data(jsonSquares);
      squares.exit().remove();
      squares.enter().append("rect")
        .merge(squares)
          .attr("x", d => d.x)
          .attr("y", d => d.y)
          .attr("width", d => d.side)
          .attr("height", d => d.side)
          .style("fill", "rgba(232, 232, 232, 0.8)");
      
      var circles = circlesLayer
        .selectAll("circle")
        .data(jsonCircles);
     
      circles.exit().remove();
      circles.enter().append("circle")
        .merge(circles)
          .attr("cx", d => d.x)
          .attr("cy", d => d.y)
          .attr("r", d => d.radius)
          .style("fill", "rgb(244, 95, 66)");
    }
    
    render(jsonSquares, jsonCircles);
    setInterval(function(){render(jsonSquares, jsonCircles);}, 1234);
    setInterval(function(){render(jsonSquares2, jsonCircles);}, 1345);
    setInterval(function(){render(jsonSquares3, jsonCircles);}, 1456);
    
    
  </script>
</body>

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

https://cdnjs.com/libraries/svg.js