darrenjaworski/index.csv

## readme.md

      
    Raw
  

              readme.md
            
          
    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.

  
## index.csv

          
            id
            percent
            url

            
              journalism
              33
              http://darrenjaworski.com/journalism.html

            
              programming
              33
              http://darrenjaworski.com/programming.html

            
              data
              33
              http://darrenjaworski.com/data.html

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<style>

.arc path {
  stroke: #fff;
}

</style>
</head>
<body>

<script src="http://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>
id	percent	url
journalism	33	http://darrenjaworski.com/journalism.html
programming	33	http://darrenjaworski.com/programming.html
data	33	http://darrenjaworski.com/data.html
	<!DOCTYPE html>
	<meta charset="utf-8">
	<html>
	<head>
	<style>

	.arc path {
	stroke: #fff;
	}

	</style>
	</head>
	<body>

	<script src="http://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>