Skip to content

Instantly share code, notes, and snippets.

@nitaku

nitaku/README.md

Last active January 21, 2016 04:06
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save nitaku/9290438 to your computer and use it in GitHub Desktop.
Save nitaku/9290438 to your computer and use it in GitHub Desktop.
Download ZIP
Concentric circles
Raw
README.md

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

Raw
index.css
circle {
fill: none;
stroke: black;
stroke-width: 2px;
}
Raw
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="http://d3js.org/d3.v3.min.js"></script>
</head>
<body>
<svg width="960" height="500">
</svg>
</body>
<script src="index.js"></script>
</html>
Raw
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;});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment