Enter, Exit, Update

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    .country circle{
      fill-opacity:.1;
      stroke:black;
      stroke-width:1px;
		}
    .highlight circle{
      stroke:red;
      stroke-width:2px;
    }
    .country text{
    	font-size:10px;
    }

.axis .tick line{
      stroke:rgb(150,150,150);
    }

.axis .tick line{
      stroke-width:.5px;
    }
    
    .canvas{
      width:100%;
      min-height:600px;
		}
  </style>
</head>

<body>
  <div class="container">
    <div class="btn-group">
        <a href="#" class="btn btn-primary" id="array-1">Array 1</a>
        <a href="#" class="btn btn-primary" id="array-2">Array 2</a>
        <a href="#" class="btn btn-primary" id="array-3">Array 3</a>
    </div>
    <section class="canvas" id="canvas">
    </section>
</div>
  
  <script>
		var m = {t:50,r:50,b:50,l:50};
		var outerWidth = document.getElementById('canvas').clientWidth,
    		outerHeight = document.getElementById('canvas').clientHeight;
    var w = outerWidth - m.l - m.r,
        h = outerHeight - m.t - m.b;
    
    var plot = d3.select('.canvas')
        .append('svg')
        .attr('width',outerWidth)
        .attr('height',outerHeight)
        .append('g')
        .attr('transform','translate(' + m.l + ',' + m.t + ')');
    
    var arr1 = [
        {id:"red",value:23},
        {id:"blue",value:50}
    		];

var arr2 = [
        {id:"purple",value:50},
        {id:"red",value:23},
        {id:"blue",value:50}
    		];

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