2f:T13f1,// MapLibre Heatmap from Lukas with minor tweaks and unused code removed map = { const map = new maplibregl.Map({ maplibreLogo: true, container, center: [-70.2568, 43.64], zoom: 12, style: `https://basemaps.cartocdn.com/gl/${basemap}-gl-style/style.json`, cooperativeGestures: true }); invalidation.then(() => map.remove()); map.addControl(new maplibregl.NavigationControl()); const bb = container.getBoundingClientRect(); map.on("load", function () { map.addSource("stink", { type: "geojson", data: geoData }); // limit map to area with data var bounds = [ [-70.4, 43.4], [-70.1, 43.8] ]; map.setMaxBounds(bounds); map.addLayer({ id: "stinkyheat", type: "heatmap", source: "stink", paint: { "heatmap-radius": 10, "heatmap-color": [ "interpolate", ["linear"], ["heatmap-density"], 0, "rgba(0, 0, 255, 0)", 0.1, "rgba(35, 86, 45, 0.92)", 0.3, "rgba(44, 149, 66, 0.92)", 0.5, "lime", 0.7, "yellow", 1, "rgba(245, 99, 39, 0.92)" ], "heatmap-intensity": 0.8 } }); //Loads all the images for symbols map.loadImage("https://i.imgur.com/Aw241O4.png", function (error, image) { if (error) throw error; map.addImage("schoolIcon", image); }); map.loadImage("https://i.imgur.com/UTEdNow.png", function (error, image) { if (error) throw error; map.addImage("libraryIcon", image); }); map.loadImage("https://i.imgur.com/qBwoy8m.png", function (error, image) { if (error) throw error; map.addImage("govtIcon", image); }); map.loadImage("https://i.imgur.com/qpgAMfc.png", function (error, image) { if (error) throw error; map.addImage("parkIcon", image); }); map.loadImage("https://i.imgur.com/MKDpPpH.png", function (error, image) { if (error) throw error; map.addImage("childcareIcon", image); }); //School data and layer map.addSource("schools", { type: "geojson", data: maineSchoolsGeoJson }); map.addLayer({ id: "schoolPoints", type: "symbol", layout: { "icon-image": "schoolIcon", "icon-allow-overlap": true }, source: "schools" }); //Library data and layer map.addSource("libraries", { type: "geojson", data: maineLibraryGeoJson }); map.addLayer({ id: "libraryPoints", type: "symbol", source: "libraries", layout: { "icon-image": "libraryIcon", "icon-allow-overlap": true } }); //Govt data and layer map.addSource("govt", { type: "geojson", data: maineGovernmentGeoJson }); map.addLayer({ id: "govtPoints", type: "symbol", source: "govt", layout: { "icon-image": "govtIcon", "icon-allow-overlap": true } }); //Park data and Layer map.addSource("park", { type: "geojson", data: parkGeojson }); map.addLayer({ id: "parkPoints", type: "symbol", source: "park", layout: { "icon-image": "parkIcon", "icon-allow-overlap": true } }); //Childcare Data and Layer map.addSource("childCare", { type: "geojson", data: childCareGeoJson }); map.addLayer({ id: "childCarePoints", type: "symbol", source: "childCare", layout: { "icon-image": "childcareIcon", "icon-allow-overlap": true } }); }); //School popup map.on("mouseenter", "schoolPoints", function (e) { popup .setLngLat(e.lngLat) .setHTML("

" + e.features[0].properties["School Name"] + "

") .addTo(map); }); map.on("mouseleave", "schoolPoints", function (e) { popup.remove(); }); //Library Popup map.on("mouseenter", "libraryPoints", function (e) { popup .setLngLat(e.lngLat) .setHTML("

" + e.features[0].properties.Name + "

") .addTo(map); }); map.on("mouseleave", "libraryPoints", function (e) { popup.remove(); }); //Government Popup map.on("mouseenter", "govtPoints", function (e) { popup .setLngLat(e.lngLat) .setHTML("

" + e.features[0].properties.name + "

") .addTo(map); }); map.on("mouseleave", "govtPoints", function (e) { popup.remove(); }); //Park Popup map.on("mouseenter", "parkPoints", function (e) { popup .setLngLat(e.lngLat) .setHTML("

" + e.features[0].properties.name + "

