D3 Examples - d3 Workshop - Selection playground

xxxxxxxxxx
 
<!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>
​
    