Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Week 6: Scatter tooltips
Country None Primary Secondary or higher Average U5MR
Afghanistan 19.9 27.2 37.7 28.2666666666667 97.3
Azerbaijan 51.4 25 51.4 42.6 34.2
Bangladesh 61.4 62.4 60.3 61.3666666666667 41.1
Benin 11.2 14.9 20.9 15.6666666666667 85.3
Bhutan 67.5 66.2 57.7 63.8 36.2
Bolivia 42 56.1 68.9 55.6666666666667 39.1
Brazil 64.1 71.9 81.8 72.6 13.7
Burkina-Faso 11.8 27 50.5 29.7666666666667 97.6
Burundi 17.5 24.7 41.1 27.7666666666667 82.9
Cambodia 42.5 50.2 57.3 50 37.9
Cameroon 4.1 21.6 40.2 21.9666666666667 94.5
Central African Republic 7.1 15.4 32.8 18.4333333333333 139.2
Chad 1.1 5 25.1 10.4 147.5
Colombia 71.8 80.3 78.7 76.9333333333333 16.9
Comoros 12.9 19.1 26.8 19.6 77.9
Congo Democratic Republic 11.1 15.7 30.2 19 118.5
Congo Republic 33.6 43.1 46.6 41.1 49.1
Costa Rica 58.5 76.2 76.7 70.4666666666667 9.6
Côte-d’Ivoire 13 25.8 30.3 23.0333333333333 100
Djibouti 12.6 20.8 33 22.1333333333333 69.6
Dominican Republic 69.8 75.2 71.2 72.0666666666667 28.1
Egypt 57.7 61.8 61.4 60.3 21.8
Ethiopia 22.2 35.7 62.2 40.0333333333333 64.4
Gabon 14 21.8 36.3 24.0333333333333 56.1
Ghana 26.1 34.3 39.6 33.3333333333333 78.4
Guatemala 19.4 38.4 68 41.9333333333333 31
Guinea 4.7 7.6 10.5 7.6 100.7
Guinea-Bissau 6.2 17.2 30.6 18 123.9
Guyana 21.9 40.4 43.8 35.3666666666667 36.6
Haiti 29.7 34.5 37.2 33.8 72.8
Honduras 64.2 73.2 74.5 70.6333333333333 22.2
India 52.1 60.1 60.2 57.4666666666667 52.7
Indonesia 43.4 61.8 63.1 56.1 29.3
Iraq 46.1 51.3 57.2 51.5333333333333 34
Jordan 45.6 53.4 62.2 53.7333333333333 18.7
Kenya 14.1 44.2 59.8 39.3666666666667 70.7
Lao PDR 38 54.3 52.1 48.1333333333333 71.4
Lesotho 32.1 40.2 55.7 42.6666666666667 98
Liberia 15.3 19.7 28.6 21.2 71.1
Madagascar 20.5 38.9 55.8 38.4 56
Malawi 40.3 46 53.2 46.5 67.9
Maldives 43.6 36.9 27.9 36.1333333333333 9.9
Mali 8.1 13.4 27.5 16.3333333333333 122.7
Mauritania 4.4 11.5 21.9 12.6 90.1
Mongolia 47 57.8 55 53.2666666666667 31.8
Morocco 61.2 62.9 68.8 64.3 30.4
Mozambique 5.5 11.6 31.7 16.2666666666667 87.2
Namibia 33.7 46.1 64.1 47.9666666666667 49.8
Nepal 52.8 47 46.8 48.8666666666667 39.7
Nicaragua 52.1 71.7 73 65.6 23.5
Niger 12 20.5 32.3 21.6 104.2
Nigeria 2.7 19.9 30.9 17.8333333333333 117.4
Pakistan 30.2 40.8 43 38 85.5
Peru 65.6 75.1 76.2 72.3 16.7
Philippines 29.3 52.9 56.2 46.1333333333333 29.9
Rwanda 43.3 52.6 60.3 52.0666666666667 52
Sao Tome and Principe 18.3 40.7 38 32.3333333333333 51
Senegal 12.8 26.9 32.8 24.1666666666667 55.3
Sierra Leone 14.3 19.3 26 19.8666666666667 160.6
Somalia 13.6 15.7 22.6 17.3 145.6
South Africa 33.2 47.2 64.6 48.3333333333333 43.9
Suriname 19.2 42.4 52 37.8666666666667 22.8
Swaziland 54.5 59.1 69.5 61.0333333333333 80
Syrian Arab Republic 45.2 57.5 64.5 55.7333333333333 14.6
Tajikistan 23.9 18.9 28.4 23.7333333333333 47.7
Thailand 63.8 79.5 73.6 72.3 13.1
Timor-Leste 15.9 25.8 26.3 22.6666666666667 54.6
Togo 11.3 17.3 20 16.2 84.7
Turkey 55.9 72.9 75.9 68.2333333333333 19.2
Uganda 17.9 28 44.2 30.0333333333333 66.1
Vanuatu 20.8 38.8 42.1 33.9 16.9
Vietnam 74.7 80.7 77.2 77.5333333333333 23.8
Yemen 23.1 34.2 42.1 33.1333333333333 51.3
Zambia 35 37.8 50.6 41.1333333333333 87.4
Zimbabwe 43 54.5 61.1 52.8666666666667 88.5
<!DOCTYPE html>
<!-- A modified example from Scott Murray's Knight d3 course. -->
<html lang="en">
<head>
<meta charset="utf-8">
<title>Scatter Plot</title>
<link href='https://fonts.googleapis.com/css?family=Roboto:400, 300, 300italic,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="main.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
</head>
<body>
<h1 class="header">Contraceptive Use vs. Under-5 Mortality Rate</h1>
<p class="header">The dots show the contraceptive (birth control) use in 75 low-income countries against the under-5 mortality rate in those countries. There appears to be an inverse correlation between the two: as the use of birth control decreases, the under-5 mortality rate increases. The two countries shown in red, Costa Rica and Sierra Leone, the countries with the lowest and highest under-5 mortality rates in the dataset, were highlighted to show this relationship.</p>
<p class="header">Roll over the points to view details of the data.</p>
<p id="sources" class="header">Sources: <a href="http://www.who.int/">World Health Organization</a>; <a href="http://www.worldbank.org/">World Bank</a>. Only countries with complete data are represented.</p>
<script type="text/javascript" src="scatter.js"></script>
</body>
</html>
body {
box-sizing: border-box;
}
svg {
/* padding: 1em;*/
background-color: rgb(255, 255, 255);
}
svg rect:hover {
opacity: .3;
}
svg circle:hover {
opacity: .3;
}
svg g {
fill: #ACACAC;
}
svg g text.label,
svg g text.ylabel {
fill: #2A2A2A;
}
svg {
background-color: white;
}
.axis path,
.axis line {
fill: none;
stroke: #D3D3D3;
stroke-width: 1px;
}
.line {
stroke: #FF9900;
fill: none;
stroke-opacity: 25%;
stroke-width: 1px;
}
.ssAfrica {
stroke: red;
stroke-opacity: 50%;
}
.unfocused {
stroke-opacity: 25%;
}
.focused {
stroke-width: 2px;
stroke-opacity: 100%;
}
.MDG {
stroke: #2A2A2A;
fill: none;
stroke-opacity: 100%;
stroke-width: 1px;
}
.axis text,
.aside {
font-family: sans-serif;
font-size: 11px;
}
.header {
width: 70%;
margin-left: 16px;
}
h1 {
font-family: 'Roboto', sans-serif;
font-size: 1.75em;
margin-top: 1em;
font-weight: 700;
color: #0099FF;
text-transform: uppercase;
}
h2 {
font-family: 'Roboto', sans-serif;
text-align: justify;
line-height: 1.25em;
font-weight: 700;
font-size: 1em;
}
p {
font-family: 'Lora', serif;
font-size: 15px;
line-height: 1.25em;
text-align: justify;
}
#sources {
font-size: 12px;
font-style: italic;
color: rgb(0, 0, 0);
font-style: italic;
}
a {
color: #0099FF;
text-decoration: none;
}
a:hover {
color: rgb(255, 0, 153);
}
.sans {
font-family: sans-serif;
}
.orange {
color: #FF9900;
}
.blue {
color: #0099FF;
}
.red {
color: red;
}
.tooltip {
position: absolute;
z-index: 10;
}
.tooltip p {
background-color: rgba(255, 255, 255, .8);
padding: .5em 1em;
font-size: 12px;
line-height: 17px;
color: black;
}
.tooltipHeader {
font-weight: 700;
font-size: 12.5px;
}
var margin = {
top: 50,
right: 10,
bottom: 50,
left: 50
};
var height = $(window).height() * .7;
var width = $(window).width() * .75;
console.log("width = " + width);
var dotRadius = 5;
var xScale = d3.scale.linear()
.range([margin.left, width - margin.left - margin.right]); //--- range is what we are mapping TO, so we want it to be the chart area
var yScale = d3.scale.linear()
.range([height - margin.bottom, margin.top]); //--- range is what we are mapping TO, so we want it to be the chart area
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.ticks(15);
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");
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("contraceptive-mortality-select-countries-chart.csv", function (data) {
xScale.domain([0, d3.max(data, function (d) {
return +d.U5MR;
})]);
yScale.domain([0, d3.max(data, function (d) {
return +d.Average;
})]);
var circles = svg.selectAll("circle")
.data(data)
.enter()
.append("circle");
circles.attr("class", "dots");
// class to the circles - ".dots".
circles.attr("cx", function (d) {
return xScale(+d.U5MR);
})
.attr("cy", function (d) {
return yScale(+d.Average);
})
.attr("r", dotRadius) // you might want to increase your dotRadius
.attr("fill", function(d) {
if (d.Country === "Sierra Leone" || d.Country === "Costa Rica") {
return "#FF0000"
} else {
return "#0099FF"}
})
.attr("opacity", ".6")
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)
.append("text")
.attr("x", width - margin.right - margin.left)
.attr("y", -20)
.attr("dy", "1em")
.style("text-anchor", "end")
.attr("class", "label")
.text("Mortality Rate");
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + (margin.left) + ",0)")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("x", -50)
.attr("y", 5)
.attr("dy", "1em")
.style("text-anchor", "end")
.attr("class", "label")
.text("avg. Contraceptive Use (%)");
function mouseoverFunc(d) {
console.log(d);
return tooltip
.style("display", null) // this removes the display none setting from it
.html("<p class='sans'><span class='tooltipHeader'>" + d.Country + "</span><br>Avg. Contraceptive Use: " + d3.format(".2f")(d.Average) + "%" + "<br>Under-5 Mortality Rate: " + d.U5MR + "</p>");
}
function mousemoveFunc(d) {
console.log("events", window.event, d3.event);
return tooltip
.style("top", (d3.event.pageY - 5) + "px" )
.style("left", (d3.event.pageX + 15) + "px");
}
function mouseoutFunc(d) {
return tooltip.style("display", "none"); // this sets it to invisible!
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.