md`# Making a Map from Fullstack Dataviz`
d3 = require("d3@5")
{
yield html`
<div id="wrapper" class="wrapper">
<div id="tooltip" class="tooltip">
<div class="tooltip-country" id="country"></div>
<div class="tooltip-value">
<span id="value"></span> population change
</div>
</div>
`;
drawMap()
}
async function drawMap() {
// Data
const countryShapes = await d3.json("https://gist.githubusercontent.com/chekos/d8fc5487eea29a631a2de2b6c405d28f/raw/58018703a3926597b39765722993d8fc9cfc5266/world-geojson.json")
const countryNameAccessor = d => d.properties["NAME"]
const countryIdAccessor = d => d.properties["ADM0_A3_IS"]
const dataset = await d3.csv("https://gist.githubusercontent.com/chekos/d8fc5487eea29a631a2de2b6c405d28f/raw/3f0a910765be727d4dd5cbd668a6b88461ee208a/data_bank_data.csv")
const metric = "Population growth (annual %)"
let metricDataByCountry = {}
dataset.forEach(d => {
if (d["Series Name"] != metric) return
metricDataByCountry[d["Country Code"]] = +d["2017 [YR2017]"]
})
// Dimensions
let dimensions = {
width: width,
margin: {
top: 10,
right: 10,
bottom: 10,
left: 10,
},
}
dimensions.boundedWidth = dimensions.width - dimensions.margin.left - dimensions.margin.right
// Canvas
const sphere = ({type: "Sphere"})
const projection = d3.geoEqualEarth()
.fitWidth(dimensions.boundedWidth, sphere)
const pathGenerator = d3.geoPath(projection)
const [[x0, y0], [x1, y1]] = pathGenerator.bounds(sphere)
dimensions.boundedHeight = y1
dimensions.height = dimensions.boundedHeight + dimensions.margin.top + dimensions.margin.bottom
// Wrapper and bounds
const wrapper = d3.select("#wrapper")
.append("svg")
.attr("width", dimensions.width)
.attr("height", dimensions.height)
const bounds = wrapper.append("g")
.style("transform", `translate(${dimensions.margin.left}px, ${dimensions.margin.top}px)`)
// Scales
const metricValues = Object.values(metricDataByCountry)
const metricValueExtent = d3.extent(metricValues)
const maxChange = d3.max([-metricValueExtent[0], metricValueExtent[1]])
const colorScale = d3.scaleLinear()
.domain([-maxChange, 0, maxChange])
.range(["indigo", "white", "darkgreen"])
// Draw data
const earth = bounds.append("path")
.attr("class", "earth")
.attr("d", pathGenerator(sphere))
const graticuleJson = d3.geoGraticule10()
const graticule = bounds.append("path")
.attr("class", "graticule")
.attr("d", pathGenerator(graticuleJson))
const countries = bounds.selectAll(".country")
.data(countryShapes.features)
.enter().append("path")
.attr("class", "country")
.attr("d", pathGenerator)
.attr("fill", d => {
const metricValue = metricDataByCountry[countryIdAccessor(d)]
if (typeof metricValue == "undefined") return "#e2e6e9"
return colorScale(metricValue)
})
// Peripherals
/// legend
const legendGroup = wrapper.append("g")
.attr("transform", `translate(${120}, ${
dimensions.width < 800
? dimensions.boundedHeight - 30
: dimensions.boundedHeight * 0.50
})`)
const legendTitle = legendGroup.append("text")
.attr("y", -23)
.attr("class", "legend-title")
.text("Population growth")
const legendByLine = legendGroup.append("text")
.attr("y", -9)
.attr("class", "legend-byline")
.text("Percent change in 2017")
/// gradient
const defs = wrapper.append("defs")
const legendGradientId = "legend-gradient"
const gradient = defs.append("linearGradient")
.attr("id", legendGradientId)
.selectAll("stop")
.data(colorScale.range())
.enter().append("stop")
.attr("stop-color", d => d)
.attr("offset", (d, i) => `${i * 100 / 2}%`) // it's ÷2 because we have 3 elements
const legendWidth = 120
const legendHeight = 16
const legendGradient = legendGroup.append("rect")
.attr("x", -legendWidth / 2)
.attr("height", legendHeight)
.attr("width", legendWidth)
.attr("fill", `url(#${legendGradientId})`)
const legendValueRight = legendGroup.append("text")
.attr("class", "legend-value")
.attr("x", legendWidth / 2 + 10)
.attr("y", legendHeight / 2)
.text(`${d3.format(".1f")(maxChange)}%`)
const legendValueLeft = legendGroup.append("text")
.attr("class", "legend-value")
.attr("x", -legendWidth / 2 - 10)
.attr("y", legendHeight / 2)
.text(`${d3.format(".1f")(-maxChange)}%`)
.style("text-anchor", "end")
/// current location
navigator.geolocation.getCurrentPosition(myPosition => {
const [x, y] = projection([
myPosition.coords.longitude,
myPosition.coords.latitude
])
const myLocation = bounds.append("circle")
.attr("class", "my-location")
.attr("cx", x)
.attr("cy", y)
.attr("r", 0)
.transition().duration(300)
.attr("r", 20)
.transition().duration(300)
.attr("r", 5)
})
// interactions
countries.on("mouseenter", onMouseEnter)
.on("mouseleave", onMouseLeave)
const tooltip = d3.select("#tooltip")
function onMouseEnter(datum) {
tooltip.style("opacity", 1)
const metricValue = metricDataByCountry[countryIdAccessor(datum)]
const [centerX, centerY] = pathGenerator.centroid(datum)
const x = centerX + dimensions.margin.left
const y = centerY + dimensions.margin.top
tooltip.select("#country")
.text(countryNameAccessor(datum))
tooltip.select("#value")
.text(`${d3.format(",.2f")(metricValue || 0)}%`)
tooltip.style("transform", `translate( calc(-50% + ${x}px), calc(-100% + ${y}px))`)
}
function onMouseLeave() {
tooltip.style("opacity", 0)
}
}
html`<style>
body {
align-items: center;
letter-spacing: -0.011em;
font-family: sans-serif;
font-size: 16px;
}
.wrapper {
position: relative;
}
.earth {
fill: #e2f1f1;
stroke: none;
}
.graticule {
stroke: #cadddd;
fill: none;
}
.my-location {
fill: #8f97db;
stroke: white;
}
.country:hover {
fill: cornflowerblue;
}
circle {
pointer-events: none;
}
.tooltip {
opacity: 0;
position: absolute;
top: -12px;
left: 0;
padding: 0.6em 1em;
background: #fff;
text-align: center;
border: 1px solid #ddd;
z-index: 10;
transition: all 0.2s ease-out;
pointer-events: none;
}
.tooltip:before {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 12px;
height: 12px;
background: white;
border: 1px solid #ddd;
border-top-color: transparent;
border-left-color: transparent;
transform: translate(-50%, 50%) rotate(45deg);
transform-origin: center center;
z-index: 10;
}
.tooltip-country {
margin-bottom: 0.2em;
font-weight: 600;
}
.tooltip-value {
font-size: 0.8em;
}
.legend-title {
fill: #576574;
text-anchor: middle;
font-weight: 900;
font-size: 0.95em;
letter-spacing: 0.01em;
}
.legend-byline {
fill: #576574;
opacity: 0.6;
text-anchor: middle;
font-size: 0.7em;
}
.legend-value {
fill: #576574;
dominant-baseline: middle;
font-size: 0.8em;
}
.legend-value:first-of-type {
text-anchor: end;
}
</style>`
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
