diff = await d3.text(
`https://api.github.com/repos/iandees/usps-collection-boxes/compare/${startCommit}...${endCommit}`,
{
headers: {
Accept: "application/vnd.github.v3.diff"
}
}
)
changes = diff
.split("\n")
.filter(d => d.startsWith("+") || d.startsWith("-"))
.map(d => {
try {
const feature = JSON.parse(d.slice(1));
feature.properties.status = d.slice(0, 1) === "-" ? "removed" : "added";
return feature;
} catch (e) {
return null;
}
})
.filter(d => d)
grouped = d3.group(changes, d => d.properties.ref, d => d.properties.status)
data = changes.filter(d => grouped.get(d.properties.ref).size === 1)
d3 = require("d3@6")
import { table } from "@tmcw/tables/2"
import { tweet } from "@mbostock/tweet"
token = "pk.eyJ1Ijoia2Vycnlyb2RkZW4iLCJhIjoiY2tlYWJtNXdrMDNjazJybzdsdWR1MXQxNiJ9.201r3UVK3fORKawabrfkqw"
mapboxgl = {
const gl = await require("mapbox-gl@1");
if (!gl.accessToken) {
// https://www.mapbox.com/help/how-access-tokens-work/
gl.accessToken = token;
const href = await require.resolve("mapbox-gl@1/dist/mapbox-gl.css");
document.head.appendChild(html`<link href=${href} rel=stylesheet>`);
}
return gl;
}
lastChecked = new Date(
(await d3.text(
"https://raw.githubusercontent.com/iandees/usps-collection-boxes/master/data/last_updated.txt"
)).trim()
)
addedColor = "#3bb2d0"
removedColor = "#ff7f00"
inlineDot = color =>
html`<div style="display: inline-block; background: ${color};
border-radius: 50%; width: 12px; height: 12px;"></div>`
addressTable = (features, properties) =>
table(
features.map(d => ({
address: d.properties["addr:full"],
city: `${d.properties["addr:city"]}, ${d.properties["addr:state"]}`,
zip: d.properties["addr:postcode"]
})),
properties
)
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.
