35:null 36:["$","title",null,{"children":"Mapping Air Quality Data with D3 - VORONOI | Ian Johnson | Observable"}] 3c:T550,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; }3d:[] 3a:{"id":"09f1b35bd5b1bda2","slug":"mapping-air-quality-data-with-d3-voronoi/2","title":"Mapping Air Quality Data with D3 - VORONOI","thumbnail":"cef70217e682d37e69eb84e39af68087c18bfaea2ce43ca2fd20500e7872f422","access_level":"public","create_time":"$D2020-09-12T22:22:51.480Z","update_time":"$D2020-09-27T21:05:40.923Z","view_time":null,"first_public_time":"$D2020-09-12T22:24:27.675Z","has_unpublished_edits":null,"fork":{"id":"6cabb574ccb2a0b0","slug":"mapping-air-quality-data-with-d3","title":"Mapping Air Quality Data with D3 - VORONOI","owner":{"id":"cfa704f351f0d39f","login":"mayagans","name":"Maya Gans"}},"stars":6,"starred":false,"owner":{"type":"team","id":"cce0fa6e063d2bee","login":"enjalot","name":"Ian Johnson","avatar_url":"https://avatars-next.observableusercontent.com/549bdb0c368027004b51c4e95459e9c224331e0fec9c4cc97d181f83e55ab7f9","tier":"starter_2024","bio":"pixel flipper, data sifter. trying to see what I can while I'm here"},"version":446,"publish_version":446,"role":null,"authored":false,"authors":[{"type":"individual","id":"595405df3c534894","login":"enjalot","name":"Ian Johnson","avatar_url":"https://avatars-next.observableusercontent.com/549bdb0c368027004b51c4e95459e9c224331e0fec9c4cc97d181f83e55ab7f9","tier":null,"bio":"pixel flipper, data sifter. trying to see what I can while I'm here"}],"members":[{"type":"individual","id":"595405df3c534894","login":"enjalot","name":"Ian Johnson","avatar_url":"https://avatars-next.observableusercontent.com/549bdb0c368027004b51c4e95459e9c224331e0fec9c4cc97d181f83e55ab7f9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"e9c04748afef4746","slug":"air-quality","title":"Air Quality","owner":{"id":"cce0fa6e063d2bee","login":"enjalot","name":"Ian Johnson"}},"type":"notebook","body":{"titling":"auto","title":"Mapping Air Quality Data with D3 - VORONOI","cells":[{"id":0,"value":"md`# Mapping Air Quality Data with D3 - VORONOI \n## Fork of [Maya's notebook](https://observablehq.com/@mayagans/mapping-air-quality-data-with-d3)\nBuilding on the [Observable livestream](https://twitch.tv/observablehq) with [Ian Johnson](https://observablehq.com/@enjalot) & [Anjana Vakil](https://observablehq.com/@anjana) ✨\n\n\nLet's map some air quality data in D3!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"import { hexdata } from '@enjalot/purpleair-historical-data'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":368,"value":"//import {hexdata} from '@enjalot/smoke-forecast'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"hexdata","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"groupedData = d3.group(hexdata, d => d.day)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"times = Array.from(groupedData.keys())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"timeData = groupedData.get(currentTime)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"points = timeData.map(d => [d.lng, d.lat, d.pm1])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"import { Scrubber } from '@mbostock/scrubber'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"viewof currentTime = Scrubber(times, {format: d => new Date(d*1000)})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"md`## D3 map`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"mapSVG = svg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"projection = d3.geoAlbersUsa()\n // magically fits map geography to width/height!\n .fitSize([width, height], california[0]) ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"us = d3.json(\"https://unpkg.com/us-atlas@3/counties-10m.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"stateShapes = topojson.feature(us, us.objects.states)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"california = stateShapes.features.filter(f => f.properties.name === 'California')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"topojson = require('topojson-client')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"path = d3.geoPath(projection)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"colorPM1 = d3.scaleLinear()\n .domain([0,50, 100, 150, 200, 250])\n// colorPM1 = d3.scaleThreshold()\n// .domain([50, 100, 150, 200, 250])\n .range([\"green\", \"yellow\", \"orange\", \"red\", \"maroon\", \"maroon\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":427,"value":"round5 = (n) => Math.round(n/5)*5","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":429,"value":"round5(11)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"$3c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":390,"value":"md`by naming the following cell we can take advantage of Alex's observable-prerender-animate: \nhttps://observablehq.com/@asg017/introduction-to-the-new-observable-prerender-cli \n\nthe command: \n\\`\\`\\`\nobservable-prerender-animate @mayagans/mapping-air-quality-data-with-d3-voronoi mapSVG \\ \n --iter-waitfor rendered \\ \n --iter currentTime:times \\ \n --out-dir maya/ \\ \n --format png\n\\`\\`\\`\nvideo command: \n\\`\\`\\`\nffmpeg -framerate 15 \\ \n -i tmp/%03d_mapSVG.png \\ \n -c:v libx264 -pix_fmt yuv420p \\ \n -vf \"pad=ceil(iw/2)*2:ceil(ih/2)*2\" \\ \n mayavoronoi.mp4\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"\nrendered = render(mapSVG)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"d3 = require.alias({\"d3-array\": \"d3@6\", \"d3-delaunay\": \"d3@6\", \"d3-geo\": \"d3@6\"})(\"d3@6\", \"d3-geo-voronoi@1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3d","stdlib":"1"}} 3b:"$3a:body"