pixel flipper, data sifter. trying to see what I can while I'm here
import { hexdata } from '@enjalot/purpleair-historical-data'
//import {hexdata} from '@enjalot/smoke-forecast'
hexdata
groupedData = d3.group(hexdata, d => d.day)
times = Array.from(groupedData.keys())
timeData = groupedData.get(currentTime)
points = timeData.map(d => [d.lng, d.lat, d.pm1])
mapSVG = svg`<svg width=${width} height=${height}>
<defs>
<clipPath id="californiaClip">
<path></path>
</clipPath>
</defs>
<path class="state"></path>
<g class="voronoi" transform="rotate(-70, ${width/2},${height/2})scale(1.25)translate(-70,-70)"></g>
</svg>`
projection = d3.geoAlbersUsa()
// magically fits map geography to width/height!
.fitSize([width, height], california[0])
path = d3.geoPath(projection)
colorPM1 = d3.scaleLinear()
.domain([0,50, 100, 150, 200, 250])
// colorPM1 = d3.scaleThreshold()
// .domain([50, 100, 150, 200, 250])
.range(["green", "yellow", "orange", "red", "maroon", "maroon"])
round5 = (n) => Math.round(n/5)*5
round5(11)
function render(svg) {
let svgSelection = d3.select(svg)
// california is an array with 1 element in it (the GeoJSON of its boundaries)
// the path function takes in a GeoJSON element and returns an SVG path string
// we can use this both to define the clippath and draw a boundary
let cali = path(california[0])
svgSelection.select("#californiaClip")
.select("path")
.attr('d', cali)
.attr('stroke', 'black')
.attr('fill', 'none');
// create the outline of california to clip our voronoi
// using https://observablehq.com/@manishearth/uc-california-voronoi-map
//what are defs
svgSelection.select("path.state")
// whats the dif between .data and .datum?
// When do you use each?
.attr("fill", "none")
// .attr("stroke", "#111")
.attr("stroke-width", 6)
.attr("stroke-linejoin", "round")
.attr("d", cali);
svgSelection.select("g.voronoi")
// .append("g")
.attr("stroke", "none")
.attr("pointer-events", "all")
.selectAll("path")
.data(d3.geoVoronoi().polygons(points).features)
.join("path")
.attr("d", d3.geoPath(projection))
.attr("fill", d => colorPM1(round5(d.properties.site[2])))
.attr("stroke", d => colorPM1(round5(d.properties.site[2])))
// .attr("stroke", "black")
.attr("clip-path", "url(#californiaClip)");
return svgSelection;
}
rendered = render(mapSVG)
height = 600
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.
