D3 Examples - illustrator artwork

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="580px" height="400">
    
    //illustrator artwork here
    <g id="Circles">
    <circle id="circle1" cx="83.7" cy="121.4" r="23.5"/>
    <circle id="circle2" cx="130.8" cy="121.4" r="23.5"/>
    <circle id="circle3" cx="177.9" cy="121.4" r="23.5"/>
    <circle id="circle4" cx="225" cy="121.4" r="23.5"/>
    <circle id="circle5" cx="272.1" cy="121.4" r="23.5"/>
    <circle id="circle6" cx="319.2" cy="121.4" r="23.5"/>
    <circle id="circle7" cx="366.2" cy="121.4" r="23.5"/>
    <circle id="circle8" cx="413.3" cy="121.4" r="23.5"/>
    <circle id="circle9" cx="460.4" cy="121.4" r="23.5"/>
    <circle id="circle10" cx="507.5" cy="121.4" r="23.5"/>
    </g>
    
<g id="Layer_1">
    <text id="title" transform="matrix(1 0 0 1 56.7222 55.75)" class="st0 st1">Lorem ipsum dolor sit amet consectur</text>
    </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 = d3.selectAll("circle");
    
    var myData=[12,45,23,11,5,39,20,14,50,33];
    
    //select everything of a certain type
    circles.attr("opacity",function(d,i){
      return myData[i]/100;
    }).attr("r",10)
    
    //select individual bits
    d3.select("#circle3").attr("fill","red");
    
    //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)
      var myid = d3.select(this).attr("id")
      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]
    })
    
    
    console.log(circles)
    
  </script>
</body>
​
    