") .addTo(map); }); map.on("mouseleave", "parkPoints", function (e) { popup.remove(); }); //Child Care Popup map.on("mouseenter", "childCarePoints", function (e) { popup .setLngLat(e.lngLat) .setHTML("

" + e.features[0].properties.name + "

") .addTo(map); }); map.on("mouseleave", "childCarePoints", function (e) { popup.remove(); }); return map; }30:[] 2d:{"title":"MapLibre Heatmap with Compass","cells":[{"id":0,"value":"# MapLibre Heatmap with Compass\n- Forked from [Lukas Hernandez' heatmap implementation](https://observablehq.com/d/40eebddc9b8eba2d)\n- Added compass from [@cs7290/simple-compass-selector](https://observablehq.com/@cs7290/simple-compass-selector)\n- Switched to [API data](\"https://observablehq.com/d/c16cbf71c8623c43\")\n- Added brush with animation based on [Philip Mathieu's refactored and modified version](https://observablehq.com/d/f95fd9c234b88717) of [@pbogden's original](https://observablehq.com/@pbogden/click-to-recenter-brush-ii)","pinned":false,"hidden":false,"mode":"md"},{"id":836,"value":"## MapLibre Map","pinned":false,"hidden":false,"mode":"md"},{"id":1176,"value":"selectAllBtn = {\n const selectAll = Inputs.button(\"Show All Reports\", {\n value: null,\n reduce: (d) => {\n viewof chart.dispatchEvent(new CustomEvent(\"selectAll\", { bubbles: true }));\n viewof compassFilter.dispatchEvent(new CustomEvent(\"selectAll\", { bubbles: true }));\n }\n });\n selectAll[0].classList.add(\"btn\");\n selectAll[0].classList.add(\"btn-outline-success\");\n selectAll[0].classList.add(\"col-12\");\n return selectAll;\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1318,"value":"resetBrushButton = {\n const selectAll = Inputs.button(\"Reset\", {\n value: null,\n reduce: (d) => {\n viewof chart.dispatchEvent(new CustomEvent(\"defaultExtent\", { bubbles: true }));\n viewof compassFilter.dispatchEvent(new CustomEvent(\"selectAll\", { bubbles: true }));\n }\n });\n selectAll[0].classList.add(\"btn\");\n selectAll[0].classList.add(\"btn-outline-success\");\n selectAll[0].classList.add(\"col-12\");\n return selectAll;\n} ","pinned":false,"hidden":false,"mode":"ojs"},{"id":1172,"value":"animateBtn = {\n const animate = Inputs.button(\"Animate Reports Over Time\", {\n value: null,\n reduce: (d) => {\n viewof chart.dispatchEvent(new CustomEvent(\"animate\", { bubbles: true }));\n }\n });\n animate[0].classList.add(\"btn\");\n animate[0].classList.add(\"btn-outline-primary\");\n animate[0].classList.add(\"col-12\");\n return animate;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1397,"value":"viewof mapLayers = {\n const chex = Inputs.checkbox(\n [\"Schools\",\"Libraries\",\"Parks\",\"Daycares\"],\n {value: [\"Schools\", \"Libraries\", \"Parks\", \"Daycares\"]}\n );\n\n chex[0].classList.add(\"form-check-input\");\n chex[0].parentNode.classList.add(\"layer-label\");\n chex[1].classList.add(\"form-check-input\");\n chex[1].parentNode.classList.add(\"layer-label\");\n chex[2].classList.add(\"form-check-input\");\n chex[2].parentNode.classList.add(\"layer-label\");\n chex[3].classList.add(\"form-check-input\");\n chex[3].parentNode.classList.add(\"layer-label\");\n\n return chex;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1167,"value":"selectAllBtn","pinned":false,"hidden":false,"mode":"ojs"},{"id":94,"value":"viewof basemap = Inputs.radio([\"voyager\", \"positron\", \"dark-matter\"], {value: 'positron', label: \"CARTO basemap\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1499,"value":"mapLayers.onclick = updateLayer()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1506,"value":"mapLayers.onclick = updateLayer()","pinned":false,"hidden":false,"mode":"ojs"},{"id":1453,"value":"{\n function addCompass() {\n if (map.isStyleLoaded() && document.getElementById(\"compass\") === null) {\n container.append(\n html`

Wind Direction

${viewof compassFilter}

