function drawMap(
geo,
{
dataAccessor, // Provide data for each feature in the GeoJSON
areaAccessor, // Provide values corresponding to the area of the bubble
valueAccessor, // Provide value, based on which the shape is colored
titleAccessor = (d) => {},
width = 640,
height = 400,
margin = 10,
projection = d3.geoTransverseMercator().rotate([-80, 0, 0]),
scale = d3.scaleQuantize,
range = colorScheme[5],
domain = [0, 1],
nice = true, // Apply nice, if available
maxRadius = 25,
unknown = "#f4f4f4", // fill color for missing data
stroke = "#fff", // stroke color for borders
strokeWidth = 0.5, // stroke width for borders
strokeOpacity, // stroke width for borders
strokeLinecap = "round", // stroke line cap for borders
strokeLinejoin = "round", // stroke line join for borders
drawUnderlay = false,
underlayFill = "#fff",
underlayStroke = "#999",
colorLegendTitle,
tickFormat = ".2r",
tickValues,
legendWidth = 200,
areaTickUnit,
backgroundFill = "white",
debug
} = {}
) {
let features = geo.features.slice();
features = features.map((f) => ({ ...f, geoCentroid: d3.geoCentroid(f) }));
const D = features.map(dataAccessor);
const S = D.map(areaAccessor);
const V = D.map(valueAccessor);
const T = D.map(titleAccessor);
// Compute default domains.
domain = domain == null ? d3.extent(V) : domain;
// Construct scales
let color = scale(domain, range);
if (nice && typeof color.nice === "function") color.nice();
if (color.unknown && unknown !== undefined) color.unknown(unknown);
const radiusDomain = [0, d3.max(S)];
const radius = d3.scaleSqrt().domain(radiusDomain).range([0, maxRadius]);
projection = projection.scale === undefined ? projection() : projection;
// Adding margin to chart
// https://github.com/d3/d3-geo/blob/main/README.md#projection_fitSize
projection.fitExtent(
[
[margin, margin],
[width - margin, height - margin]
],
geo
);
const path = d3.geoPath(projection);
// Set intial positions for applying force
features = features.map((f, i) => {
const centroid = projection(f.geoCentroid);
const [x, y] = centroid;
const r = S[i] == null ? 0 : radius(S[i]);
const dx = 15;
const transitionRange = [
CSMath.inverseLerp(0, width, Math.max(0, x - dx)),
CSMath.inverseLerp(0, width, Math.min(width, x + dx))
];
return {
...f,
centroid,
x,
y,
radius: r,
transitionRange
};
});
features = applyForce(features, { width, height, debug });
// Set path interpolator
features = features.map((f, i) => {
const basePath = path(f);
const interpolater = flubber.toCircle(basePath, f.x, f.y, f.radius);
return {
...f,
interpolater
};
});
const svg = DOM.svg(width, height);
d3.select(svg).style("background", backgroundFill);
const plot = d3.select(svg).append("g").attr("class", "plot");
if (drawUnderlay) {
plot
.append("path")
.datum(geo)
.attr("class", "underlay")
.attr("stroke", underlayStroke)
.attr("stroke-linecap", strokeLinecap)
.attr("stroke-linejoin", strokeLinejoin)
.attr("stroke-width", strokeWidth)
.attr("stroke-opacity", strokeOpacity)
.attr("fill", underlayFill)
.attr("d", path);
}
const shapes = plot
.selectAll(".boundary")
.data(features)
.join("path")
.attr("class", "boundary")
.attr("stroke", stroke)
.attr("stroke-linecap", strokeLinecap)
.attr("stroke-linejoin", strokeLinejoin)
.attr("stroke-width", strokeWidth)
.attr("stroke-opacity", strokeOpacity)
.attr("fill", (d, i) => color(V[i]));
shapes.append("title").text((d, i) => T[i]);
// Add legends
const legend = d3
.select(svg)
.append("g")
.attr("class", "legend")
.attr("transform", `translate(${width - legendWidth - margin},${margin})`);
const colorKey = Legend(color, {
title: colorLegendTitle,
tickFormat,
tickValues,
width: legendWidth
});
const radiusKey = circleLegend({
scale: radius,
marginTop: 0,
marginBottom: 0,
stroke: "#666",
strokeWidth: 0.75,
// tickFormat: radius.tickFormat(4, "s"),
tickFormat: (d, i, g) => {
const str = radius.tickFormat(4, "s")(d);
return i === g.length - 1 && areaTickUnit
? `${str} ${areaTickUnit}`
: str;
},
tickFont: "10px sans-serif",
tickStrokeWidth: 0.75,
tickStroke: "#666"
});
legend.append("g").node().appendChild(colorKey);
legend
.append("g")
.attr("transform", `translate(${legendWidth / 4},70)`)
.node()
.appendChild(radiusKey);
if (debug) {
const debugCanvas = d3.select(svg).append("g").attr("class", "debug");
debugCanvas
.selectAll(".centroid")
.data(features)
.join("circle")
.attr("class", "centroid")
.attr("r", 2)
.attr("fill", "#f0f")
.attr("cx", (d) => d.centroid[0])
.attr("cy", (d) => d.centroid[1]);
}
function draw(t = 0) {
const T = eases.sineInOut(t);
shapes.each(function (d, i) {
const shape = d3.select(this);
const { interpolater, transitionRange } = d;
const shapeT = CSMath.clamp01(CSMath.inverseLerp(...transitionRange, T));
shape.attr("d", () => interpolater(eases.sineInOut(shapeT)));
});
}
return Object.assign(svg, { features, draw });
}
function getMuncipalDataByName(name) {
let result = byMuncipality.find((m) => m.Municipality?.startsWith(name));
if (!result) {
const altName = getAlternateName(name);
result = byMuncipality.find((m) => m.Municipality?.startsWith(altName));
}
return result;
}
// Based on https://observablehq.com/@karimdouieb/try-to-impeach-this-challenge-accepted#applySimulation
function applyForce(
dataNodes,
{ width, height, nodePadding = .25, maxTries = 200, debug = false } = {}
) {
let nodes = dataNodes.slice();
// prettier-ignore
const simulation = d3.forceSimulation(nodes)
.force("cx", d3.forceX().x(d => width / 2).strength(0.02))
.force("cy", d3.forceY().y(d => height / 2).strength(0.02))
.force("x", d3.forceX().x(d => d.centroid ? d.centroid[0] : 0).strength(0.3))
.force("y", d3.forceY().y(d => d.centroid ? d.centroid[1] : 0).strength(0.3))
.force("charge", d3.forceManyBody().strength(-1))
.force("collide", d3.forceCollide().radius(d => d.radius + nodePadding).strength(1))
.stop()
let i = 0;
while (simulation.alpha() > 0.01 && i < maxTries) {
simulation.tick();
i++;
debug && console.log(`${Math.round((100 * i) / maxTries)}%`);
}
return simulation.nodes();
}
function getAlternateName(name) {
let result;
for (const [k, v] of alternateMunicipalityNames) {
if (v.startsWith(name)) {
result = k;
break;
}
}
return result;
}
formatPercentage = d3.format(".2%")
formatNumber = d3.format(",")
// To apply base styles when the notebook is downloaded/exported
substratum({invalidation})
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.