xxxxxxxxxx
<html lang="en">
<head>
<meta charset="utf-8">
<title>Dot Plot</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<style type="text/css">
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700);
body {
font-family:"Open Sans" sans-serif;
}
h3 {
margin-left: 200px;
}
p {
margin-left: 200px;
font-weight: 100;
font-size: 15px;
color: gray;
}
div.y2013 {
color: rgba(218,165,105,1);
display: inline;
}
div.y2002 {
color: rgba(117,160,189,1);
display: inline;
}
svg {
background-color: white;
}
circle {
stroke-width: 1;
}
circle.y2013 {
fill: rgba(218,165,105,1);
}
circle.y2002 {
fill: rgba(117,160,189,1);
}
circle:hover {
opacity: 0.6;
}
line.grid {
stroke: #eee;
}
line.between {
stroke: black;
}
.axis path,
.axis line {
fill: none;
stroke: rgba(30,30,30,0.5);
shape-rendering: crispEdges;
}
.axis text {
font-family: "Open Sans", sans-serif;
font-weight: 100;
font-size: 13px;
}
.xlabel {
font-family: "Open Sans", sans-serif;
font-weight: 100;
font-size: 14px;
color: gray;
}
</style>
</head>
<body>
<h3>Infant mortality under 5 years-old in South America, <div class="y2002">2002</div> versus <div class="y2013">2013</div></h3>
<p>Source: World Bank, 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: 50, left: 260};
var width = fullwidth - margin.left - margin.right,
height = fullheight - margin.top - margin.bottom;
var widthScale = d3.scale.linear()
.range([ 0, width]);
var heightScale = d3.scale.ordinal()
.rangeRoundBands([ margin.top, height], 0.6);
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("total_rate.csv", function(error, data) {
if (error) {
console.log("error reading file");
}
data.sort(function(a, b) {
return d3.descending(b.Country, a.Country);
});
// in this case, i know it's out of 100 because it's percents.
widthScale.domain([0, 75]);
// js map: will make a new array out of all the d.name fields
heightScale.domain(data.map(function(d) { return d.Country; } ));
// 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.Country) + heightScale.rangeBand()/2;
})
.attr("x2", function(d) {
return margin.left + widthScale(+d.RateYear2013);
})
.attr("y2", function(d) {
return heightScale(d.Country) + 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.RateYear2002);
})
.attr("y1", function(d) {
return heightScale(d.Country) + heightScale.rangeBand()/2;
})
.attr("x2", function(d) {
return margin.left + widthScale(d.RateYear2013);
})
.attr("y2", function(d) {
return heightScale(d.Country) + heightScale.rangeBand()/2;
})
.attr("stroke-dasharray", "5,5")
.attr("stroke-width", function(d, i) {
if (i == 1) {
return "1";
} else {
return "0.5";
}
});
// Make the dots for 1990
var dots2002 = svg.selectAll("circle.y2002")
.data(data)
.enter()
.append("circle");
dots2002
.attr("class", "y2002")
.attr("cx", function(d) {
return margin.left + widthScale(+d.RateYear2002);
})
.attr("r", heightScale.rangeBand()/2)
.attr("cy", function(d) {
return heightScale(d.Country) + heightScale.rangeBand()/2;
})
.style("stroke", function(d){
if (d.Country === "Bolivia") {
return "black";
}
})
.style("fill", function(d){
if (d.Country === "Bolivia") {
return "#597B95";
}
})
.append("title")
.text(function(d) {
return d.Country + ", in 2002, had a infant mortality rate of: " + d.RateYear2002;
});
// Make the dots for 2015
var dots2013 = svg.selectAll("circle.y2013")
.data(data)
.enter()
.append("circle");
dots2013
.attr("class", "y2013")
.attr("cx", function(d) {
return margin.left + widthScale(+d.RateYear2013);
})
.attr("r", heightScale.rangeBand()/2)
.attr("cy", function(d) {
return heightScale(d.Country) + heightScale.rangeBand()/2;
})
.style("stroke", function(d){
if (d.Country === "Bolivia") {
return "black";
}
})
.style("fill", function(d){
if (d.Country === "Bolivia") {
return "#B97F3C";
}
})
.append("title")
.text(function(d) {
return d.Country + ", in 2013, had a infant mortality rate of: " + d.RateYear2013;
});
// 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", "13")
.text("Under 5 years-old mortality rate");
// 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[1]).style("font-weight", "bold");
// You could also use tick formatting to get a % sign on each axis tick
});
</script>
</body>
</html>
https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js