This donut chart is constructed from a CSV file storing the populations of various age groups. The chart employs a number of D3 features:
forked from mbostock's block: Donut Chart
xxxxxxxxxx
<meta charset="utf-8">
<style>
.clippy {
clip-path: url(#clippys);
}
</style>
<body>
<svg preserveAspectRatio="none">
<defs>
<clipPath id="clippys" clipPathUnits="objectBoundingBox">
<circle cx=".50" cy=".50" r=".50" />
</clipPath>
<filter id="grayscale">
<feColorMatrix type="saturate" values="0"/>
<feGaussianBlur stdDeviation="1"/>
</filter>
<filter id=”Gothamish” color-interpolation-filters=”sRGB”>
<feComponentTransfer in=”SourceGraphic” result=”midtoneContrast”>
<feFuncR type=”table” tableValues=”0 0.05 0.1 0.2 0.3 0.5 0.7 0.8 0.9 0.95 1.0”/>
</feComponentTransfer>
<feColorMatrix in=”midtoneContrast” result=”redBWandblue” type=”matrix” values=”1 0 0 0 0
10000
1 0 0 0 0.03
0 0 0 1 0”/>
<feGaussianBlur in=”redBWandblue” stdDeviation=”1” result=”blurMask”/>
<feComposite operator=”arithmetic” in=”redBWandblue” in2=”blurMask” k2=”1.3” k3=”-0.3” result=”postsharp”/>
<feComponentTransfer result=”finalImage” in=”postsharp”>
<feFuncB type=”table” tableValues=”0 0.047 0.118 0.251 0.318 0.392 0.42 0.439 0.475 0.561 0.58 0.627 0.671 0.733 0.847 0.925 1”/>
</feComponentTransfer>
</filter>
</defs>
</svg>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var width = 960,
height = 500,
radius = Math.min(width, height) / 2;
var color = d3.scale.ordinal()
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
var arc = d3.svg.arc()
.outerRadius(radius)
.innerRadius(radius - 50);
var arc2 = d3.svg.arc()
.outerRadius(radius - 100)
.innerRadius(radius - 150);
var arc3 = d3.svg.arc()
.outerRadius(radius - 210);
var pie = d3.layout.pie()
.sort(null)
.value(function(d) { return d.population; });
var svg = d3.select("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
d3.csv("data.csv", type, function(error, data) {
var g3 = svg.selectAll(".arc3")
.data(pie(data.slice(0,1)))
.enter().append("g")
.attr("class", "arc3");
g3.append("image")
.attr("xlink:href", (d,i) => "https://placekitten.com/100/100?image=" + 12)
.attr("transform", (d) => "translate(" + arc3.centroid(d) + ")")
.attr("x", -50)
.attr("y", -50)
.attr("width", 100)
.attr("height", 100)
.classed("clippy", true)
.attr("filter", (d,i) => i%2 === 1 ? "url(#grayscale)" : "url(#Gothamish)");
var g2 = svg.selectAll(".arc2")
.data(pie(data.slice(0,12)))
.enter()
.append("g")
.attr("class", "arc2");
g2.append("image")
.attr("xlink:href", (d,i) => "https://placekitten.com/60/60?image=" + i%18)
.attr("transform", (d) => "translate(" + arc2.centroid(d) + ")")
.attr("x", -30)
.attr("y", -30)
.attr("width", 60)
.attr("height", 60)
.classed("clippy", true)
.attr("filter", (d,i) => i%2 === 0 ? "url(#grayscale)" : "url(#Gothamish)")
var g = svg.selectAll(".arc1")
.data(pie(data))
.enter()
.append("g")
.classed("arc1", true)
g.append("image")
.attr("xlink:href", (d,i) => "https://placekitten.com/50/50?image=" + i%18)
.attr("transform", (d) => "translate(" + arc.centroid(d) + ")")
.attr("x", -20)
.attr("y", -20)
.attr("width", 40)
.attr("height", 40)
.classed("clippy", true)
.attr("filter", (d,i) => i%2 === 0 ? "url(#grayscale)" : "url(#Gothamish)")
});
function type(d) {
d.population = +d.population;
return d;
}
</script>
https://d3js.org/d3.v3.min.js