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:{"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"},{"id":18,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"import { hexdata } from '@enjalot/purpleair-historical-data'","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"hexdata","pinned":true,"hidden":false,"mode":"ojs"},{"id":88,"value":"groupedData = d3.group(hexdata, d => d.day)","pinned":true,"hidden":false,"mode":"ojs"},{"id":91,"value":"times = Array.from(groupedData.keys())","pinned":true,"hidden":false,"mode":"ojs"},{"id":97,"value":"timeData = groupedData.get(currentTime)","pinned":true,"hidden":false,"mode":"ojs"},{"id":200,"value":"points = timeData.map(d => [d.lng, d.lat, d.pm1])","pinned":true,"hidden":false,"mode":"ojs"},{"id":136,"value":"import { Scrubber } from '@mbostock/scrubber'","pinned":false,"hidden":false,"mode":"ojs"},{"id":138,"value":"viewof currentTime = Scrubber(times)","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"md`## D3 map`","pinned":false,"hidden":false,"mode":"ojs"},{"id":403,"value":"md`### ${timeFormat(new Date(currentTime*1000))}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":32,"value":"mapSVG = svg``","pinned":true,"hidden":false,"mode":"ojs"},{"id":399,"value":"legend({color: colorPM1})","pinned":true,"hidden":false,"mode":"ojs"},{"id":401,"value":"import {legend} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":63,"value":"us = d3.json(\"https://unpkg.com/us-atlas@3/counties-10m.json\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"stateShapes = topojson.feature(us, us.objects.states)","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"california = stateShapes.features.filter(f => f.properties.name === 'California')","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"topojson = require('topojson-client')","pinned":false,"hidden":false,"mode":"ojs"},{"id":70,"value":"path = d3.geoPath(projection)","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":40,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":404,"value":"timeFormat = d3.timeFormat(\"%Y-%m-%d %H:%M\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":42,"value":"\nrendered = render(mapSVG)","pinned":true,"hidden":false,"mode":"ojs"},{"id":30,"value":"height = 600","pinned":true,"hidden":false,"mode":"ojs"},{"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"}],"files":"$W32","stdlib":"1","titling":"auto"}