index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.arc path {
stroke: #fff;
}
</style>
<body>
<script src="//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>
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.
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"