block by nitaku 9290438

Concentric circles

Full Screen

A simple example which uses d3.js to create a set of concentric circles according to a given array of radii.

index.js

var bbox, radii, svg, target;

svg = d3.select('svg');
bbox = svg[0][0].getBoundingClientRect();

radii = [12, 24, 32, 48, 60, 80, 120, 210];

target = svg.append('g')
    .attr('transform', "translate(" + (bbox.width / 2) + "," + (bbox.height / 2) + ")");

target.selectAll('circle')
    .data(radii)
  .enter().append('circle')
    .attr('r', function(d) {return d;});

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="description" content="Concentric circles"/>
    <title>Concentric circles</title>
    <link type="text/css" href="index.css" rel="stylesheet"/>
    <script src="//d3js.org/d3.v3.min.js"></script>
  </head>
  <body>
    <svg width="960" height="500">
    </svg>
  </body>
  <script src="index.js"></script>
</html>

index.css

circle {
    fill: none;
    stroke: black;
    stroke-width: 2px;
}