html/01_hello-d3_challenge2_solution.html

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  
  <!--   using D3 version 4-->
  <script src="https://d3js.org/d3.v4.min.js"></script>
  
    <!--  could add CSS inside the <style> tags -->
    <style>
      
    </style>

</head>

<body>
  <svg width="400" height="120">
    <circle cx="40" cy="60" r="10"></circle>
    <circle cx="80" cy="60" r="10"></circle>
    <circle cx="120" cy="60" r="10"></circle>
  </svg>
  
  <script>
    var body = d3.select("body"); // select the html element with <body>
  
    var svg = body.select("svg"); // select the <svg> that lies within the <body>
    
    var circle = svg.selectAll("circle");
    
    var myData = [ 20, 60, 100 ];
    
    circle = circle.data(myData);
    
    circle.attr("cy", function(d) {
                          return d;
                      });
    
    circle.style("fill", "darkred");
    circle.attr("r", 20);
    
    
  </script>
</body>
</html>