svg.svgN
height = 600
svg = {
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, height])
.style("background-color", "#f4f4ff");
const g = svg.append("g");
const zoomed = ({ transform }) => {
g.attr("transform", transform);
};
svg.call(
d3
.zoom()
.extent([
[0, 0],
[width, height]
])
.scaleExtent([0.3, 30])
.on("zoom", zoomed)
);
const gT = svg.append("g");
return { svgN: svg.node(), g: g, gT: gT };
}
scaleText = svg.gT
.append("text")
.attr("x", 10)
.attr("y", 40)
.attr("font-size", "25")
.attr("font-weight", "bold")
//.attr("text-shadow", "10px 10px 3px red")
{
svg.g.selectAll("*").remove();
svg.g
.append("path")
.attr("fill", "#cccca0")
.attr("stroke", "#000")
.attr("stroke-width", "0.15")
.attr("stroke-linejoin", "bevel")
.attr("d", path_);
}
{
scaleText.text("Simplification scale: 1:" + scale);
}
fs = (await fetch(url)).json()
projection = d3.geoMercator().fitExtent(
[
[20, 20],
[width, height]
],
bbgeom
)
path = d3.geoPath(projection)
path_ = path(fs)
bbfs = (
await fetch(
"https://raw.githubusercontent.com/jgaffuri/RegionSimplify-demo/main/data/out/" +
country +
"-1M.geojson"
)
).json()
bb = d3.geoBounds(bbfs)
bbgeom = {
return {
type: "MultiPoint",
coordinates: bb
};
}
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.
