D3 Examples - Monday svg to d3

xxxxxxxxxx
 
<!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; }
  </style>
</head>
​
<body>
  
  <svg width="580" height="400">
    
    //illustrator artwork pastes here
    
<text id="title" transform="matrix(1 0 0 1 66.0744 66.7144)" style="font-family:'MyriadPro-Regular'; font-size:12px;">This is my text</text>
    
    
<g id="Circles">
    <circle id="circle1" cx="40.492" cy="153.824" r="25.796"/>
    <circle id="circle2" cx="94.35" cy="153.824" r="25.796"/>
    <circle id="circle3" cx="148.208" cy="153.824" r="25.796"/>
    <circle id="circle4" cx="202.066" cy="153.824" r="25.796"/>
    <circle id="circle5" cx="255.925" cy="153.824" r="25.796"/>
    <circle id="circle6" cx="309.783" cy="153.824" r="25.796"/>
    <circle id="circle7" cx="363.641" cy="153.824" r="25.796"/>
    <circle id="circle8" cx="417.499" cy="153.824" r="25.796"/>
    <circle id="circle9" cx="471.358" cy="153.824" r="25.796"/>
    <circle id="circle10" cx="525.216" cy="153.824" r="25.796"/>
   
    </g>
  </svg>
  
  
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    var svg = d3.select("svg");
    
    var circles = svg.selectAll("circle")
    
    console.log (circles)
    
    var myData=[10,15,20,25,30,35,40,50,60,75];
    
    //select everything of the same
    circles.attr("opacity",function(d,i){
      return myData[i]/100;})
       .attr("r",10)
    
    //select specifi thing
    d3.select("#circle3").attr("fill","red");
    
    //to add interactivity
      
      circles.on("mouseover",function(d,i){
        d3.select(this).attr("r",20)
        var myid=d3.select(this).attr("id")
        d3.select("#title").text("Just moused over "+myid)
      });
      circles.on("mouseout",function(d,i){
        d3.select(this).attr("r",10)
        d3.select("#title").text("This is my title")
      });
        
        
        //animate
        
        circles
        .transition()
        .duration(1000)
        .ease(d3.easeBounce)
        .attr("cy",function(d,i){
          return 100+myData[i]
        })
      
      
      
​
  </script>
</body>
​
    