2b:null 2c:["$","title",null,{"children":"Mapping Air Quality Data with D3 - VORONOI | Maya Gans | Observable"}] 31:T501,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(d.properties.site[2])) .attr("stroke", "black") .attr("clip-path", "url(#californiaClip)"); return svgSelection; }32:[] 2f:{"id":"6cabb574ccb2a0b0","slug":"mapping-air-quality-data-with-d3","title":"Mapping Air Quality Data with D3 - VORONOI","thumbnail":"128567a00b8f7565bd2e4ed57236a8eab1be3a4aef6b948a4732fdcf9c8c0a0c","access_level":"public","create_time":"$D2020-09-01T18:33:25.668Z","update_time":"$D2020-09-13T15:38:32.490Z","view_time":null,"first_public_time":"$D2020-09-08T15:51:13.407Z","fork":{"id":"d65ad3f4f7186f71","slug":"mapping-air-quality-data-with-d3","title":"Mapping Air Quality Data with D3","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":11,"starred":false,"owner":{"type":"team","id":"cfa704f351f0d39f","login":"mayagans","name":"Maya Gans","avatar_url":"https://avatars-next.observableusercontent.com/106e9e9b89751753a8046f057b9b885e525e02d6deca7ef8b83b5b1f969a1f26","tier":"starter_2024"},"version":413,"publish_version":413,"role":null,"authored":false,"authors":[{"type":"individual","id":"8a52a621b0b172dc","login":"mayagans","name":"Maya Gans","avatar_url":"https://avatars-next.observableusercontent.com/106e9e9b89751753a8046f057b9b885e525e02d6deca7ef8b83b5b1f969a1f26","tier":null}],"members":[{"type":"individual","id":"8a52a621b0b172dc","login":"mayagans","name":"Maya Gans","avatar_url":"https://avatars-next.observableusercontent.com/106e9e9b89751753a8046f057b9b885e525e02d6deca7ef8b83b5b1f969a1f26","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":9,"collection":{"id":"64dd4d020f52f7ad","slug":"ambassadors","title":"Ambassadors Showcase","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"type":"notebook","body":{"title":"Mapping Air Quality Data with D3 - VORONOI","cells":[{"id":0,"value":"md`# Mapping Air Quality Data with D3 - VORONOI \n\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","output":"$undefined","database":"$undefined"},{"id":18,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":12,"value":"hexdata","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":91,"value":"times = Array.from(groupedData.keys())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"timeData = groupedData.get(currentTime)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":136,"value":"import { Scrubber } from '@mbostock/scrubber'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"viewof currentTime = Scrubber(times)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"md`## D3 map`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":403,"value":"md`### ${timeFormat(new Date(currentTime*1000))}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"mapSVG = svg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":399,"value":"legend({color: colorPM1})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":401,"value":"import {legend} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","output":"$undefined","database":"$undefined"},{"id":65,"value":"stateShapes = topojson.feature(us, us.objects.states)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":67,"value":"topojson = require('topojson-client')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"path = d3.geoPath(projection)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"colorPM1 = d3.scaleLinear()\n .domain([0,50, 100, 150, 200, 250])\n .range([\"green\", \"yellow\", \"orange\", \"red\", \"maroon\", \"maroon\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":404,"value":"timeFormat = d3.timeFormat(\"%Y-%m-%d %H:%M\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"\nrendered = render(mapSVG)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"