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;*/
opacity: 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: bold;
font-size: 14px;
fill: rgba(30,30,30,0.6);
}
.tooltip {
position: absolute;
z-index: 10;
}
.tooltip p {
font-family: "Verdana";
max-width: 210px;
font-size: 14px;
background-color: rgba(230,230,230,0.9);
border: rgba(230,230,230,1) 1px solid;
padding: 2px 7px 2px 7px;
}
span {
font-weight:bold;
color: #0099FF;
}
</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.sqrt().exponent(.35)
.range([ margin.left, width - margin.right - margin.left ]);
var yScale = d3.scale.sqrt().exponent(.35)
.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);
var tooltip = d3.select("body")
.append("div")
.attr("class", "tooltip");
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;
}));*/
xScale.domain([
d3.min(my2013, function(d) {
return +d.Total;
}) - 2,
d3.max(my2013, function (d) {
return +d.Total;
}) + 2
]);
yScale.domain([
d3.min(my2013, function(d) {
return +d.Health_exp;
}) - 5,
d3.max(my2013, function (d) {
return +d.Health_exp;
}) + 5
]);
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)");*/
.attr("fill", function(d) {
if (d.Total > 100000) {
return "rgba(222,36,20,1)";
}
else {
return "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);
});*/
circles
.on("mouseover", mouseoverFunc)
.on("mousemove", mousemoveFunc)
.on("mouseout", mouseoutFunc);
// 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.5) + " ," +
(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");
});
// add tooltip actions
function mouseoverFunc(d) {
// console.log(d);
return tooltip
.style("display", null) // this removes the display none setting from it
.html("<p>" + "<span>" + d.Country + "</span>" +
"<br>Infant mortality: " + "<span>" + d3.format(",")(d.Total) + "</span>" +
"<br>Health Expenditure: <span>$" + d3.format(",")(d.Health_exp) + "</span>" + "</p>");
}
function mousemoveFunc(d) {
//console.log("events", window.event, d3.event);
return tooltip
.style("top", (d3.event.pageY - 10) + "px" )
.style("left", (d3.event.pageX + 10) + "px");
}
function mouseoutFunc(d) {
return tooltip.style("display", "none"); // this sets it to invisible!
}
</script>
</body>
</html>
https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js