D3 Examples - variable position

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; }
    
    .inner_circle{
      fill: red;
      fill-opacity: 0.1
    }
    .outer_circle{
      fill:red;
      fill-opacity: 0.1
    }
    
    .active_circle{
      fill:red;
      fill-opacity: 0.75
    }
    
    
  </style>
</head>
​
<body>
  <script>
var margin = {top: 30, right: 20, bottom: 70, left: 50},
    width = 600 - margin.left - margin.right,
    height = 300 - margin.top - margin.bottom;
    
// Adds the svg canvas
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 + ")");
​
   
    svg.append("circle")
    .attr("class", "inner_circle")
    .attr("cy", 0)
    .attr("cx", 0)
    .attr("r", 10);
    
    svg.append("circle")
    .attr("class", "outer_circle")
    .attr("cy", 0)
    .attr("cx", 0)
    .attr("r", 15);
    
    svg.append("circle")
    .attr("class", "inner_circle")
    .attr("cy", 50)
    .attr("cx", 0)
    .attr("r", 10);
    
    svg.append("circle")
    .attr("class", "outer_circle")
    .attr("cy", 50)
    .attr("cx", 0)
    .attr("r", 15);
    
    svg.append("circle")
    .attr("class", "inner_circle")
    .attr("class", "active_circle")
    .attr("cy", 100)
    .attr("cx", 0)
    .attr("r", 10);
    
    svg.append("circle")
    .attr("class", "outer_circle")
    .attr("cy", 100)
    .attr("cx", 0)
    .attr("r", 15);
    
    svg.append("circle")
    .attr("class", "inner_circle")
    .attr("cy", 150)
    .attr("cx", 0)
    .attr("r", 10);
    
    svg.append("circle")
    .attr("class", "outer_circle")
    .attr("cy", 150)
    .attr("cx", 0)
    .attr("r", 15);
    
    
​
  </script>
</body>
​
    