D3 Examples - 1. DOM Manipulation

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<head>
    <title>DOM Manipulation</title>
</head>
​
<style>
    body {
        font-family: "Helvetica Neue", Helvetica, sans-serif;
        font-size: 14px;
    }
  
  circle {
    fill: red;
    stroke: black;
    stroke-width: 2;
  }
</style>
​
<body>
​
    <svg width="500" height="300">
    <circle cx="50" cy="50" r="20" id="first-circle" />
    </svg>
  
    <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  
    <script>
        // ADD A CIRCLE WITH D3
//      d3.select("svg").append("circle")
//       .attr("id", "second-circle")
//       .attr("cx", 150)
//       .attr("cy", 50)
//       .attr("r", 20);
    
    // AND ANOTHER!
//     d3.select("svg").append("circle")
//       .attr("id", "third-circle")
//       .attr("cx", 250)
//       .attr("cy", 50)
//       .attr("r", 30);
    
    // DEMO OF HOW D3 COMPARES TO JAVASCRIPT AND JQUERY
//     console.debug('javascript ', document.getElementById("first-circle"))
//     console.debug('jquery ', $("#first-circle")[0])
    
    </script>
</body>
</html>
    