31:T4ed,fireLegend = () => { const sizeTicks = [10, 10000, 100000] const containmentTicks = [0.25, 0.5, 1] const iconHeight = 20 return html`

${containmentTicks.map(tick => { const scale = 0.75 const arc = d3.arc()({ innerRadius: 7, outerRadius: 10, startAngle: Math.PI, endAngle: Math.PI + 2*Math.PI*tick, }) return ` ${containmentLabel(tick)} ` })}

` }32:T4e7,fireMarker = (d, i, nodes) => { // console.log(d, i, nodes) const data = d.properties const marker = d3.select(nodes[i]) .datum(data) .append('g').attr('class','fire-marker') const scaleFactor = fireSize(data.size)/ 20 const containment = marker .append('g') .attr('transform', `scale(${scaleFactor})`) containment .append('circle') .attr('r', 8) .attr('cx',0) .attr('cy',0) .attr('fill','none') .attr('stroke', '#444') .attr('stroke-dasharray','1 1') .attr('opacity',0.6) containment .append('path') .attr('d', d3.arc()({ innerRadius: 7, outerRadius: 10, startAngle: Math.PI, endAngle: Math.PI + 2*Math.PI*data.fractionContained, })) .attr('fill','#444') const icon = marker // .append('a') // .attr('href', data.url) // .attr('target','_blank') // .attr('rel','noreferrer') .append('g') .attr('class','fire-icon') .attr('pointer-events', 'none') .attr('transform', `scale(${scaleFactor})`) .html(flameIcon('#d95d0b')) // for easier/more reliable touch interactions const hoverElement = marker.append('circle') .attr('r',15) .attr('cx',0) .attr('cy',0) .attr('opacity',0) }33:T491,fireMap = () => map({ // title: (width > 500) ? `Known active COVID-19 cases in Montana, ${d3.timeFormat('%B %d, %Y')(new Date())}` : `Known active COVID-19 cases`, width: safeGraphicWidth(), height: safeGraphicWidth() * 0.6, margin: {top: 10, left: 10, right: 10, bottom: 10}, projection: d3.geoAlbers().rotate([110, 0, 0]), layers: [ new FeatureLayer({ geodata: counties, featureStyle: { fill: d => { return '#d8d8d8' // #ccc previously } } }), new FeatureLayer({ geodata: lakes, featureStyle: { fill: d => '#93aab8', opacity: d => 1, stroke: d => 'none', }, }), new FeatureLayer({ geodata: highways, featureStyle: { fill: d => 'none', stroke: d => '#aaa', } }), new PointLayer({ geodata: cities, labelStyle: { text: d => (width > 500) ? d.NAME : '', dx: d => d.offset ? d.offset[0] : '0.5em', dy: d => d.offset ? d.offset[1] : '0.5em', }, }), new PointLayer({ geodata: firesGeo, customMarker: fireMarker, hasTooltip: true, }), ], })34:T4b8,airQualityMap = () => map({ // title: (width > 500) ? `Known active COVID-19 cases in Montana, ${d3.timeFormat('%B %d, %Y')(new Date())}` : `Known active COVID-19 cases`, width: safeGraphicWidth(), height: safeGraphicWidth() * 0.6, margin: {top: 10, left: 0, right: 0, bottom: 10}, projection: d3.geoAlbers().rotate([110, 0, 0]), layers: [ new FeatureLayer({ geodata: counties, featureStyle: { fill: d => { return '#d8d8d8' // #ccc previously } } }), new FeatureLayer({ geodata: lakes, featureStyle: { fill: d => '#93aab8', opacity: d => 1, stroke: d => 'none', }, }), new FeatureLayer({ geodata: highways, featureStyle: { fill: d => 'none', stroke: d => '#aaa', } }), // new PointLayer({ // geodata: cities, // labelStyle: { // text: d => (width > 500) ? d.NAME : '', // dx: d => d.offset ? d.offset[0] : '0.5em', // dy: d => d.offset ? d.offset[1] : '0.5em', // }, // }), new PointLayer({ geodata: airQualityGeo, customMarker: airQualityMarker, hasTooltip: true, }), ], })35:T466,airQualityExplanations = [ '(Air Quality Index of 0 - 50) Air pollution poses little or no health risk. Have fun out there.', '(AQI of 51 to 100) Air quality may create health risks for people who are unusually sensitive to air pollution. EPA suggests those people watch for symptoms such as coughing or shortness of breath and consider cutting back on intense outdoor exercise.', '(AQI of 101 to 150) The general public is unlikely to be affected, but air pollution may be unhealthy for people people with heart or lung disease, older adults, children and teenagers. People in those sensitive groups should consider avoiding intense outdoor exercise and watch for symptoms.', '(AQI of 151 to 200) Air quality is unhealthy for everyone. Sensitive groups should avoid heavy exertion outside. Everyone else should take it easy outside.', '(AQI of 201 to 301) Sensitive groups should avoid all physical activity outdoors. Everyone should avoid intense outdoor exercise', '(AQI of 301 to 500) Everyone should avoid all physical activity outdoors. Sensitive groups should remain inside and keep activity levels low. ' ]36:T63c,style = ``37:Ta2f,cities = ({ "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ -114.00941481367617, 46.86845609815254 ] }, "properties": { "GEOID": "3050200", "NAME": "Missoula", offset: [-15,12], } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ -105.83850296885869, 46.40588180031621 ] }, "properties": { "GEOID": "3049525", "NAME": "Miles City" } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ -114.32618037830662, 48.21553771988646 ] }, "properties": { "GEOID": "3040075", "NAME": "Kalispell", offset: [-50,5] } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ -109.68049816861198, 48.54275568290601 ] }, "properties": { "GEOID": "3035050", "NAME": "Havre" } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ -112.54225090137798, 45.99630474669668 ] }, "properties": { "GEOID": "3011397", "NAME": "Butte" } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ -111.05476616601253, 45.682775182946244 ] }, "properties": { "GEOID": "3008950", "NAME": "Bozeman" } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ -112.0196972521252, 46.59642057169749 ] }, "properties": { "GEOID": "3035600", "NAME": "Helena", offset: [-15,-5], } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ -108.55027669152761, 45.788885426373696 ] }, "properties": { "GEOID": "3006550", "NAME": "Billings", offset: [-20,15], } }, { "type": "Feature", "geometry": { "type": "Point", "coordinates": [ -111.29948415503986, 47.50216159847621 ] }, "properties": { "GEOID": "3032800", "NAME": "Great Falls" } } ] })38:T710,map = (opts) => { const layers = opts.layers if (layers.length === 0) return 'No layers to map' const title = opts.title const height = opts.height || 600 const width = opts.width || 800 // width comes predefined const topMargin = title ? 40 : 10 const margin = opts.margin || {top: topMargin, left: 40, right: 40, bottom: 10} const projection = opts.projection || d3.geoMercator() let tooltip if (d3.select('.svg-tooltip').empty()) { // adapted from https://observablehq.com/@jianan-li/basic-tooltip // conditional prevents redundant tooltips on displays with multiple maps tooltip = d3.select("body").append("div") .attr("class", "svg-tooltip") .style("position","absolute") .style("visibility","hidden") } else { tooltip = d3.select('.svg-tooltip') } // Dimensional calcs const plotWidth = width - margin.left - margin.right const plotHeight = height - margin.top - margin.bottom const svg = d3.select(DOM.svg(width, height)) .style('background-color', '#fff') // .style("width", "100%") .style("height", "auto") // .style('border', '1px solid #ddd') .attr('font-family','sans-serif') const plot = svg.append('g') .attr('transform', `translate(${margin.left},${margin.top})`) .attr('font-size',10) .attr('text-anchor','middle') // fit map based on first layer (i.e. base layer) projection.fitSize([plotWidth, plotHeight], layers[0].geodata) layers.forEach(layer => layer.plot(plot, projection, tooltip)) if (title) { svg.append('text') .attr('y', margin.top - 14) .attr('x', margin.left + plotWidth / 2) .text(title) .attr('text-anchor','middle') .attr('font-size', 14) .attr('font-weight', 'bold') } return svg.node(); }39:T5d7,class FeatureLayer { constructor(opts) { // required opts this.geodata = opts.geodata this.features = opts.geodata.features // optional opts this.featureStyle = opts.featureStyle || {} this.hasTooltip = opts.hasTooltip || false // calculated this.style = { opacity: d => 1, fill: d => '#ddd', fillOpacity: d => 1, stroke: d => '#fff', strokeWidth: d => 1, strokeOpacity: d => 1, ...this.featureStyle } } plot(parent, projection, tooltip){ const path = d3.geoPath().projection(projection); const style = this.style const shapes = parent.append('g').attr('class','feature-layer') const features = shapes.selectAll('.feature') .data(this.features).enter() .append('path') .attr('d', path) .attr('class', 'feature') .attr('opacity', (f => style.opacity(f.properties))) .attr('fill', (f => style.fill(f.properties))) .attr('fillOpacity', (f => style.fillOpacity(f.properties))) .attr('stroke', (f => style.stroke(f.properties))) .attr('strokeWidth', (f => style.strokeWidth(f.properties))) .attr('strokeOpacity', (f => style.strokeOpacity(f.properties))) if (this.hasTooltip) { features .on("mouseover", event => tooltip.style("visibility", "visible")) .on("mousemove", event => updateTooltip(tooltip, event)) .on("mouseout", event => tooltip.style("visibility", "hidden")) } } }3a:Tabf,class PointLayer { constructor(opts) { // required opts this.geodata = opts.geodata this.features = opts.geodata.features // optional opts this.featureStyle = opts.featureStyle || {} this.labelStyle = opts.labelStyle this.customMarker = opts.customMarker || null this.hasTooltip = opts.hasTooltip || false // calculated this.style = { radius: d => 2, opacity: d => 1, fill: d => '#222', fillOpacity: d => 1, stroke: d => null, strokeWidth: d => 1, strokeOpacity: d => 1, ...this.featureStyle } this.label = { text: d => null, fill: d => '#000', fontSize: d=> '12px', dx: d => '0.5em', dy: d => '0.5em', textAnchor: d => 'start', ...this.labelStyle } } plot(parent, projection, tooltip){ const path = d3.geoPath().projection(projection); const style = this.style const label = this.label // const shapes = parent.append('g').attr('class','feature-layer') const customMarker = this.customMarker const markerGroups = parent.append('g').attr('class','feature-layer') .selectAll('.feature') .data(this.features).enter() .append('g') .attr('transform', d => { const point = path.centroid(d) return `translate(${point[0]},${point[1]})` }) if (customMarker) { markerGroups.each(customMarker, label) } else { markerGroups.append('circle') .attr('r', (f => style.radius(f.properties))) .attr('cx', 0) .attr('cy', 0) .attr('class', 'feature') .attr('opacity', (f => style.opacity(f.properties))) .attr('fill', (f => style.fill(f.properties))) .attr('fill-opacity', (f => style.fillOpacity(f.properties))) .attr('stroke', (f => style.stroke(f.properties))) .attr('stroke-width', (f => style.strokeWidth(f.properties))) .attr('stroke-opacity', (f => style.strokeOpacity(f.properties))) } if (label) { markerGroups.append('text') .attr('pointer-events', 'none') .attr('x',0) .attr('y',0) .attr('font-size', f => label.fontSize(f.properties)) .attr('text-anchor', f => label.textAnchor(f.properties)) .attr('dy', f => label.dy(f.properties)) .attr('dx', f => label.dx(f.properties)) .attr('fill', f => label.fill(f.properties)) .text(f => label.text(f.properties)) } if (this.hasTooltip) { markerGroups .on("mouseover", event => tooltip.style("visibility", "visible")) .on("mousemove", event => updateTooltip(tooltip, event)) .on("mouseout", event => tooltip.style("visibility", "hidden")) } } }3b:[] 2f:{"title":"Montana 2021 fires dashboard","cells":[{"id":0,"value":"md`# Montana 2021 fires dashboard\n\nMontana Free Press project compiling federal wildfire + air quality data for into a dashboard. In production at https://montanafreepress.org/montana-2021-fire-season-smoke-air-quality/.\n\nFire location data is pulled from [Inciweb](https://inciweb.nwcg.gov/) and air quality data from EPA's [AirNow API](https://docs.airnowapi.org/). Data from both sources is cached via GitHub Action scrapers at https://github.com/eidietrich/inciweb-history and https://github.com/eidietrich/mt-air-quality-history respectively.\n\nAs of Oct. 15, 2021, we updated this page to include static data reflecting the last-reported status of every fire reported in Montana during the 2021 fire season.\n\nFeedback/suggestions to [edietrich@montanafreepress.org](mailto:edietrich@montanafreepress.org).\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"mtInciwebFires = {\n \n // Data collected via git scraping - live\n // const raw = await d3.json('https://raw.githubusercontent.com/eidietrich/inciweb-history/main/inciweb-incidents.json')\n\n // Static data archive to \n const raw = {}\n raw.markers = await d3.json('https://raw.githubusercontent.com/eidietrich/inciweb-history/main/montana-all-season-entries.json')\n \n const cleaned = raw.markers\n .filter(d => d.type === 'Wildfire')\n .filter(d => d.state === 'MONTANA')\n .map(d => ({\n dataset: 'inciweb',\n name: d.name,\n id: d.id,\n lat: +d.lat,\n lng: +d.lng,\n // sizeLabel: d.size,\n size: +d.size.replace(',','').replace(' Acres',''),\n updated: parseTime(d.updated),\n fractionContained: d.contained / 100,\n url: `https://inciweb.nwcg.gov/incident/${d.id}/`\n }))\n \n // return raw.markers\n return cleaned\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":802,"value":"mtAirQualityStations = {\n // Data collected via git scraping\n const raw = await d3.json('https://raw.githubusercontent.com/eidietrich/mt-air-quality-history/main/mt-air-quality.json')\n \n const cleaned = raw\n .filter(d => d.AgencyName === 'Montana DEQ') // filter out ID results from bounding box\n .map(d => ({\n dataset: 'air-quality',\n site: d.SiteName,\n lat: +d.Latitude,\n lng: +d.Longitude,\n time: parseUTC(d.UTC),\n agency: d.AgencyName,\n airQualityIndex: d.AQI,\n category: d.Category,\n unit: d.Unit,\n parameter: d.Parameter,\n }))\n \n return cleaned\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":270,"value":"firesGeo = ({\n type: 'FeatureCollection',\n features: mtInciwebFires.map(d => ({\n type: 'Feature',\n geometry: {\n type: 'Point',\n coordinates: [d.lng, d.lat]\n },\n properties: {...d}\n }))\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":813,"value":"airQualityGeo = ({\n type: 'FeatureCollection',\n features: mtAirQualityStations.map(d => ({\n type: 'Feature',\n geometry: {\n type: 'Point',\n coordinates: [d.lng, d.lat]\n },\n properties: {...d}\n }))\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":635,"value":"fireMapEmbed = html`\n${style}\n

\n\n${fireMap()}\n${fireLegend()}\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"fireTableEmbed = html`\n

\n${style}\n${await fireTable(mtInciwebFires)}\n

\n`\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":818,"value":"airQualityMapEmbed = html`\n${style}\n

\n ${airQualityLegend()}\n ${await airQualityMap()}\n ${airQualityExplanation()}\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":509,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":290,"value":"flameIcon = (color) => `\n\t\n\t\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":249,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":680,"value":"fireIcon = fire => {\n // non-D3\n const scale = fireSize(fire.size) / 20 // iconHeight = 20\n const arc = d3.arc()({\n innerRadius: 7,\n outerRadius: 10,\n startAngle: Math.PI,\n endAngle: Math.PI + 2*Math.PI*fire.fractionContained,\n })\n const iconHeight = Math.max(32, scale*30+10)\n return ``\n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":424,"value":"updateTooltip = (tooltip, event) => {\n const data = event.target.__data__\n \n let content = null\n if (data.dataset === 'inciweb') {\n content = `\n

${data.name}

${sizeLabel(data.size)}, ${containmentLabel(data.fractionContained)}

as of ${timeFormat(data.updated)}

\n\n

\n`\n }\n \n if (data.dataset === 'air-quality') {\n content = `

${data.site}

Air Quality Index: ${data.airQualityIndex}

Rating: ${airQualityLabels[data.category-1]}

as of ${timeFormat(data.time)}

`\n }\n tooltip.html(content)\n tooltip.style(\"top\", (event.pageY-10)+\"px\").style(\"left\",(event.pageX+10)+\"px\")\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":248,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":887,"value":"airQualityLegend = () => {\n return html`

\n \n

Air quality rating category

Based on concentrations of airborne particulates as measured by monitoring stations

\n ${airQualityColor.range().map((color, i) => {\n return `${i+1} – ${airQualityLabels[i]}`\n })}\n

Data from EPA AirNow program.

`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":822,"value":"airQualityMarker = (d, i, nodes) => {\n // console.log(d, i, nodes)\n const data = d.properties\n const mobileDisplay = (width < 400)\n \n const marker = d3.select(nodes[i])\n .datum(data)\n .append('g').attr('class','air-quality-marker')\n \n const icon = marker.append('circle')\n .attr('r', mobileDisplay ? 6 : 9)\n .attr('cx',0)\n .attr('cy',0)\n .attr('stroke', d => '#222')\n .attr('fill', d => airQualityColor(d.category))\n \n const label = marker.append('text')\n .attr('x',0).attr('y',0)\n .attr('dx', 0)\n .attr('dy', '0.3em')\n .attr('font-size', mobileDisplay ? 12 : 14)\n .attr('font-weight', 'bold')\n .attr('fill','white')\n .attr('text-anchor', 'middle')\n .attr('pointer-events', 'none')\n .text(d => d.category)\n \n // for easier/more reliable touch interactions\n const hoverElement = marker.append('circle')\n .attr('r',15)\n .attr('cx',0)\n .attr('cy',0)\n .attr('opacity',0)\n \n \n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":816,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":280,"value":"fireSize = d3.scaleSqrt()\n .domain([0,200000])\n.range([\n (safeGraphicWidth() > 400) ? 20 : 10,\n (safeGraphicWidth() > 400) ? 70 : 50,\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":166,"value":"sizeLabel = size => {\n const sizeFormat = d3.format(',')\n if (size === 1) return `${sizeFormat(size)} acre`\n return `${sizeFormat(size)} acres`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":977,"value":"airQualityExplanation = () => html`\n

What these ratings mean

Descriptions adapted from the U.S. Environmental Protection Agency's Air Quality Guide for Particle Pollution.

\n ${airQualityColor.range().map((color, i) => {\n return `

\n${i+1} – ${airQualityLabels[i]}${airQualityExplanations[i]}\n

`\n })}\n\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":903,"value":"airQualityLabels = [\n 'Good',\n 'Moderate',\n 'Unhealthy for sensitive groups',\n 'Unhealthy',\n 'Very unhealthy',\n 'Hazardous'\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":982,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":855,"value":"airQualityColor = d3.scaleOrdinal()\n .domain([1,2,3,4,5,6])\n .range(['#66a61e','#e6ab02','#d95f02','#db1f22','#7570b3','#734e0b'])","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"fireTable = (data) => {\n \n const rows = data\n .sort((a,b) => b.size - a.size) \n .map(fire => {\n return `\n ${fireIcon(fire)}\n ${fire.name}\n ${sizeLabel(fire.size)}\n ${containmentLabel(fire.fractionContained)}\n ${timeFormat(fire.updated)}.\n `\n })\n return html`

\n \n\n \n \n \n \n \n \n \n\n${rows}\n

	Fire	Size	Containment	Last update

`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":185,"value":"containmentLabel = fraction => `${d3.format('.0%')(fraction)} contained`","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"timeFormat = d => d3.timeFormat('%-m/%-d/%y, %-I:%M %p')(d).replace('AM', 'a.m').replace('PM', 'p.m')","pinned":false,"hidden":false,"mode":"ojs"},{"id":1042,"value":"parseTime = d3.timeParse(\"%Y-%m-%d %H:%M:%S\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":1093,"value":"parseUTC = string => d3.utcParse(\"%Y-%m-%dT%H:%M%Z\")(string + '-01') // hacky, sorry\n// 2021-07-19T19:00","pinned":false,"hidden":false,"mode":"ojs"},{"id":739,"value":"// Sized for one-column layout on MTFP site\nsafeGraphicWidth = () => Math.min(width - 60, 800)","pinned":false,"hidden":false,"mode":"ojs"},{"id":344,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":230,"value":"md`## Libraries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":233,"value":"counties = d3.json('https://gist.githubusercontent.com/eidietrich/1f4727a8fb1a32bda14c921b29028bfd/raw/2479b3ae8ca3aa09c2b9f2cb9c9ca7f892250a96/mt-counties.geojson')","pinned":false,"hidden":false,"mode":"ojs"},{"id":259,"value":"$37","pinned":false,"hidden":false,"mode":"ojs"},{"id":236,"value":"highways = {\n const highways = await d3.json('https://gist.githubusercontent.com/eidietrich/67cbe6196b6b87698fc42f50e96076ab/raw/4d51ceb627c76360497837e1ac5338698f7df752/ne_mt_highways_state_resolution.topojson.json')\n \n const topo = topojson.feature(highways, highways.objects.highways)\n topo.features = topo.features.filter(d => d.properties.type === 'Major Highway')\n return topo\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":256,"value":"lakes = {\n const topo = await d3.json('https://gist.githubusercontent.com/eidietrich/753ea92617c64c938ad36fddad3b0b7f/raw/63273fccb218ffdcf1d14b0c0d31cbe658588661/mt-major-lakes.json')\n \n const geo = topojson.feature(topo, topo.objects.lakes)\n return geo\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":238,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":224,"value":"$38","pinned":false,"hidden":false,"mode":"ojs"},{"id":252,"value":"$39","pinned":false,"hidden":false,"mode":"ojs"},{"id":227,"value":"$3a","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require('d3@v6')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W3b","stdlib":"1","titling":"auto"}