Palette in Hanoi.
filter = (o, s) => [o, ["number", ["get", "s"]], s]
mutable s = 0
{
mutable s = +day.value;
}
mutable flashes = false
{
if (flashes) {
map.setFilter("shootings", filter("<", s));
map.setFilter("recent", filter("==", s));
} else {
map.setFilter("shootings", filter("<=", s));
map.setFilter("recent", filter("==", 0));
}
}
viewof day = TangledScrubber(dates, {
initialDelay: 10,
loop: false,
format: d =>
`${d.toLocaleString(undefined, {
year: "numeric",
month: "2-digit",
day: "2-digit",
timeZone: "UTC"
})}`,
tMin: 10,
tMax: 500,
tMinWidth: "4em"
})
dates = dateRange(startDate, verified[verified.length - 1].properties.date)
startDate = d3.utcParse("%Y-%m-%d")("2015-01-01")
function dateRange(start, end) {
const duration = 1000 * 60 * 60 * 24;
const dates = [];
let ms = start * 1;
while (ms < end * 1 + duration) {
dates.push(new Date(ms));
ms += duration;
}
return dates;
}
verified = data.filter(
d => d.geometry.coordinates[0] && d.geometry.coordinates[1]
)
data = {
let raw;
try {
raw = await d3.json(
"https://www.washingtonpost.com/graphics/investigations/police-shootings-database/data/policeshootings_all.json"
);
} catch (err) {
// Load pre-downloaded JSON if fetching from WaPo doesn't work
raw = await FileAttachment("policeshootings_all_6-1-2020.json").json();
}
const data = raw.map((d) => {
const date = d3.utcParse("%Y-%m-%d")(d.date);
return {
type: "Feature",
geometry: { type: "Point", coordinates: [d.lon, d.lat] },
properties: {
date: date,
s: +date,
city: d.city,
state: d.state
}
};
});
return data.sort((a, b) => a.properties.date - b.properties.date);
}
mapboxgl = {
let gl = await require("mapbox-gl@1.5.0");
if (!gl.accessToken) {
gl.accessToken =
"pk.eyJ1IjoiZHV5bmd1eWVuMTU4IiwiYSI6ImNrYXd2d3g0MTAwYmkydW9hM3hkenhkNzIifQ.nryaJRMknR5-_LSVvzhj3Q";
}
return gl;
}
d3 = require("d3@5")
import { TangledScrubber } from "@duynguyen1678/tangled-scrubber"
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.
