Donut Chart 3 layers w. filters

This donut chart is constructed from a CSV file storing the populations of various age groups. The chart employs a number of D3 features:

d3.csv - load and parse data
d3.scale.ordinal - color encoding
d3.svg.arc - display arcs
d3.layout.pie - compute arc angles from data

forked from mbostock's block: Donut Chart

<!DOCTYPE html>
<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>

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