|
<!DOCTYPE html> |
|
<html lang="en"> |
|
<head> |
|
<meta charset="utf-8"> |
|
<title>Nobel Laureates</title> |
|
<script type="text/javascript" src="https://d3js.org/d3.v3.js"></script> |
|
<style type="text/css"> |
|
|
|
|
|
|
|
body { |
|
background-color: gray; |
|
font-family: Helvetica, Arial, sans-serif; |
|
} |
|
|
|
svg { |
|
background-color: white; |
|
} |
|
|
|
#tooltip { |
|
position: absolute; |
|
top: 0; |
|
left: 0; |
|
z-index: 10; |
|
margin: 0; |
|
padding: 10px; |
|
width: auto; |
|
color: white; |
|
font-family: sans-serif; |
|
font-size: 10px; |
|
text-align: left; |
|
background-color: rgba(0, 0, 0, 0.75); |
|
opacity: 0; |
|
pointer-events: none; |
|
} |
|
|
|
#tooltip p { |
|
margin: 0; |
|
|
|
} |
|
|
|
#tooltip p.value { |
|
font-weight: light; |
|
} |
|
|
|
</style> |
|
</head> |
|
<body> |
|
|
|
<!-- New HTML div functions as our tooltip --> |
|
<div id="tooltip"> |
|
<p class="name"></p> |
|
<p class="value"></p> |
|
</div> |
|
|
|
<script type="text/javascript"> |
|
|
|
//Globals for use later |
|
var countries; |
|
var nobels; |
|
|
|
//Width and height |
|
var w = 1000; |
|
var h = 600; |
|
|
|
//Define map projection |
|
var projection = d3.geo.mercator() |
|
.center([ 10, 30 ]) //changing the values will change location of the center. First value horizontal, second value vertical (usual cartesian positions). |
|
.translate([ w/2, h/2 ]) |
|
.scale([ w/6 ]); |
|
|
|
//Define path generator |
|
var path = d3.geo.path() |
|
.projection(projection); |
|
|
|
//Configure zoom behavior |
|
var zoom = d3.behavior.zoom() |
|
.translate(projection.translate()) |
|
.scale(projection.scale()) |
|
//Defines the on("zoom") event (what to do on double-click or mousewheel roll). |
|
.on("zoom", function(d) { |
|
|
|
//Get the translate and scale values from this event |
|
var t = d3.event.translate; |
|
var s = d3.event.scale; |
|
|
|
//Update the zoom and projection objects with these |
|
zoom.translate(t); |
|
projection.translate(t).scale(s); |
|
|
|
//Recalculate countries |
|
countries.attr("d", path); |
|
|
|
//Recalculate nobels |
|
nobels.attr("cx", function(d) { |
|
return projection([d.longitude, d.latitude])[0]; |
|
}) |
|
.attr("cy", function(d) { |
|
return projection([d.longitude, d.latitude])[1]; |
|
}); |
|
}); |
|
|
|
//Create SVG |
|
var svg = d3.select("body") |
|
.append("svg") |
|
.attr("width", w) |
|
.attr("height", h); |
|
|
|
//Load in GeoJSON data |
|
d3.json("mapshaper_output.json", function(json) { |
|
|
|
//Bind data and create one path per GeoJSON feature |
|
// svg.selectAll("path") |
|
// .data(json.features) |
|
// .enter() |
|
// .append("path") |
|
// .attr("d", path) |
|
// .style("fill", "#9ee0e5"); |
|
|
|
//Create a group to contain all the paths, to catch |
|
//zoom events, even when the mouse is positioned over |
|
//the ocean. |
|
var countriesGroup = svg.append("g") |
|
.attr("id", "countriesGroup") |
|
.call(zoom); //Bind zoom listener to the countries group |
|
|
|
//Create a rectangle in the background. |
|
//This is purely to ensure this group fills the whole |
|
//SVG image, so mousewheel events are caught. |
|
countriesGroup.append("rect") |
|
.attr("x", 0) |
|
.attr("y", 0) |
|
.attr("width", w) |
|
.attr("height", h) |
|
.style("fill", "#9ee0e5"); //Changes the color of the ocean |
|
|
|
//Bind data and create one path per GeoJSON feature |
|
countries = countriesGroup.selectAll("path") |
|
.data(json.features) |
|
.enter() |
|
.append("path") |
|
.attr("d", path) |
|
.style("fill", "#fffeed"); |
|
|
|
|
|
//Load in nobels data |
|
d3.csv("nobellist.csv", function(data) { |
|
|
|
// scale the radius |
|
var r = d3.scale.sqrt().range([3, 15]).domain([1, d3.max(data, function(d) {return d.Total;})]); |
|
|
|
//Create a circle for each city |
|
nobels = svg.selectAll("circle") |
|
.data(data) |
|
.enter() |
|
.append("circle") |
|
.attr("cx", function(d) { |
|
return projection([d.longitude, d.latitude])[0]; |
|
}) |
|
.attr("cy", function(d) { |
|
return projection([d.longitude, d.latitude])[1]; |
|
}) |
|
.attr("r", function(d) { |
|
//Use r scale: |
|
return r(d.Total); |
|
}) |
|
.style("fill", "blue") |
|
.style("opacity", 1) |
|
// |
|
//Added tooltip behavior: |
|
// |
|
.on("mouseover", function(d) { |
|
|
|
//Fill yellow to highlight |
|
d3.select(this) |
|
.style("fill", "red"); |
|
|
|
//Position the tooltip <div> and set its content |
|
var x = d3.event.pageX; |
|
var y = d3.event.pageY - 40; |
|
|
|
//Populate name in tooltip |
|
d3.select("#tooltip .name") |
|
.text(d.Organization_Country); |
|
|
|
//Populate value in tooltip |
|
d3.select("#tooltip .value") |
|
.text("Total Nobel Laureates: " + d.Total); |
|
|
|
//Position tooltip and make visible |
|
d3.select("#tooltip") |
|
.style("left", x + "px") |
|
.style("top", y + "px") |
|
.style("opacity", 1) |
|
}) |
|
.on("mouseout", function() { |
|
|
|
//Restore original fill |
|
d3.select(this) |
|
.style("fill", "blue"); |
|
|
|
//Hide the tooltip |
|
d3.select("#tooltip") |
|
.style("opacity", 0); |
|
}); |
|
}); |
|
}); |
|
|
|
</script> |
|
</body> |
|
</html> |
