Published
Edited
Apr 9, 2021
4 forks
10 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
worldmap = {
const svg = d3.create("svg")
.style("display", "block")
.attr("viewBox", [0, 0, width, height])
.attr("transform", "translate(0, 20) scale(1.15)"); // move down, make bigger

const defs = svg.append("defs");

// set up outline, clipping and background of map
defs.append("path")
.attr("id", "outline")
.attr("d", path(outline));

defs.append("clipPath")
.attr("id", "clip")
.append("use")
.attr("xlink:href", new URL("#outline", location));

const g = svg.append("g")
.attr("clip-path", `url(${new URL("#clip", location)})`);

g.append("use")
.attr("xlink:href", new URL("#outline", location))
.attr("fill", "white");

// fill entities according to values
g.append("g")
.selectAll("path")
.data(countries.features)
.join("path")
.filter(function(d) { return d.properties.name != "Antarctica"; })
.attr("fill", d => color(yearData.get(d.properties.name)))
.attr("d", path)
// tooltip
.append("title")
.text(d => `${d.properties.name}
${yearData.has(d.properties.name) ? yearData.get(d.properties.name) : "N/A"}`);

// draw borders
g.append("path")
.datum(topojson.mesh(world, world.objects.countries, (a, b) => a !== b))
.attr("fill", "none")
.attr("stroke", "white")
.attr("stroke-linejoin", "round")
.attr("d", path);

return svg.node();
}
Insert cell
Insert cell
Insert cell
Insert cell
yearMean = formatMean(d3.mean(yearData.values()))
Insert cell
formatMean = d3.format(",.2f");
Insert cell
data = new Map(
[...d3.rollup(entries, v => d3.sum(v, d => d.unemployment), d => d.year, d => d.entity)]
)
Insert cell
Insert cell
entries = d3.csvParse(await FileAttachment("unemployment-rate.csv").text(), function(d) {
return {
year: +d.year, // use new Date(+d.Year, 0, 1) to convert "year" to Date
entity: rename.get(d.entity) || d.entity,
code: d.code,
unemployment: +d.unemployment
};
});
Insert cell
Insert cell
Insert cell
color = d3.scaleSequential()
.domain(dataDomain)
.interpolator(colorInterpolator)
.unknown("#ccc")
Insert cell
projection = d3.geoEqualEarth() // Use an equal-area projection for choropleth maps
Insert cell
path = d3.geoPath(projection)
Insert cell
width = 975
Insert cell
height = {
const [[x0, y0], [x1, y1]] = d3.geoPath(projection.fitWidth(width, outline)).bounds(outline);
const dy = Math.ceil(y1 - y0), l = Math.min(Math.ceil(x1 - x0), dy);
projection.scale(projection.scale() * (l - 1) / l).precision(0.2);
return dy;
}
Insert cell
outline = ({type: "Sphere"})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more