map = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
const mapLayer = svg.append("g");
svg
.append("rect")
.attr("width", width)
.attr("height", height)
.attr("fill", "rgba(0, 0, 0, 0.0)");
mapLayer.attr("transform", `scale(${scale}, ${scale})`);
function drawWardsCities(offsetX, offsetY, strokeColor, i) {
mapLayer
.append("g")
.append("path")
.attr("fill", strokeColor)
.attr("stroke", strokeColor)
.attr("stroke-width", 0.5)
.attr("d", path(tokyoOutline));
}
function drawArea(strokeColor, fillColor, feature) {
const center = path.centroid(feature);
mapLayer
.append("g")
.append("path")
.attr("fill", fillColor)
.attr("stroke", strokeColor)
.attr("stroke-width", 0.2)
.attr(
"title",
`${feature.properties.CITY_NAME} ${feature.properties.S_NAME}`
)
.attr("d", path(feature));
// mapLayer
// .append("circle")
// .attr("fill", strokeColor)
// .attr(
// "title",
// `${feature.properties.CITY_NAME} ${feature.properties.S_NAME}`
// )
// .attr("cx", center[0])
// .attr("cy", center[1])
// .attr("r", 0.2);
}
const colors = [];
const wardBorderColor = d3.color("#000000");
drawWardsCities(0, 0, wardBorderColor, 0);
const featureBorderColor = "rgba(0, 0, 0, 0.5)";
const wardCities = Object.keys(tokyoAreasByWard);
let i = 0;
for (let ward of wardCities) {
let featureCollection = tokyoAreasByWard[ward];
let features = featureCollection.features;
for (let feature of features) {
const featureFillColor = d3
.color("#999999")
.copy({ opacity: Math.random() });
//drawArea(featureBorderColor, featureFillColor, feature);
}
i += 1;
}
// Zooming.
svg.call(zoomer);
zoomer.on("zoom", zoomed);
function zoomed(event) {
const { transform } = event;
mapLayer.attr("transform", transform);
}
// Mouse events
return svg;
}
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.
