block by mapearlson b53b9a89c1436a540fff

2014-11-19-Michael-Pearlson-HW4(Part2)

Full Screen

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.bar {
  fill: steelblue;
}

.x.axis path {
  display: none;
}

</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>

var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 1100 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var x = d3.scale.ordinal()
    .rangeRoundBands([0, width], .1);

var y = d3.scale.linear()
    .rangeRound([height, 0]);

var color = d3.scale.ordinal()
    .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .tickFormat(d3.format(".2s"));

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.csv("hom_proj2.csv", function(error, data) {
  color.domain(d3.keys(data[0]).filter(function(key) { return key !== "country"; }));

  data.forEach(function(d) {
    var y0 = 0;
    d.year = color.domain().map(function(name) { return {name: name, y0: y0, y1: y0 += +d[name]}; });
    d.total = d.year[d.year.length - 1].y1;
  });

  data.sort(function(a, b) { return b.total - a.total; });

  x.domain(data.map(function(d) { return d.country; }));
  y.domain([0, d3.max(data, function(d) { return d.total; })]);

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 0)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Homicide Rate");

  var country = svg.selectAll(".country")
      .data(data)
    .enter().append("g")
      .attr("class", "g")
      .attr("transform", function(d) { return "translate(" + x(d.country) + ",0)"; });

  country.selectAll("rect")
      .data(function(d) { return d.year; })
    .enter().append("rect")
      .attr("width", x.rangeBand())
      .attr("y", function(d) { return y(d.y1); })
      .attr("height", function(d) { return y(d.y0) - y(d.y1); })
      .style("fill", function(d) { return color(d.name); });

  var legend = svg.selectAll(".legend")
      .data(color.domain().slice().reverse())
    .enter().append("g")
      .attr("class", "legend")
      .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

  legend.append("rect")
      .attr("x", width - 18)
      .attr("width", 18)
      .attr("height", 18)
      .style("fill", color);

  legend.append("text")
      .attr("x", width - 24)
      .attr("y", 9)
      .attr("dy", ".35em")
      .style("text-anchor", "end")
      .text(function(d) { return d; });

});

</script>

ReadMe2

I am using data from the United Nations regarding homicides from many different countries between 1990 and 2010 
(many years are missing for differen countries).  Variables in the data include country, year, count, rate, and 
source.  I would like to make a donut graph given that it seems to suit the data particularly well and may be a 
good starting point for someone that has had no experience with d3 or HTML. I may create an id or key that includes 
year and country in order to compare homicide rates across a few different countries as well as across years.  I 
would also like to create a stacked histogram filled by year of more countries than I plan to include in the donut.
Also, see Part1 for a more detailed completion of requirements.  

My target shape for the donut chart would be as follows: 
${country:"", year:"", count:"", rate:"", id:"", colorid:""}

The target shape for the stacked histogram would be as follows:
${country:"", year:"", rate:"", coloryear:""}

Ordered list of comments in js describing the steps I will take to map my data for the donut graph is as follows:

//Format the CSS.
//Assign width and height variables to be used throughout the script to size the graph and bars.    
//I need to assign colors to the years that will fill the stacks.  Will refer to the API for 
//color references.  
//I also need to create axes 
//Now comes the SVG and appropriate grouping with the "g" element.  I create an svg variable 
//and container.   
//Finally, I use "g" to group and map the graph with "country", a legend, and some other text.

hom_proj2.csv

country,2010,2009,2008,2007,2006,2005,2004,2003
Albania,4,2.7,2.9,3.3,2.8,4.2,3.8,4.6
Argentina,,3.4,5.8,5.3,5.3,5.5,5.9,7.6
Germany,0.8,0.9,0.9,0.9,1,1.1,1.1,1
Greece,,,1.2,1.1,1,1.2,1,1.1
Greenland,,19.2,10.5,3.5,17.5,17.5,19.3,8.8
Guatemala,41.4,46.3,46,43.3,45.1,42,36.3,35
Honduras,82.1,70.7,61.3,45.6,43,35.1,32,33.6
India,,3.4,3.4,3.4,3.5,3.5,3.6,3.5
Ireland,1.2,1.3,1.1,1.8,1.5,1.3,0.7,1.1
Israel,2.1,2.1,2.3,1.9,2.8,2.5,2.7,3.2
Jamaica,52.2,61.6,59.5,58.4,49.7,62.4,55.2,36.8
Kazakhstan,,10.3,10.7,10.8,11.5,12.2,13.9,13.3
Mexico,22.7,17.7,12.7,8.1,9.7,9.3,8.9,9.7
Norway,0.6,0.6,0.7,0.6,0.7,0.7,0.8,1.1
Pakistan,7.6,7.3,7.2,6.4,6.2,6.1,6.2,6.1
Peru,,10.3,11.7,10.4,11.3,11.1,5.6,
Qatar,,,0.9,2.5,0.2,0.7,0.8,0.6
Korea,2.6,2.9,2.3,2.3,2.3,2.3,2.3,2.1
Russia,10.2,11.2,11.6,12.8,15.5,17.7,18.9,
Ukraine,5.2,5.4,5.9,6.3,6.9,7.1,8,8.5
US,4.2,4.4,4.6,4.9,5,5,4.8,5