mapearlson/ReadMe

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

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:""}

Loaded data using d3.csv("/users/michaelpearlson/documents/columbia/visualization/project/proj6.csv", function(data) {

			console.log(data);
			})
///which gave me the following ouput in the console.

[
Object
: "1628"
Count: "39"
Rate: "0.8"
Year: "2006"
country: "UAE"
id: "UAE 2006"
__proto__: Object
,
Object
: "1629"
Count: "56"
Rate: "1.4"
Year: "2005"
country: "UAE"
id: "UAE 2005"
__proto__: Object
,
Object
: "1630"
Count: "27"
Rate: "0.7"
Year: "2004"
country: "UAE"
id: "UAE 2004"
__proto__: Object
,
Object
: "1631"
Count: "45"
Rate: "1.3"
Year: "2003"
country: "UAE"
id: "UAE 2003"
__proto__: Object
, Object , Object, Object, Object, Object, Object, Object, Object]

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 donut and arcs.
//I will also need a radius variable.
//I need to assign colors to the sections of the donut.  Will refer to the API for color references.
//I also need to assign measurements //to the arc and layout of the donut.  To do this, I will refer to many examples for help.
//Now comes the SVG.  I create an svg variable and container for svg.
//Append some of the text to the axes.

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

body {
  font: 10px sans-serif;
}

.arc path {
  stroke: #fff;
}

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

var width = 1000,
    height = 700,
    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 - 10)
    .innerRadius(radius - 200);

var pie = d3.layout.pie()
    .sort(null)
    .value(function(d) { return d.Rate; });

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g")
    .attr("transform", "translate(" + width / 2  + "," + height / 2 + ")");

d3.csv("proj6.csv", function(error, data) {

  data.forEach(function(d) {
    d.Rate = +d.Rate;
  });

  var g = svg.selectAll(".arc")
      .data(pie(data))
    .enter().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>

## proj6.csv

          
            
            country
            Year
            Count
            Rate
            id

            
              1628
              UAE
              2006
              39
              0.8
              UAE 2006

            
              1629
              UAE
              2005
              56
              1.4
              UAE 2005

            
              1630
              UAE
              2004
              27
              0.7
              UAE 2004

            
              1631
              UAE
              2003
              45
              1.3
              UAE 2003

            
              1635
              UK
              2006
              904
              1.5
              UK 2006

            
              1636
              UK
              2005
              894
              1.5
              UK 2005

            
              1637
              UK
              2004
              1047
              1.7
              UK 2004

            
              1638
              UK
              2003
              1046
              1.8
              UK 2003

            
              1652
              US
              2006
              14990
              5
              US 2006

            
              1653
              US
              2005
              14860
              5
              US 2005

            
              1654
              US
              2004
              14210
              4.8
              US 2004

            
              1655
              US
              2003
              14465
              5
              US 2003
	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.

	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:""}

	Loaded data using d3.csv("/users/michaelpearlson/documents/columbia/visualization/project/proj6.csv", function(data) {

	console.log(data);
	})
	///which gave me the following ouput in the console.

	[
	Object
	: "1628"
	Count: "39"
	Rate: "0.8"
	Year: "2006"
	country: "UAE"
	id: "UAE 2006"
	__proto__: Object
	,
	Object
	: "1629"
	Count: "56"
	Rate: "1.4"
	Year: "2005"
	country: "UAE"
	id: "UAE 2005"
	__proto__: Object
	,
	Object
	: "1630"
	Count: "27"
	Rate: "0.7"
	Year: "2004"
	country: "UAE"
	id: "UAE 2004"
	__proto__: Object
	,
	Object
	: "1631"
	Count: "45"
	Rate: "1.3"
	Year: "2003"
	country: "UAE"
	id: "UAE 2003"
	__proto__: Object
	, Object , Object, Object, Object, Object, Object, Object, Object]

	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 donut and arcs.
	//I will also need a radius variable.
	//I need to assign colors to the sections of the donut. Will refer to the API for color references.
	//I also need to assign measurements //to the arc and layout of the donut. To do this, I will refer to many examples for help.
	//Now comes the SVG. I create an svg variable and container for svg.
	//Append some of the text to the axes.
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	body {
	font: 10px sans-serif;
	}

	.arc path {
	stroke: #fff;
	}

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

	var width = 1000,
	height = 700,
	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 - 10)
	.innerRadius(radius - 200);

	var pie = d3.layout.pie()
	.sort(null)
	.value(function(d) { return d.Rate; });

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height)
	.append("g")
	.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

	d3.csv("proj6.csv", function(error, data) {

	data.forEach(function(d) {
	d.Rate = +d.Rate;
	});

	var g = svg.selectAll(".arc")
	.data(pie(data))
	.enter().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>
	country	Year	Count	Rate	id
1628	UAE	2006	39	0.8	UAE 2006
1629	UAE	2005	56	1.4	UAE 2005
1630	UAE	2004	27	0.7	UAE 2004
1631	UAE	2003	45	1.3	UAE 2003
1635	UK	2006	904	1.5	UK 2006
1636	UK	2005	894	1.5	UK 2005
1637	UK	2004	1047	1.7	UK 2004
1638	UK	2003	1046	1.8	UK 2003
1652	US	2006	14990	5	US 2006
1653	US	2005	14860	5	US 2005
1654	US	2004	14210	4.8	US 2004
1655	US	2003	14465	5	US 2003