Skip to content

Instantly share code, notes, and snippets.

@nitaku

nitaku/README.md

Last active August 29, 2015 14:02
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nitaku/4d5da67717d8e62fafe0 to your computer and use it in GitHub Desktop.
Save nitaku/4d5da67717d8e62fafe0 to your computer and use it in GitHub Desktop.
Download ZIP
Polar chart (area encoding)
Raw
index.coffee
### polar layout ###
polar = () ->
# defaults
#scale = d3.scale.linear
angle = null
self = (data) ->
angle = 2*Math.PI/data.length
data.forEach (d, i) ->
d.angle = if data.length > 2 then i * angle else (i-0.25) * angle
return data
self.angle = () ->
return angle
return self
### --- ###
csv = '''
category,value
one,323
two,534
three,230
four,180
five,190
'''
data = d3.csv.parse csv
data.forEach (d) -> d.value = +d.value
max = d3.max(data, (d) -> d.value)
width = 960
height = 500
RADIUS = Math.min(width, height) / 2 - 40
polar_layout = polar()
polar_data = polar_layout(data)
console.log polar_data
svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr
transform: "translate(#{width/2}, #{height/2})"
color = d3.scale.ordinal()
.range(["#1b9e77","#d95f02","#7570b3","#e7298a","#66a61e","#e6ab02","#a6761d","#666666"])
radius_scale = d3.scale.sqrt()
.domain([0, max])
.range([0, RADIUS])
arc_generator = d3.svg.arc()
.innerRadius(0)
.outerRadius((d) -> radius_scale(d.value))
.startAngle((d) -> d.angle - polar_layout.angle()/2)
.endAngle((d) -> d.angle + polar_layout.angle()/2)
svg.selectAll('.arc')
.data(polar_data)
.enter().append('path')
.attr
class: 'arc'
d: arc_generator
fill: (d, i) -> color(i)
Raw
index.css
svg {
background-color: white;
}
.arc {
stroke-width: 1;
stroke: white;
stroke-linejoin: round;
}
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Polar chart (area encoding)" />
<title>Polar chart (area encoding)</title>
<link rel="stylesheet" href="index.css">
<script src="http://d3js.org/d3.v3.min.js"></script>
</head>
<body>
<script src="index.js"></script>
</body>
</html>
Raw
index.js
/* polar layout
*/
(function() {
var RADIUS, arc_generator, color, csv, data, height, max, polar, polar_data, polar_layout, radius_scale, svg, width;
polar = function() {
var angle, self;
angle = null;
self = function(data) {
angle = 2 * Math.PI / data.length;
data.forEach(function(d, i) {
return d.angle = data.length > 2 ? i * angle : (i - 0.25) * angle;
});
return data;
};
self.angle = function() {
return angle;
};
return self;
};
/* ---
*/
csv = 'category,value\none,323\ntwo,534\nthree,230\nfour,180\nfive,190';
data = d3.csv.parse(csv);
data.forEach(function(d) {
return d.value = +d.value;
});
max = d3.max(data, function(d) {
return d.value;
});
width = 960;
height = 500;
RADIUS = Math.min(width, height) / 2 - 40;
polar_layout = polar();
polar_data = polar_layout(data);
console.log(polar_data);
svg = d3.select("body").append("svg").attr("width", width).attr("height", height).append("g").attr({
transform: "translate(" + (width / 2) + ", " + (height / 2) + ")"
});
color = d3.scale.ordinal().range(["#1b9e77", "#d95f02", "#7570b3", "#e7298a", "#66a61e", "#e6ab02", "#a6761d", "#666666"]);
radius_scale = d3.scale.sqrt().domain([0, max]).range([0, RADIUS]);
arc_generator = d3.svg.arc().innerRadius(0).outerRadius(function(d) {
return radius_scale(d.value);
}).startAngle(function(d) {
return d.angle - polar_layout.angle() / 2;
}).endAngle(function(d) {
return d.angle + polar_layout.angle() / 2;
});
svg.selectAll('.arc').data(polar_data).enter().append('path').attr({
"class": 'arc',
d: arc_generator,
fill: function(d, i) {
return color(i);
}
});
}).call(this);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment