mapearlson/ReadMe2

## 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

## 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="http://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>
	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.
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
	<!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="http://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>