pixel flipper, data sifter. trying to see what I can while I'm here
localFormat(d3.timeHour.floor(new Date()))
timeFormat(getHour(time))
barheight = 150
// viewof time = Scrubber(hours, { delay: 200, format: d => "" })
hexbylocation
delaunay = d3.Delaunay.from(hexdata, d => projection([d.lng, d.lat])[0], d => projection([d.lng, d.lat])[1])
sel2p = {
let p = projection([-122.277,37.8666])
return hexdata[delaunay.find(p[0],p[1])]
}
sel2 = hexbylocation.get(sel2p.lng + "|" + sel2p.lat) || []
Bars(sel2)
sel3p = {
let p = projection([-122.2501, 37.8295])
return hexdata[delaunay.find(p[0],p[1])]
}
sel3 = hexbylocation.get(sel3p.lng + "|" + sel3p.lat) || []
Bars(sel3)
rundata = FileAttachment("latest_run-2020083100.json").json()
runtime = new Date(rundata.model_initialization_time)
now = getHour(time)
getHour = t => d3.timeHour.offset(runtime, t)
hexdata = d3.csvParse(await FileAttachment("hexbin-2020083100.csv").text(), d3.autoType)
hexbyhour = d3.group(hexdata, d => d.i)
hexbyhour.get(0)
hextime = hexbyhour.get(time2.value)
nexthextime = hexbyhour.get(time2.next)
loc = function(d) { return d.lng + "|" + d.lat }
hexbylocation = d3.group(hexdata, loc)
hexgroup = d3.group(hextime, loc)
nextgroup = d3.group(nexthextime, loc)
together = d3.group(hextime.concat(nexthextime), loc)
fullhexbingeo = Array.from(together).map((l,i) => {
let sel = {}
if(selected && selected[0]) { sel = selected[0]}
let pair = l[1]
let d = { ...pair[0]}
if(pair.length == 2) {
d.pm1 = d3.interpolate(pair[0].pm1, pair[1].pm1)(time2.t)
} else if(d.i == time) {
d.pm1 = d3.interpolate(pair[0].pm1, 0)(time2.t)
} else {
d.pm1 = d3.interpolate(0, pair[0].pm1)(time2.t)
}
// let nd = nexthextime.get(d.lng+"|"+d.lat)
// let pm1 = d3.interpolate(d.pm1, nd ? nd[0].pm1 : 0)(time2.t)
return {
id: i,
properties: {
lat: d.lat,
lng: d.lng,
pm1: d.pm1,
date: now,
stroke: d.lat == sel.lat && d.lng == sel.lng ? 2 : 0,
pm1color: colorSmoke(d.pm1),
pm1opacity: opacityPM1(d.pm1),
},
geometry: {type: "Point", coordinates: [d.lng, d.lat]},
type: "Feature"
}
})
center = projection.invert([width/2, height/2])
metersToPixelsAtMaxZoom = (meters, latitude) =>
meters / 0.075 / Math.cos(latitude * Math.PI / 180)
hexbinLayer = {
return {
id: "hexbins",
type: "circle",
source: "hexbins",
paint: {
// keep the circles the same size
// https://stackoverflow.com/questions/37599561/drawing-a-circle-with-the-radius-in-miles-meters-with-mapbox-gl-js
"circle-radius": {
"stops": [[0,0], [11, metersToPixelsAtMaxZoom(2, center[1])]],
base: 2
},
"circle-stroke-color": "blue",
"circle-stroke-width": ["get", "stroke"],
"circle-color": ["get", "pm1color"],
"circle-opacity": ["get", "pm1opacity"]
}
}
}
updateMapbox = {
// This allows us to update the map with data without re-rendering the whole cell
// There is a bit of weirdness around adding and removing the layer to make sure mapbox rerenders
let fc = {
type: "FeatureCollection",
features: fullhexbingeo
}
if(map._loaded) {
if(!map.getSource("hexbins")) {
map.addSource("hexbins", {
type: "geojson",
data: fc
});
} else {
// console.log("setting source")
map.getSource("hexbins").setData(fc)
}
if (map.getLayer(hexbinLayer.id)) {
map.removeLayer(hexbinLayer.id);
}
// console.log("adding layer")
map.addLayer(hexbinLayer);
// map.flyTo(projection.invert([100,1000]))
// console.log("flying")
// }
return true
}
return false
}
map._loaded
import {california, countyShapes} with {height as height, hexbin as hexbin} from "@enjalot/air-quality-explorations"
// Choose a couple counties that define the extent I care about
countyExtent = ({
type: "FeatureCollection",
// features: countyShapes.features.filter(d => (
// d.properties.name == "Tehama" ||
// d.properties.name == "San Benito") && d.id.slice(0,2) == "06")
features: countyShapes.features.filter(d => (
d.properties.name == "Marin" ||
d.properties.name == "Alameda") && d.id.slice(0,2) == "06")
// features: countyShapes.features.filter(d => (
// d.properties.name == "Marin" ||
// d.properties.name == "Santa Clara") && d.id.slice(0,2) == "06")
})
widthRatio = width / 955
heightRatio = height / 500
projection = d3.geoAlbersUsa()
.fitSize([width, height], countyExtent)
originalScale = 25355.18980109889
scaleRatio = projection.scale() / originalScale
pixelRadius = 10 * scaleRatio * d3.min([widthRatio, heightRatio])
hexbin = d3.hexbin().extent([[0, 0], [width, height]]).radius(pixelRadius)
hours = d3.range(0, Array.from(hexbyhour.keys()).length)
height = 500
legend({color: colorPM1})
colorPM1 = d3.scaleThreshold()
.domain([50, 100, 150, 200, 250])
.range(["green", "yellow", "orange", "red", "maroon", "maroon"])
legend({color: colorSmoke})
colorSmoke = d3.scaleLinear()
.domain([50, 100, 150, 200, 250])
.range(["#eee", "#aaa", "#999", "#666", "#222", "#222"])
opacityPM1 = d3.scaleLinear()
.domain([0,50, 100, 150, 200, 250])
.range([0.1, 0.5, 0.75, 0.9, 0.9, 0.9])
numFormat = d3.format(",d")
timeFormat = d3.utcFormat("%Y-%m-%d %H:%M")
localFormat = d3.timeFormat("%Y-%m-%d %H:%M")
import {Scrubber} from "@mbostock/scrubber"
import {Keyframer} from "@enjalot/keyframe-scrubber"
import {legend} from "@d3/color-legend"
d3 = require("d3@6.0.0-rc.3", "d3-hexbin@0.2")
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;
}
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.
