Playing with D3

<!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; }
  </style>
</head>

<body>
  <div class="box1">Box 1</div>
  <div class="box2">Box 2</div>
  <div class="box3">Box 3</div>
  <script>
//   	d3.select('.box1').style('color', 'red');
    
//     d3.select('.box1').attr('id', 'fooBox1');
    
//     d3.selectAll('div').style('color', 'red');
    
//     d3.select('.box1').text('The First Box!');
    
//     d3.select('.box1').html('<h2>The First Box!</h2>');
    
//     d3.select('.box1').append('h2').text('title');
    
// 		d3.select('.box1').select('h2').remove();
    
// 		d3.select('.box1 h2').remove();
    
//     var data = [1, 2, 3, 4];
    
//     data.forEach(function(d){
//       d3.select('.first').append('p').text('paragraph ' + d);
// 		});
    
//     var data = [1, 2, 3, 4];
    
//     d3.select('.box1').selectAll('p')
//       .data(data)
//       .enter()
//       .append('p')
//       .text('paragraph ' + d);
  </script>
</body>

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