Skip to content

Instantly share code, notes, and snippets.

@cmdoptesc cmdoptesc/
Last active Mar 4, 2018

What would you like to do?
JavaScript D3: Drawing Concentric Arcs
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="description" content="Basic beginner's source code to drawing arcs in D3 using dynamically-generated data.">
<title>JavaScript D3: Drawing Concentric Arcs (Part I)</title>
<style type='text/css'>
cursor: pointer;
<script type="text/javascript" src=""></script>
<div class="chart"></div>
<script type="text/javascript">
var width = window.innerWidth,
height = window.innerHeight;
// append svg to the DIV".chart").append("svg:svg")
.attr("width", width)
.attr("height", height);
var render = function(dataset) {
vis ="svg"); // select the svg
// set constants
var PI = Math.PI;
var arcMin = 75; // inner radius of the first arc
var arcWidth = 15; // width
var arcPad = 1; // padding between arcs
// arc accessor
// d and i are automatically passed to accessor functions,
// with d being the data and i the index of the data
var drawArc = d3.svg.arc()
.innerRadius(function(d, i) {
return arcMin + i*(arcWidth) + arcPad;
.outerRadius(function(d, i) {
return arcMin + (i+1)*(arcWidth);
.startAngle(0 * (PI/180))
.endAngle(function(d, i) {
return d*6 * (PI/180);
// bind the data
var arcs = vis.selectAll("path.arc-path").data(dataset);
// *** update existing arcs -- redraw them ***
arcs.attr("d", drawArc)
.attr("fill", function(d){
// we need to redefine the fills as well since we have new data,
// otherwise the colors would no longer be relative to the data
// values (and arc length). if your fills weren't relative to
// the data, this would not be necessary
var grn = Math.floor((1 - d/60)*255);
return "rgb(0, "+ grn +", 0)";
// draw arcs for new data
.attr("class", "arc-path") // assigns a class for easier selecting
.attr("transform", "translate(400,200)") // sets position--easier than setting x's and y's
.attr("fill", function(d){
// fill is an rgb value with the green value determined by the data
// smaller numbers result in a higher green value (1 - d/60)
// you should also look into using d3 scales to create gradients
var grn = Math.floor((1 - d/60)*255);
return "rgb(0, "+ grn +", 0)";
.attr("d", drawArc); // draw the arc
// you can safely ignore the code below.
// the code is used to create a click area for people to regenerate
// arcs by generating a new data set and calling render on that set
// for generating a random array of times
var generateTimes = function(quantity) {
var i, times = [];
for(i=0; i<quantity; i++) {
return times;
// drawing the click area
var initialize = function() {
var arcMin = 75; // this should match the arcMin in render()
var times = generateTimes(6);
// making the click circle
if(!d3.selectAll("")[0].length) { // if there is no click area.."svg").append("circle")
.attr("class", 'click-circle')
.attr("transform", "translate(400,200)")
.attr("r", arcMin*0.85)
.attr("fill", "rgba(201, 201, 201, 0.5)")
.on("click", function(d) {
times = generateTimes(6);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.