Interested in data visualization and tools for thought.
Published
Edited
Sep 25, 2021
{
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, height])
.style("width", "100%")
.style("height", "auto");
const path = d3.geoPath(); // i.e. projection == null
// Ocean
svg
.append("rect")
.attr("width", width)
.attr("height", height)
.attr("fill", colors.ocean);
// A group for land and borders
const g = svg.append("g").attr("transform", `translate(${translateX}, 0)`);
// Land & country border
g.append("path")
.attr("fill", colors.land)
.attr("stroke", colors.country)
.attr("stroke-width", 0.5)
.attr("d", path(topojson.feature(japan, "country"))); // same as `japan.objects.country`
// Prefectural borders
const prefecturalBorders = topojson.mesh(
japan,
japan.objects.prefectures,
(a, b) => a !== b
);
g.append("path")
.datum(prefecturalBorders)
.attr("fill", "none")
.attr("stroke", colors.prefecture)
.attr("stroke-width", 1.2)
.attr("d", path);
// Municipal borders
const municipalBorders = topojson.mesh(
japan,
japan.objects.municipalities,
(a, b) => {
return a !== b && ((a.id / 1000) | 0) === ((b.id / 1000) | 0);
}
);
g.append("path")
.datum(municipalBorders)
.attr("fill", "none")
.attr("stroke", colors.municipality)
.attr("stroke-width", 0.5)
.attr("d", path);
return svg.node();
}
{
const context = DOM.context2d(width, height);
const path = d3.geoPath(null, context); // set context here
// Ocean
context.beginPath();
context.fillStyle = colors.ocean;
context.fillRect(0, 0, width, height);
context.translate(translateX, 0);
// Land
context.beginPath();
path(topojson.mesh(japan, japan.objects.country));
context.fillStyle = colors.land;
context.fill();
context.closePath();
// Country border
context.beginPath();
path(topojson.mesh(japan, japan.objects.country));
context.strokeStyle = colors.country;
context.lineWidth = 0.5;
context.stroke();
context.closePath();
// Prefecture borders
context.beginPath();
path(topojson.mesh(japan, japan.objects.prefectures, (a, b) => a !== b));
context.strokeStyle = colors.prefecture;
context.lineWidth = 1.2;
context.stroke();
context.closePath();
// Municipality borders
context.beginPath();
path(
topojson.mesh(japan, japan.objects.municipalities, (a, b) => {
return a !== b && ((a.id / 1000) | 0) === ((b.id / 1000) | 0);
})
);
context.strokeStyle = colors.municipality;
context.lineWidth = 0.5;
context.stroke();
context.closePath();
return context.canvas;
}
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.