`\n );\n } else {\n setTimeout(addCompass, 100);\n }\n }\n addCompass();\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":612,"value":"// container div in separate cell to dodge circular dependency issues\ncontainer = html`\n

\n Loading...\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":833,"value":"## Wind Direction Compass Selector","pinned":false,"hidden":false,"mode":"md"},{"id":250,"value":"// Compass\ncompass = viewof compassFilter","pinned":false,"hidden":false,"mode":"ojs"},{"id":245,"value":"// Import the compass and the directions\nimport {\n viewof compassFilter,\n directions\n} with { brushColor as color } from \"@cs7290/simple-compass-selector\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":831,"value":"## Histogram Brush","pinned":false,"hidden":false,"mode":"md"},{"id":808,"value":"brush = viewof chart","pinned":false,"hidden":false,"mode":"ojs"},{"id":804,"value":"import {\n viewof chart\n} with {\n brushTitleText as titleText,\n brushWidth as width,\n brushHeight as height,\n brushColor as color,\n brushX as x\n} from \"f95fd9c234b88717\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1155,"value":"brushTitleText = \"\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":907,"value":"hist = {\n let bins = brushHist(brushData);\n const yHeight = brushHeight - brushMargin.top - brushMargin.bottom;\n\n // Y axis: scale and draw:\n let yHist = d3\n .scaleLinear()\n .range([yHeight, 0])\n .domain([0, d3.max(bins, (d) => d.length)]);\n\n d3\n .select(brush)\n .selectAll(\".histRect\")\n .data(bins)\n .join(\"rect\")\n .attr(\"class\", \"histRect\")\n .attr(\"x\", 1)\n .attr(\"transform\", function (d) {\n return (\n \"translate(\" +\n brushX(d.x0) +\n \",\" +\n (yHist(d.length) + brushMargin.top) +\n \")\"\n );\n })\n .attr(\"width\", function (d) {\n return brushX(d.x1) - brushX(d.x0) - 1;\n })\n .attr(\"height\", function (d) {\n return yHeight - yHist(d.length);\n })\n .style(\"fill\", brushColor);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":927,"value":"brushHist = function (data) {\n // set the parameters for the histogram\n const histogram = d3\n .histogram()\n .domain(brushX.domain()) // then the domain of the graphic\n .thresholds(brushX.ticks(80)); // then the numbers of bins\n\n // And apply this function to data to get the bins\n return histogram(brushData);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":813,"value":"brushData = geoData.features\n .filter((d) => compassFilter[d.properties.winddir])\n .map((d) => d.properties.datetime)","pinned":false,"hidden":false,"mode":"ojs"},{"id":854,"value":"brushWidth = width / 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":852,"value":"brushHeight = brushWidth / 8","pinned":false,"hidden":false,"mode":"ojs"},{"id":879,"value":"brushColor = \"rgba(44, 149, 66, 0.92)\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":892,"value":"brushX = d3.scaleTime(\n d3.extent(geoData.features, (d) => d.properties.datetime),\n [brushMargin.left, brushWidth - brushMargin.right]\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":899,"value":"brushMargin = ({top: 10, right: 20, bottom: 20, left: 20})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1211,"value":"### What does it smell like?","pinned":false,"hidden":false,"mode":"md"},{"id":1213,"value":"import {chartData as whatSmellChartData, groupedChartData as whatSmellGroupedChartData, BarChart} with {geoData as geoData} from 'bc17b13892793ae0@435'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1474,"value":"whatSmellGroupedChart = BarChart(whatSmellGroupedChartData, {\n x: d => d.count,\n y: d => d.group,\n yDomain: d3.groupSort(whatSmellGroupedChartData, ([d]) => -d.count, d => d.group), // sort by descending frequency\n xLabel: \"Number of Reports →\",\n width,\n color: \"rgba(44, 149, 66, 0.92)\",\n marginLeft: 110,\n marginRight: 10\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1223,"value":"whatSmellChart = BarChart(whatSmellChartData, {\n x: d => d.count,\n y: d => d.word,\n yDomain: d3.groupSort(whatSmellChartData, ([d]) => -d.count, d => d.word), // sort by descending frequency\n xLabel: \"Number of Reports →\",\n width,\n color: \"rgba(44, 149, 66, 0.92)\",\n marginLeft: 110,\n marginRight: 10\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1235,"value":"### When does it smell?","pinned":false,"hidden":false,"mode":"md"},{"id":1510,"value":"import {timeGroupCounts, timeGroups, BarChart as VBarChart} with {geoData as geoData} from '9697627554acbcf2'","pinned":true,"hidden":false,"mode":"ojs"},{"id":1518,"value":"whenChart = VBarChart(timeGroupCounts, {\n x: d => d.group,\n y: d => d.count,\n xDomain: Object.values(timeGroups), // sort by descending frequency\n yLabel: \"↑ Number of Reports\",\n width,\n height: 500,\n color: \"rgba(44, 149, 66, 0.92)\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1240,"value":"### Schools","pinned":false,"hidden":false,"mode":"md"},{"id":1242,"value":"import {popup, maineSchoolsGeoJson} from \"3bfa740e34943fbb\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":517,"value":"// Generate an array consisting of compass values that are currently selected\ndirs = Object.keys(compassFilter)\n .filter((d, i) => Object.values(compassFilter)[i])\n .map((d) => parseInt(d));","pinned":false,"hidden":false,"mode":"ojs"},{"id":1152,"value":"chart","pinned":false,"hidden":false,"mode":"ojs"},{"id":578,"value":"// Apply a filter to the heatmap layer whenever the compass directions change\nfilter = map.isStyleLoaded() // don't attempt to apply filter unless layer is actually loaded\n ? map.setFilter(\"stinkyheat\", [\n \"all\",\n [\"in\", [\"get\", \"winddir\"], [\"literal\", dirs]],\n [\"<=\", [\"get\", \"timestamp\"], Math.floor(brushX.invert(chart[1]) / 1000)],\n [\">=\", [\"get\", \"timestamp\"], Math.floor(brushX.invert(chart[0]) / 1000)]\n ])\n : null","pinned":false,"hidden":false,"mode":"ojs"},{"id":981,"value":"import {mapLibreData as geoData} from \"c16cbf71c8623c43\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"// Use the verbose import approach to make sure styles are ready before the cell's promise resolves\nmaplibregl = {\n const L = await require(\"maplibre-gl@2.2.1\");\n if (!L._style) {\n const href = await require.resolve(\"maplibre-gl@2.2.1/dist/maplibre-gl.css\");\n document.head.appendChild(L._style = html``);\n }\n return L;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1295,"value":"## Additonal Data","pinned":false,"hidden":false,"mode":"md"},{"id":1300,"value":"import {maineLibraryGeoJson} from \"ee6a237b1541fa46\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":1302,"value":"maineGovernmentGeoJson = d3.json('https://api.maptiler.com/data/6fb74804-9038-4dda-84cf-b61cd80c393f/features.json?key=TDrOHrs2NCciGho9Tbk4')","pinned":true,"hidden":false,"mode":"ojs"},{"id":1304,"value":"parkGeojson = d3.json('https://api.maptiler.com/data/874c2842-4205-45d4-bf5c-27715979a278/features.json?key=TDrOHrs2NCciGho9Tbk4')","pinned":true,"hidden":false,"mode":"ojs"},{"id":1306,"value":"childCareGeoJson = d3.json('https://api.maptiler.com/data/cbed102a-adb2-4e51-91e7-87c6a2d64eac/features.json?key=TDrOHrs2NCciGho9Tbk4')","pinned":true,"hidden":false,"mode":"ojs"},{"id":1399,"value":"function updateLayer() {\n if (mapLayers.includes(\"Schools\")){\n map.setLayoutProperty('schoolPoints', 'visibility', 'visible')\n }\n else{map.setLayoutProperty('schoolPoints', 'visibility', 'none')}\n \n if (mapLayers.includes(\"Libraries\")){\n map.setLayoutProperty('libraryPoints', 'visibility', 'visible')\n }\n else{map.setLayoutProperty('libraryPoints', 'visibility', 'none')}\n \n if (mapLayers.includes(\"Parks\")){\n map.setLayoutProperty('parkPoints', 'visibility', 'visible')\n }\n else{map.setLayoutProperty('parkPoints', 'visibility', 'none')}\n \n if (mapLayers.includes(\"Daycares\")){\n map.setLayoutProperty('childCarePoints', 'visibility', 'visible')\n }\n else{map.setLayoutProperty('childCarePoints', 'visibility', 'none')}\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}