bounds = {
const state_fips = "23"; // Hard coded --
const state_topojson = us.objects.states.geometries.filter(d => d.id == "23")[0];
const state_geojson = topojson.feature(us, state_topojson);
const [[x0, y0], [x1, y1]] = path.bounds(state_geojson);
return [[x0, y0], [x1, y1]];
}
import {Button} from "@observablehq/inputs"
{
// Use D3 to "select" the chart object, which is an SVG element (and JavaScript object)
const svg = d3.select(chart);
// You can access the SVG element's viewbox attribute from JavaScript
// See how d3-zoom does it: https://github.com/d3/d3-zoom/blob/master/src/zoom.js
const {x, y, width, height} = svg.node().viewBox.baseVal;
if (button % 2) {
chart.zoomToState();
return "zoom in";
} else {
chart.zoomReset();
return "reset";
}
return button;
}
mutable z = 42
{
let [[x0, y0], [x1, y1]] = bounds;
let maine = [(x0 + x1)/2, (y0 + y1)/2];
let scale = 5.2636;
let dx = maine[0] * scale;
let dy = maine[1] * scale;
return [dx - viewport_center[0], dy - viewport_center[1]];
}
viewport_center = [975 / 2, 610 / 2];
t = d3.zoomIdentity.translate(20, 40)
t2 = t.scale(3).translate(1,2)
path = d3.geoPath()
us = FileAttachment("states-albers-10m.json").json()
topojson = require("topojson-client@3")
d3 = require("d3@6")
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.
