|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="utf-8"> |
|
<title>Adding Labels</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: #ddddff; |
|
font-family: sans-serif; |
|
} |
|
|
|
h3 { |
|
margin-left: 200px; |
|
} |
|
|
|
p { |
|
margin-left: 200px; |
|
font-size: 11pt; |
|
color: gray; |
|
} |
|
|
|
div.y2015 { |
|
color: #6699FF; |
|
display: inline; |
|
} |
|
div.y1990 { |
|
color: orange; |
|
display: inline; |
|
} |
|
|
|
svg { |
|
background-color: white; |
|
} |
|
|
|
circle { |
|
stroke-width: 1; |
|
} |
|
|
|
circle.y2015 { |
|
fill: #6699FF; |
|
} |
|
|
|
circle.y1990 { |
|
fill: orange; |
|
} |
|
|
|
circle:hover { |
|
stroke-width: 3; |
|
stroke: white; |
|
} |
|
|
|
line.grid { |
|
stroke: #eee; |
|
} |
|
|
|
line.between { |
|
stroke: black; |
|
} |
|
|
|
.axis path, |
|
.axis line { |
|
fill: none; |
|
stroke: black; |
|
shape-rendering: crispEdges; |
|
} |
|
|
|
.axis text { |
|
font-family: sans-serif; |
|
font-size: 11px; |
|
} |
|
|
|
.xlabel { |
|
font-famile: sans-serif; |
|
font-size: 11px; |
|
color: gray; |
|
} |
|
|
|
</style> |
|
</head> |
|
<body> |
|
|
|
<h3>Access to Good Water Sources by World Region, <div class="y1990">1990</div> versus <div class="y2015">2015</div></h3> |
|
<p>Source: WHO/UNICEF data, 2015. |
|
|
|
<script type="text/javascript"> |
|
|
|
// this is the size of the svg container -- the white part |
|
var fullwidth = 1000, |
|
fullheight = 500; |
|
|
|
// these are the margins around the graph. Axes labels go in margins. |
|
var margin = {top: 20, right: 25, bottom: 20, left: 200}; |
|
|
|
var width = 1000 - margin.left - margin.right, |
|
height = 500 - margin.top - margin.bottom; |
|
|
|
var widthScale = d3.scale.linear() |
|
.range([ 0, width]); |
|
|
|
var heightScale = d3.scale.ordinal() |
|
.rangeRoundBands([ margin.top, height], 0.2); |
|
|
|
var xAxis = d3.svg.axis() |
|
.scale(widthScale) |
|
.orient("bottom"); |
|
|
|
var yAxis = d3.svg.axis() |
|
.scale(heightScale) |
|
.orient("left") |
|
.innerTickSize([0]); |
|
|
|
var svg = d3.select("body") |
|
.append("svg") |
|
.attr("width", fullwidth) |
|
.attr("height", fullheight); |
|
|
|
|
|
d3.csv("water_improvement_data.csv", function(error, data) { |
|
|
|
if (error) { |
|
console.log("error reading file"); |
|
} |
|
|
|
data.sort(function(a, b) { |
|
return d3.descending(+a.year2015, +b.year2015); |
|
}); |
|
|
|
// in this case, i know it's out of 100 because it's percents. |
|
widthScale.domain([0, 100]); |
|
|
|
// js map: will make a new array out of all the d.name fields |
|
heightScale.domain(data.map(function(d) { return d.name; } )); |
|
|
|
|
|
// Make the faint lines from y labels to highest dot |
|
|
|
var linesGrid = svg.selectAll("lines.grid") |
|
.data(data) |
|
.enter() |
|
.append("line"); |
|
|
|
linesGrid.attr("class", "grid") |
|
.attr("x1", margin.left) |
|
.attr("y1", function(d) { |
|
return heightScale(d.name) + heightScale.rangeBand()/2; |
|
}) |
|
.attr("x2", function(d) { |
|
return margin.left + widthScale(+d.year2015); |
|
|
|
}) |
|
.attr("y2", function(d) { |
|
return heightScale(d.name) + heightScale.rangeBand()/2; |
|
}); |
|
|
|
// Make the dotted lines between the dots |
|
|
|
var linesBetween = svg.selectAll("lines.between") |
|
.data(data) |
|
.enter() |
|
.append("line"); |
|
|
|
linesBetween.attr("class", "between") |
|
.attr("x1", function(d) { |
|
return margin.left + widthScale(+d.year1990); |
|
}) |
|
.attr("y1", function(d) { |
|
return heightScale(d.name) + heightScale.rangeBand()/2; |
|
}) |
|
.attr("x2", function(d) { |
|
return margin.left + widthScale(d.year2015); |
|
}) |
|
.attr("y2", function(d) { |
|
return heightScale(d.name) + heightScale.rangeBand()/2; |
|
}) |
|
.attr("stroke-dasharray", "5,5") |
|
.attr("stroke-width", function(d, i) { |
|
if (i == 7) { |
|
return "1"; |
|
} else { |
|
return "0.5"; |
|
} |
|
}); |
|
|
|
|
|
// Make the dots for 1990 |
|
|
|
var dots1990 = svg.selectAll("circle.y1990") |
|
.data(data) |
|
.enter() |
|
.append("circle"); |
|
|
|
dots1990 |
|
.attr("class", "y1990") |
|
.attr("cx", function(d) { |
|
return margin.left + widthScale(+d.year1990); |
|
}) |
|
.attr("r", heightScale.rangeBand()/2) |
|
.attr("cy", function(d) { |
|
return heightScale(d.name) + heightScale.rangeBand()/2; |
|
}) |
|
.style("stroke", function(d){ |
|
if (d.name === "The World") { |
|
return "black"; |
|
} |
|
}) |
|
.style("fill", function(d){ |
|
if (d.name === "The World") { |
|
return "darkorange"; |
|
} |
|
}) |
|
.append("title") |
|
.text(function(d) { |
|
return d.name + " in 1990: " + d.year1990 + "%"; |
|
}); |
|
|
|
// Make the dots for 2015 |
|
|
|
var dots2015 = svg.selectAll("circle.y2015") |
|
.data(data) |
|
.enter() |
|
.append("circle"); |
|
|
|
dots2015 |
|
.attr("class", "y2015") |
|
.attr("cx", function(d) { |
|
return margin.left + widthScale(+d.year2015); |
|
}) |
|
.attr("r", heightScale.rangeBand()/2) |
|
.attr("cy", function(d) { |
|
return heightScale(d.name) + heightScale.rangeBand()/2; |
|
}) |
|
.style("stroke", function(d){ |
|
if (d.name === "The World") { |
|
return "black"; |
|
} |
|
}) |
|
.style("fill", function(d){ |
|
if (d.name === "The World") { |
|
return "#476BB2"; |
|
} |
|
}) |
|
.append("title") |
|
.text(function(d) { |
|
return d.name + " in 2015: " + d.year2015 + "%"; |
|
}); |
|
|
|
// add the axes |
|
|
|
svg.append("g") |
|
.attr("class", "x axis") |
|
.attr("transform", "translate(" + margin.left + "," + height + ")") |
|
.call(xAxis); |
|
|
|
svg.append("g") |
|
.attr("class", "y axis") |
|
.attr("transform", "translate(" + margin.left + ",0)") |
|
.call(yAxis); |
|
|
|
svg.append("text") |
|
.attr("class", "xlabel") |
|
.attr("transform", "translate(" + (margin.left + width / 2) + " ," + |
|
(height + margin.bottom) + ")") |
|
.style("text-anchor", "middle") |
|
.attr("dy", "12") |
|
.text("Percent"); |
|
|
|
// Style one of the Y labels bold: |
|
|
|
// a hack that works if you can unravel the selections - to style "The World" bold in the axis label, which is the 8th element: |
|
var allYAxisLabels = d3.selectAll("g.y.axis g.tick text")[0]; // un-nest array |
|
d3.select(allYAxisLabels[7]).style("font-weight", "bold"); |
|
// You could also use tick formatting to get a % sign on each axis tick |
|
|
|
}); |
|
|
|
</script> |
|
|
|
</body> |
|
</html> |
