D3 Examples - <a href> pie chart segments

<a href> pie chart segments

This is from the index page to my personal site. I used this simple design to be the main navigation of my site and differentiation of my personal brand. The segments are links to the three pages on my site. I'm adapting the site to be responsive, and thus resize the pie chart by media query. I'll update this when that work is done.

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<style>
​
.arc path {
  stroke: #fff;
}
​
</style>
</head>
<body>
​
<script src="https://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(["#00A0B0", "#EB6841", "#EDC951"]);
​
var arc = d3.svg.arc()
    .outerRadius(radius - 10)
    .innerRadius(0);
​
var pie = d3.layout.pie()
    .sort(null)
    .value(function(d) { return d.percent; });
​
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
​
d3.csv("index.csv", function(error, data) {
​
  data.forEach(function(d) {
    d.percent = +d.percent;
  });
​
//appending a creates an <a> tag. 
//Then with the xlink:href attribute it pulls the url of the other pages from the csv
  var g = svg.selectAll(".arc")
      .data(pie(data))
      .enter().append("a")
      .attr("xlink:href", function(d){return d.data.url;})
      .append("g")
      .attr("class", "arc");
​
  g.append("path")
      .attr("d", arc)
      .style("fill", function(d) { return color(d.data.id); });
​
  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.id; });
​
});
​
</script>
    