N Little Circles

An update of Nohmapp's D3.v4 update of Enjalot's Three Little Circles Tributary.io

This gist covers:

adding new data
changing existing data
removing data
transitions
data stored in SVG groups
dynamic scales

Note that the circles alwasy exactly fit into the display area.

A demo can be found on bl.ocks.org.

It was built using blockbuilder.org.

<!DOCTYPE html>
<head>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body {
      margin:0;
      position:fixed;
      top:0;
      right:0;
      bottom:0;left:0;
    }

.buttons {
      position: fixed;
      top: 0px;
      left: 0px;
    }
    
    button {
      font-size: 24px;
      color: #888;
      border-radius: 5px;
      margin: 4px;
    }
  </style>
</head>

<body>
  <script>
    const WIDTH = 960
    const HEIGHT = 500;
    const MIN_RAD = 10;
    const MAX_RAD = 30;
    const STROKE = 4;
    
    const svg = d3.select("body").append("svg")
      .attr("width", WIDTH)
      .attr("height", HEIGHT);

let nextId = 0;
    const data = d3.range(5).map(createDatum);
    
    function addCircle() {
      data.push(createDatum());
      render();
    }

function removeCircle() {
      if (data.length > 0) {
        const idx = Math.floor(Math.random() * data.length);
        data.splice(idx, 1);
        render();
      }
    }

// exiting circles
      
      exits.select('circle')
        .transition(t)
        .attr('r', 0);
      
      // entering text
      
      groupEnters.append("text")
        .style('font-size', '0px')
        .attr('text-anchor', 'middle');
      
      // entering and updating text
      
      groupEnters.merge(updates)
        .select('text')
        .transition(t)
        .attr('dy', '0.33em')
        .style('font-size', '20px')
        .text(d => d.id);
      
      // exiting text
      
      exits.select('text')
        .transition(t)
        .style('font-size', '0px');

exits
        .transition(t)
        .remove();
    }
  </script>
  <div class="buttons">
	  <button onclick="addCircle()">Add Circle</button>
	  <button onclick="changeCircle()">Change Circle</button>
	  <button onclick="removeCircle()">Remove Circle</button>
  </div>
</body>

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