|
<!DOCTYPE html> |
|
<!-- A modified example from Scott Murray's Knight d3 course. --> |
|
|
|
<html lang="en"> |
|
<head> |
|
<meta charset="utf-8"> |
|
<title>Formatting Ticks</title> |
|
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script> |
|
<style type="text/css"> |
|
|
|
body { |
|
background-color: white; |
|
font-family: Helvetica, Arial, sans-serif; |
|
} |
|
|
|
h1 { |
|
font-size: 24px; |
|
margin: 0; |
|
} |
|
|
|
p { |
|
font-size: 14px; |
|
margin: 10px 0 0 0; |
|
} |
|
|
|
svg { |
|
background-color: white; |
|
} |
|
/* |
|
circle.dots { |
|
fill: steelblue; |
|
}*/ |
|
|
|
circle:hover { |
|
fill: orange; |
|
} |
|
|
|
.axis path, |
|
.axis line { |
|
fill: none; |
|
stroke: black; |
|
shape-rendering: crispEdges; |
|
} |
|
|
|
.axis text { |
|
font-family: sans-serif; |
|
font-size: 11px; |
|
} |
|
.axislabel { |
|
font-family: sans-serif; |
|
font-size: 11px; |
|
color: gray; |
|
} |
|
|
|
</style> |
|
</head> |
|
<body> |
|
|
|
<h1>Educational Attainment and Homicide Rates by Country</h1> |
|
<p>Brazil and Mexico show low levels of education with high levels of homicide rates. The Russian Federation has the highest level of educational attainment among OECD countries, but has the third highest level of homicide. On the other hand, Japan has one of the highest levels of educational attainment and one of the lowest homicide rates among OECD countries.</p> |
|
<p>Source: <a href="http://stats.oecd.org/Index.aspx?DataSetCode=BLI">OECD</a>, 2014</p> |
|
|
|
<script type="text/javascript"> |
|
|
|
|
|
// Scott is "cheating" and not using the full pattern for margins. |
|
// It is better to use the object style with margin.top, margin.right, etc. |
|
|
|
var width = 1000; |
|
var height = 600; |
|
|
|
// var padding = [ 20, 10, 50, 50 ]; //Top, right, bottom, left |
|
var margin ={top: 40, right: 25, bottom: 40, left: 200}; |
|
|
|
// redo this with an object for the margin settings: var margin = {top...} |
|
|
|
var dotRadius = 5; // fix this to a nice value. |
|
|
|
// fill in the margin values here. |
|
var xScale = d3.scale.linear() |
|
.range([ margin.left, width - margin.right - margin.left ]); |
|
// var xScale = d3.scale.linear() |
|
// .range([ margin[3], width - margin[1] - margin[3] ]); |
|
// top to bottom: |
|
var yScale = d3.scale.linear() |
|
.range([ height - margin.bottom, margin.top ]); |
|
|
|
// Custom tick count if you want it. |
|
// Create your axes here. |
|
|
|
var xAxis = d3.svg.axis() |
|
.scale(xScale) |
|
.orient("bottom") |
|
.ticks(10); // fix this to a good number of ticks for your scale later. |
|
|
|
var yAxis = d3.svg.axis() |
|
.scale(yScale) |
|
.orient("left"); |
|
|
|
var svg = d3.select("body") |
|
.append("svg") |
|
.attr("width", width) |
|
.attr("height", height); |
|
|
|
|
|
|
|
|
|
d3.csv("betterlifeindex.csv", function(data) { |
|
|
|
// look at the data file and pick 2 columns to contrast with each other. |
|
|
|
xScale.domain( |
|
d3.extent(data, function(d) { |
|
return +d.educationalAttainment; |
|
// pick a data value to plot on x axis |
|
})); |
|
|
|
yScale.domain( |
|
d3.extent(data, function(d) { |
|
// pick a data value to plot for y axis |
|
return +d.homicideRate; |
|
})); |
|
|
|
var circles = svg.selectAll("circle") |
|
// fill in the rest of the data, enter, append here. |
|
.data(data) |
|
.enter() |
|
.append("circle"); |
|
|
|
// add a class to the circles - ".dots". |
|
circles.attr("class", "dots"); |
|
|
|
// Circles in SVG have cx, cy, and r attributes. x location, y location, radius. |
|
|
|
circles.attr("cx", function(d) { |
|
// return the value to use for your x scale here |
|
return xScale(+d.educationalAttainment); |
|
}) |
|
.attr("cy", function(d) { |
|
// return the value to use for your y scale here |
|
return yScale(+d.homicideRate); |
|
}) |
|
.attr("r", dotRadius) // you might want to increase your dotRadius |
|
.attr("fill", function(d) { |
|
if(d.country === "Japan"){ |
|
return "green"; |
|
}else{ |
|
return "steelblue"; |
|
} |
|
}) // add a fill rule with a special case for one of the countries |
|
.append("title") |
|
.text(function(d) { |
|
return d.country + " has an educational attainment rate of " + d.educationalAttainment + " and a homicide rate of " + d.homicideRate; |
|
// fill in a text string here for your cheap tooltip |
|
}); |
|
|
|
// fix these translates so they use your margin and height width as needed |
|
svg.append("g") |
|
.attr("class", "x axis") |
|
.attr("transform", "translate(0," + (height - margin.bottom) + ")") |
|
.call(xAxis); // fill in the name of your xaxis function here ). |
|
|
|
svg.append("g") |
|
.attr("class", "y axis") |
|
.attr("transform", "translate(" + (margin.left) + ",0)") |
|
.call(yAxis); // fill in the name of your yaxis function here). |
|
// Adding the axes labels |
|
svg.append("text") |
|
.attr("class", "axislabel") |
|
.attr("transform", "translate(" + width/2 + "," + height + ")") |
|
.style("text-anchor", "middle") |
|
.text("Educational Attainment Rate"); |
|
|
|
svg.append("text") |
|
.attr("class", "axislabel") |
|
.attr("transform", "rotate(-90)") |
|
.attr("y", 0 - margin.left) |
|
.attr("x", height/2) |
|
.style("text-anchor", "middle") |
|
.text("Homicide Rate"); |
|
|
|
|
|
}); |
|
|
|
|
|
</script> |
|
|
|
</body> |
|
</html> |