xxxxxxxxxx
<!-- A modified example from Scott Murray's Knight d3 course. -->
<html lang="en">
<head>
<meta charset="utf-8">
<title>Infant Mortality and Health Expenditure</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 {
font-family: "Verdana", sans-serif;
color: rgba(30,30,30,0.9);
}
/*svg {
background-color: rgba(235, 235, 235, 0.3);
}*/
#text {
max-width: 900px;
margin: 0 auto;
}
h1{
font-family: "Verdana", sans-serif;
font-size: 40px;
text-transform: uppercase;
font-weight: 700;
color: #0099FF;
margin-top: 40px;
}
p {
width: 800px;
font-family: "Verdana";
font-size: 17px;
font-weight: 100;
line-height: 1.7;
}
#source p {
font-size: 15px;
}
a, a:visited {
text-decoration: none;
color: #0099FF;
}
a:hover {
color: black;
}
/*circle.dots {
fill: steelblue;
}*/
circle:hover {
/*stroke-width: 12;*/
fill: rgba(255,0,0,0.5);
}
.axis path,
.axis line {
fill: none;
stroke: rgba(30,30,30,0.5);
shape-rendering: crispEdges;
}
.axis text {
font-family: "Verdana", sans-serif;
font-weight: 100;
font-size: 13px;
fill: rgba(30,30,30,0.8);
}
.label {
font-family: "Verdana", sans-serif;
font-weight: 300;
font-size: 14px;
fill: rgba(30,30,30,0.8);
}
</style>
</head>
<body>
<div id="text">
<h1>Infant Mortality vs. Health Expenditure in 2013</h1>
<p>This scatterplot shows infant mortality by country in 2013, among children under 5 years-old, compared to the health expedenditure per capita.</p>
<p>According to the World Bank, the health expenditure "is the sum of public and private health expenditures as a ratio of total population. It covers the provision of health services (preventive and curative), family planning activities, nutrition activities, and emergency aid designated for health."
<div id="source">
<p>Source: <a href="https://www.who.int/gho/en/">Global Health Observatory (GHO)</a> and <a href="https://data.worldbank.org/">World Bank</a>.</p>
</div>
</div>
<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 = 900;
var height = 600;
var margin = {top: 50, right: 10, bottom: 80, left: 180};
var dotRadius = 5;
var xScale = d3.scale.linear()
.range([ margin.left, width - margin.right - margin.left ]);
var yScale = d3.scale.linear()
.range([ height - margin.bottom, margin.top]);
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(5);
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.ticks(5);
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
d3.csv("deaths_04yearsold.csv", function(data) {
my2013 =[];
data.forEach(function(d){
if(d.Year === "Year 2013") {
my2013.push(d);
}
});
xScale.domain(
d3.extent(my2013, function(d) {
return +d.Total;
}));
yScale.domain(
d3.extent(my2013, function(d) {
return +d.Health_exp;
}));
var circles = svg.selectAll("circle")
.data(my2013)
.enter()
.append("circle")
.attr("class", "dots");
circles.attr("cx", function(d) {
return xScale(+d.Total);
})
.attr("cy", function(d) {
return yScale(+d.Health_exp);
})
.attr("r", dotRadius) // you might want to increase your dotRadius
.attr("fill", "rgba(0,128,255,1)")
.append("title")
.text(function(d) {
return "In 2013 in, " + d.Country + ", the infant mortality was " + d3.format(",")(d.Total) + ". That year its health expenditure per capita was $" + d3.format(",")(d.Health_exp);
});
// 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);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + (margin.left) + ",0)")
.call(yAxis);
svg.append("text")
.attr("class", "x label")
.attr("transform", "translate(" + (margin.left + width / 3.2) + " ," +
(height / 1.3 + margin.bottom) + ")")
.style("text-anchor", "middle")
.attr("dy", "35")
.text("Infant Mortality");
svg.append("text")
.attr("class", "y label")
.attr("transform", "translate(" + (margin.right + width / 6) + " ," +
(height / 2.65 + margin.top) + ") rotate(-90)")
.style("text-anchor", "middle")
.attr("dy", "-57")
.text("Health Expenditure per Capita");
});
</script>
</body>
</html>
https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js