start ? Plot.geo(
[{}],
{
strokeWidth: 0.2,
render: function (index, scales, values, dimensions, context, next) {
const g = next(index, scales, values, dimensions, context);
const path = d3.geoPath(context.projection).digits(1);
fetch("https://flatgeobuf.org/test/data/UScounties.fgb").then(
async (response) => {
let c = 0;
for await (let feature of flatgeobuf.deserialize(response.body)) {
d3.select(g)
.append("path")
.attr("d", path(feature))
.attr("fill", d3.interpolateSinebow(++c/360));
}
}
);
return g;
}
}
).plot({ projection: "albers-usa" }) : new Promise(() => {})
state ?
Plot.geo([{}], {
strokeWidth: 0.2,
render: function (index, scales, values, dimensions, context, next) {
const g = d3.select(next(index, scales, values, dimensions, context));
const path = d3.geoPath(context.projection).digits(1);
fetch(`https://flatgeobuf.org/test/data/UScounties.fgb?${Math.random()}`).then(
async (response) => {
let c = 0;
for await (let feature of flatgeobuf.deserialize(response.body)) {
g.append("path")
.attr("d", path(feature))
.attr("fill", scales.color(+feature.properties.STATE_FIPS));
}
}
);
return g.node();
}
}).plot({
projection: "albers-usa",
color: { domain: d3.range(57).concat(72) }
}) : new Promise(() => {})
choro
? Plot.geo(unemployment, {
strokeWidth: 0.2,
geometry: "0", // the key
fill: "1", // the value
render: function (index, scales, values, dimensions, context, next) {
const g = next(index, scales, values, dimensions, context);
const I = new Map(values.geometry.map((d, i) => [d, i]));
const path = d3.geoPath(context.projection).digits(1);
fetch(`https://flatgeobuf.org/test/data/UScounties.fgb?${Math.random()}`).then(
async (response) => {
let c = 0;
for await (let feature of flatgeobuf.deserialize(response.body)) {
const i = I.get(`${feature.properties.STATE_FIPS}${feature.properties.COUNTY_FIP}`);
g.children[i]?.setAttribute("d", path(feature));
}
}
);
return g;
}
}).plot({
projection: "albers-usa",
color: {
type: "quantize",
n: 9,
domain: [1, 10],
scheme: "blues",
label: "Unemployment rate (%)",
legend: true
}
})
: new Promise(() => {})
import {unemployment} from "@observablehq/plot-choropleth"
flatgeobuf = require("flatgeobuf@3.23.1/dist/flatgeobuf-geojson.min.js")
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.
