Adobe SVG to D3 w/ Mods

This is an example of a graphic created in Adobe Illustrator and imported into a D3 based page. This is a followup of an earlier block "Adobe SVG to D3". The earlier block explains more about the mechanics of bringing in a new SVG element.

This block creates four copies of the original star graphic SVG and shows how to access each one as if it were a D3 based SVG element. The styling colors are changed and the movement of each is distinct as well as capturing mouse events for each SVG.

This graphic although simple is a good example of one that you would not want to have to code the path yourself. Very easy to do in Adobe Illustrator but very painfull to get right if you were trying to code it manually.

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width: 100%; height: 100%; }
  </style>
</head>

<body>
  <script>
    var margin = {top: 20, right: 10, bottom: 20, left: 10};
    var width = 960 - margin.left - margin.right;
    var height = 500 - margin.top - margin.bottom;
    var svg = d3.select("body").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
    .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

});
  </script>
</body>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js