d3 Workshop - Selection playground

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div id="test"></div>
  <script>
    // Your script goes here! Make some divs
    // Special classes: .invisible, .dotted, .striped, .checkered, .faded
		var body = d3.select("body");
    
    var red = body.append("div")
    	.style("background-color", "red");

var stripedDiv = body.append("div")
    	.attr("class", "striped");
    
    var pink = body.append("div")
    	.style("background-color", "pink");

pink.append("div")
    	.style("background-color", "green")
      .append("div")
    	 .style("background-color", "yellow")
         .append("div")
           .attr("class", "striped");

red.remove();

var everythingStriped = d3.selectAll(".striped");

everythingStriped.attr("class", "checkered");
    
    d3.select("#test")
      .html("<b>HI</b>")
      .append("span")
        .text("HI");
    
  </script>
</body>

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