viewof map = { const container = html`

`; const caption = html`

${d3.format(",")( data.length - verified.length )} shootings (out of ${d3.format(",")( data.length )}) with unverified locations are not shown on this map. Scroll or hit to pan out to Alaska and Hawaii.

`; const checkbox = html`

Flashes`; checkbox.flashes.addEventListener("change", function() { mutable flashes = this.checked; }); const content = html`

${container}

${viewof day}

${checkbox}

${caption}`; const presentation = content.querySelector("#map-wrapper"); const fullScreenButton = caption.querySelector("button"); fullScreenButton.addEventListener("click", function() { const props = [ 'requestFullscreen', 'msRequestFullscreen', 'mozRequestFullScreen', 'webkitRequestFullscreen' ]; for (let prop of props) { if (presentation[prop]) { presentation[prop](); return; } } }); yield content; const map = (content.value = new mapboxgl.Map({ container, center: [-96, 38.5], zoom: 3.4, style: "mapbox://styles/mapbox/dark-v9" })); const samePrevFilter = filter("<=", 0); map.on("load", function() { const source = { type: "geojson", data: { type: "FeatureCollection", features: verified } }; map.addLayer({ id: "shootings", type: "circle", source: source, paint: { "circle-color": "red", "circle-opacity": 0.1, "circle-stroke-color": "red", "circle-stroke-opacity": 0.3, "circle-stroke-width": 1, "circle-radius": 3 }, filter: ["all", samePrevFilter] }); map.addLayer({ id: "recent", type: "circle", source: source, paint: { "circle-color": "orange", "circle-opacity": 0.8, "circle-radius": 10 }, filter: ["all", filter("==", 0)] }); }); mutable flashes = false; invalidation.then(() => map.remove()); }

Purpose-built for displays of data