Interested in data visualization and tools for thought.
Public
Edited
Oct 19, 2022
1 fork
Importers
topoSmri = {
const response = await fetch(
"https://raw.githubusercontent.com/smartnews-smri/japan-topography/main/data/municipality/topojson/s0010/N03-21_01_210101.json"
);
return response.json();
}
objsSapporo = topoSmri.objects["N03-21_01_210101"].geometries.filter((d) => {
return d.properties["N03_003"] === "札幌市";
})
objSapporoMerged = {
let merged = topojson.mergeArcs(topoSmri, objsSapporo);
merged.properties = {
code: "01100",
name: "札幌市",
region: "石狩振興局"
};
return merged;
}
geometriesMerged = {
const objsOther = topoSmri.objects["N03-21_01_210101"].geometries
.filter((d) => {
return d.properties["N03_003"] !== "札幌市";
})
.map((d) => {
const newProps = {
code: d.properties["N03_007"],
name: d.properties["N03_004"],
region: d.properties["N03_002"]
};
d.properties = newProps;
return d;
});
return [objSapporoMerged, ...objsOther];
}
topoMerged = {
let topoMerged = JSON.parse(JSON.stringify(topoSmri));
delete topoMerged.objects["N03-21_01_210101"];
topoMerged.objects["hokkaido"] = {
type: "GeometryCollection",
geometries: geometriesMerged
};
return topoMerged;
}
topoMegedSimplified = {
const presimple = topojsonSimplify.presimplify(topoMerged);
const minWeight = topojsonSimplify.quantile(presimple, quantileValue);
return topojsonSimplify.simplify(presimple, minWeight);
}
{
const width = 640;
const height = 400;
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
const geometry = topojson.feature(
topoMegedSimplified,
topoMegedSimplified.objects["hokkaido"]
);
return geometry;
const projection = d3.geoMercator().fitExtent(
[
[0, 0],
[width, height]
],
geometry
);
const path = d3.geoPath().projection(projection);
const g = svg
.append("g")
.selectAll("path")
.data(geometry.features)
.enter()
.append("path")
.attr("d", path)
.attr("fill", (d) => {
if (d.properties.name === "札幌市") {
return "red";
} else {
return "teal";
}
})
.attr("stroke", "black")
.attr("stroke-width", "0.5px");
function zoomed(event) {
const { transform } = event;
g.attr("transform", transform);
g.attr("stroke-width", 1 / transform.k);
}
svg.call(d3.zoom().scaleExtent([1, 8]).on("zoom", zoomed));
return svg.node();
}
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.
