Reading the data in with D3 and appending rectangles to the SVG to create a basic bar chart. This is my first bar chart.
Create a SVG:
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
Sort the data
data.sort(function(a, b) {
return d3.descending(+a.year2013, +b.year2013);
//the plus sign casts strings into numbers.
});
Set up the domain.
var widthScale = d3.scale.linear()
.range([ 0, width ]);
// the domain is the maximum mortality rate in 2013
widthScale.domain([ 0, d3.max(data, function(d) {
return +d.year2013;
}) ]);
Create rectangles and attach data
var rects = svg.selectAll("rect")
.data(data)
.enter()
.append("rect");
rects.attr("x", 0)
.attr("fill", "#0099FF")
.attr("y", function(d, i) {
return i * 20; // just spacing the bars - notice from the top
})
.attr("width", function(d) {
return widthScale(d.year2013);
})
.attr("height", 10)
.append("title") // this is a simple (bad) tooltip
.text(function(d) {
return d.name + "'s Maternal Mortality rate: " + d.year2013;
});