The end-to-end solution for building and hosting better data apps, dashboards, and reports.
import { hexdata } from '@enjalot/purpleair-historical-data'
hexdata
groupedData = d3.group(hexdata, d => d.day)
times = Array.from(groupedData.keys())
timeData = groupedData.get(currentTime)
import { Scrubber } from '@mbostock/scrubber'
mapSVG = svg`<svg width=${width} height=${height}></svg>`
projection = d3.geoAlbersUsa().fitSize([width, height], california[0]) // magically fits map geography to width/height!
path = d3.geoPath(projection)
colorPM1 = d3.scaleLinear()
.domain([0,50, 100, 150, 200, 250])
.range(["green", "yellow", "orange", "red", "maroon", "maroon"])
function render(svg) {
let svgSelection = d3.select(svg);
svgSelection.selectAll('path')
.data(california)
.join('path')
.attr('d', f => path(f))
.attr('stroke', 'grey')
.attr('fill', 'none');
svgSelection.selectAll('circle')
.data(timeData)
.join('circle')
.attr('cx', d => projection([d.lng, d.lat])[0])
.attr('cy', d => projection([d.lng, d.lat])[1])
.attr('fill', d => colorPM1(d.pm1))
.attr('r', 3);
return svgSelection;
}
render(mapSVG)
height = 400
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.
