Data Binding learning

<!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; }
    .bar-container {
      display: flex;
      flex-direction: horizontal;
    }
    
    .bar {
      display: inline-block;
      width: 50px;
      margin: 0px 20px 0px 20px;
      height: 50px;
      background-color: red; 
    }
  </style>
</head>

<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    
    var testData = [ 25, 7, 5, 26, 11, 8, 25, 14, 23];
    
    //Playign with text and styles
    d3.select("body")
    	.data(testData)
    	.enter()
      .append("p")
      .text(function(d){
      	return "Hello! " + d;
    	})
    	.style("color", function(d) {
        if(d>3){
          return "red";
        } else {
          return "blue"
        }
    	})
    	.style("font-size",function(d){
     		return d + "px"
    	});
    
    var barContainer = d3.select("body")
                          .append("div")
                          .attr("class","bar-container");

// Basic bars
    barContainer
    	.data(testData).enter()
    	.append("div")
    	.attr("class","bar")
    	.style("height", function(d){
        return d*10 + "px";
      })

</script>
</body>

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