|
<!DOCTYPE html> |
|
<meta charset="utf-8"> |
|
<style> |
|
|
|
body { |
|
font: 10px sans-serif; |
|
} |
|
|
|
.arc path { |
|
stroke: #fff; |
|
} |
|
|
|
</style> |
|
<body> |
|
<script src="http://d3js.org/d3.v3.min.js"></script> |
|
<script> |
|
|
|
var width = 1000, |
|
height = 1000, |
|
radius = Math.min(width, height) / 2; |
|
|
|
var color = d3.scale.ordinal() |
|
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]); |
|
//.range(["#ff0000", "#00ff00", "#0000ff", "#ffff00", "#ff00ff"]); |
|
|
|
/*var arc = d3.svg.arc() |
|
.outerRadius(radius - 10) |
|
.innerRadius(radius - 70); |
|
|
|
var arc2 = d3.svg.arc() |
|
.outerRadius(radius - radius * (1.0/5)) |
|
.innerRadius(radius - radius * (1.0/5) - 10); |
|
*/ |
|
var pie = d3.layout.pie() |
|
.sort(null) |
|
.value(function(d) { return d.population; }); |
|
|
|
|
|
var _svg = d3.select("body").append("svg") |
|
.attr("width", width) |
|
.attr("height", height) |
|
|
|
/*var svg = _svg |
|
.append("g") |
|
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); |
|
|
|
var svg2 = _svg |
|
.append("g") |
|
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); |
|
*/ |
|
/*d3.csv("data.csv", function(error, data) { |
|
|
|
data.forEach(function(d) { |
|
d.population = +d.population; |
|
}); |
|
|
|
var g = svg.selectAll(".arc") |
|
.data(pie(data)) |
|
.enter().append("g") |
|
.attr("class", "arc"); |
|
|
|
|
|
var g2 = svg2.selectAll(".arc") |
|
.data(pie(data)) |
|
.enter().append("g") |
|
.attr("class", "arc"); |
|
|
|
g2.append("path") |
|
.attr("d", arc2) |
|
.style("fill", function(d) { return color(d.data.age); }); |
|
|
|
g.append("path") |
|
.attr("d", arc) |
|
.style("fill", function(d) { return color(d.data.age); }); |
|
|
|
g.append("text") |
|
.attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; }) |
|
.attr("dy", ".35em") |
|
.style("text-anchor", "middle") |
|
.text(function(d) { return d.data.age; }); |
|
|
|
|
|
|
|
});*/ |
|
|
|
|
|
|
|
function draw_pie(svg, data, radius, thickness, gap, limit, step, questionCounts, callback) { |
|
if(data.length === 0) { |
|
callback(questionCounts); |
|
return; |
|
} |
|
|
|
if(radius < thickness) { |
|
thickness = radius; |
|
} |
|
|
|
|
|
|
|
var next_total = 0; |
|
var current_total_count = 0; |
|
var current = data.filter(function(el) { |
|
if(el.percentage >= limit) { |
|
current_total_count += el.population; |
|
return true; |
|
} else { |
|
next_total += el.percentage; |
|
return false; |
|
} |
|
}); |
|
|
|
questionCounts.push(current_total_count); |
|
|
|
var next = data.filter(function(el) { |
|
if(el.percentage < limit) { |
|
el.percentage = el.percentage / next_total; |
|
return true; |
|
} else { |
|
return false; |
|
} |
|
}); |
|
|
|
|
|
//percentages.push(1 - next_total); |
|
|
|
var arc = d3.svg.arc() |
|
.outerRadius(radius) |
|
.innerRadius(radius - thickness); |
|
|
|
// Outer <g> |
|
var og = svg |
|
.append("g") |
|
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); |
|
|
|
// Inner <g> |
|
var ig = og.selectAll(".arc") |
|
.data(pie(current)) |
|
.enter().append("g") |
|
.attr("class", "arc"); |
|
|
|
ig.append("path") |
|
.attr("d", arc) |
|
.style("fill", function(d) { |
|
var hsl = d3.hsl(color(d.data.age)); |
|
hsl.s = hsl.s * (1 - (0.11 * step)) |
|
return hsl; |
|
}); |
|
|
|
ig.append("text") |
|
.attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; }) |
|
.attr("dy", ".35em") |
|
.style("text-anchor", "middle") |
|
.text(function(d) { return d.data.age; }); |
|
|
|
draw_pie(svg, next, radius - thickness - gap, thickness, gap, limit, step + 1, questionCounts, callback) |
|
} |
|
|
|
|
|
d3.csv("data.csv", function(error, data) { |
|
|
|
var total = 0; |
|
data.forEach(function(d) { |
|
d.population = +d.population; |
|
total += d.population; |
|
}); |
|
|
|
data.forEach(function(d) { |
|
d.percentage = d.population / total; |
|
}); |
|
|
|
draw_pie(_svg, data, radius, 50, 5, 0.04, 0, [], function(counts) { |
|
var total = counts.reduce(function(a,b) { return a + b }); |
|
var percentages = counts.map(function(a) { return a / total; }); |
|
console.log(percentages); |
|
|
|
percentages.forEach(function(a, i) { |
|
var val = (a*100).toFixed(4) + "%"; |
|
|
|
if(a < 0.001) { |
|
val = (a*1000).toFixed(4) + "‰"; |
|
} |
|
|
|
_svg.append("text") |
|
.attr("transform", function(d) { return "translate(0,0)"; }) |
|
.attr("dy", i+1 + "em") |
|
.style("text-anchor", "left") |
|
.text("Circle " + (i+1) + ": " + val); |
|
}); |
|
|
|
}); |
|
}); |
|
|
|
</script> |
