2b:null 2c:["$","title",null,{"children":"SP2024 Food Insecurity (mapbox, deckGL) | Angie Hjort | Observable"}] 31:T729,hover = (tooltip, {x, y, object}) => { console.log("Hovered Object:", object); if (object) { //haha this should not be the index of the original dataset, here is your problem :) //console.log('this should be index ',object["index"]); //const index = object["index"]; const datapoints = object.points.map(m => m.source); const NUMBER_FI = "# of Food Insecure Persons Overall"; const RATE_FI = "Overall Food Insecurity Rate"; const COUNTY = "County, State"; const counties = datapoints.map(m => m[COUNTY]).join(", "); const numberFi = d3.sum(datapoints, d => d[NUMBER_FI]); //aggregating rates is tricky! you can't just average means between multiple counties //because each county has different population, and thus means have different denominators. //you need to calculate new mean based on total population and the total number of food-insecure const population = d3.sum(datapoints, d => d[NUMBER_FI] / d[RATE_FI]); const overallFi = numberFi / population; const formatRate = (value) => typeof value === 'number' ? (value * 100).toFixed(0) + "%" : 'N/A'; const formatPopulation = (value) => typeof value === 'number' ? (value/1000).toFixed(0) + " k" : 'N/A'; const content = `

County, State: ${counties}

Food Insecurity Rate: ${formatRate(overallFi)}

# of Food Insecure Persons: ${formatPopulation(numberFi)}

`; tooltip.style.display = 'block'; tooltip.style.top = `${y}px`; tooltip.style.left = `${x}px`; tooltip.innerHTML = content; } else { tooltip.style.display = 'none'; } }32:T651,filteredData = { if (checkboxes.length == 0 || checkboxes.length == 3) { return data.get(yearToggle).filter(d => stateToggle === "All States" || d["State Name"] === stateToggle); } else if (checkboxes[0] == "<10%" && checkboxes.length == 1){ return data.get(yearToggle).filter(d => stateToggle === "All States" || d["State Name"] === stateToggle).filter(d => d["Overall Food Insecurity Rate"] < 0.10); } else if (checkboxes[0] == "10-20%" && checkboxes.length == 1){ return data.get(yearToggle).filter(d => stateToggle === "All States" || d["State Name"] === stateToggle).filter(d => d["Overall Food Insecurity Rate"] >= 0.10 && d["Overall Food Insecurity Rate"] <= 0.20) } else if (checkboxes[0] == ">20%" && checkboxes.length == 1){ return data.get(yearToggle).filter(d => stateToggle === "All States" || d["State Name"] === stateToggle).filter(d => d["Overall Food Insecurity Rate"] > 0.20) } else if (checkboxes[0] == "<10%" && checkboxes[1] == "10-20%") { return data.get(yearToggle).filter(d => stateToggle === "All States" || d["State Name"] === stateToggle).filter(d => d["Overall Food Insecurity Rate"] <= 0.20) } else if (checkboxes[0] == "<10%" && checkboxes[1] == ">20%") { return data.get(yearToggle).filter(d => stateToggle === "All States" || d["State Name"] === stateToggle).filter(d => d["Overall Food Insecurity Rate"] < 0.10 ); } else if (checkboxes[0] == "10-20%" && checkboxes[1] == ">20%") { return data.get(yearToggle).filter(d => stateToggle === "All States" || d["State"] === stateToggle).filter(d => d["Overall Food Insecurity Rate"] >= 0.10) } }33:T7c3,officalMap=getttDeckGLMap([ new deck.HexagonLayer({ id: "food-insecurity-heatmap", data: alsoFilterCountyData, // Assuming 'data' is already loaded and filtered as needed radius: 8500, // Adjust this based on the geographic density of your data elevationRange: [0, 1000], // Adjust the max elevation to suit your data scale elevationScale: 1000, // Controls how dramatic the 3D effect is getColorWeight: d => d["Overall Food Insecurity Rate"], colorAggregation: "SUM", getElevationWeight: d => d["Overall Food Insecurity Rate"], elevationAggregation: "SUM", extruded: true, // This is what makes the layer 3D getPosition: d => [Number(d.Longitude), Number(d.Latitude)], pickable: true, upperPercentile: 99.9, lowerPercentile: 0, colorRange: [ // Define a color range for the hexagons [1, 152, 189], [73, 227, 206], [216, 254, 181], [254, 237, 177], [254, 173, 84], [209, 55, 78] ], autoHighlight: true, highlightColor: [255, 255, 255, 255] }), new deck.GeoJsonLayer({ id: "state-boundaries", data: state_boundaries, // GeoJSON data containing state boundaries stroked: true, filled: false, lineWidthMinPixels: 2, // Adjust the minimum line width getLineColor: [ 237, 233, 221], // Adjust the line color for state boundaries lineDashJustified: true, // Optional: Adjust line dash properties if needed lineDasharray: [4, 4], // Optional: Adjust line dash properties if needed }), new deck.GeoJsonLayer({ id: "counties", data: counties, // GeoJSON data containing state boundaries stroked: true, filled: false, lineWidthMinPixels: 0.25, // Adjust the minimum line width getLineColor: [ 237, 233, 221], // Adjust the line color for state boundaries lineDashJustified: true, // Optional: Adjust line dash properties if needed lineDasharray: [4, 4], // Optional: Adjust line dash properties if needed }) ]) 34:[{"id":"23e282911c7f34f484a22cc61de90f78305b3112453f9e2756410ce1d57826e6b083166378cc9b421546d56faee4ec7d253c992d532e56147d11a0e9b92a7dd3","href":"https://static.observableusercontent.com/files/23e282911c7f34f484a22cc61de90f78305b3112453f9e2756410ce1d57826e6b083166378cc9b421546d56faee4ec7d253c992d532e56147d11a0e9b92a7dd3","name":"MMG_2019_2021@1.csv","type":"text/csv","lastModified":1724619260228.629,"size":1045698},{"id":"89175b83f0f9172a2226f356297efe8e203576b973b85c45f4af46118eaf0e927dbc7d5c25802e5136f408eef6d6c775fc947644f8a521d807cc51ac39ee6274","href":"https://static.observableusercontent.com/files/89175b83f0f9172a2226f356297efe8e203576b973b85c45f4af46118eaf0e927dbc7d5c25802e5136f408eef6d6c775fc947644f8a521d807cc51ac39ee6274","name":"gz_2010_us_040_00_5m.geojson","type":"application/geo+json","lastModified":1724619260228.629,"size":2155988},{"id":"8cff2fef944cca47ed6584627ee8c82b7576e1fbb98dfb102ce7eb9b46b54e3221241588547f69a141f727f51e12deaf7201638ff0d55103ff6f1b0dac116ff3","href":"https://static.observableusercontent.com/files/8cff2fef944cca47ed6584627ee8c82b7576e1fbb98dfb102ce7eb9b46b54e3221241588547f69a141f727f51e12deaf7201638ff0d55103ff6f1b0dac116ff3","name":"counties.geojson","type":"application/geo+json","lastModified":1724619260228.629,"size":2962196}] 2f:{"id":"ee1f48955d32849a","slug":"sp2024-food-insecurity-mapbox-deckgl","title":"SP2024 Food Insecurity (mapbox, deckGL)","thumbnail":"88641874957175ffff8f93a1d36b9e9c6de790a6508187f08dd6e130fec7ad5b","access_level":"public","create_time":"$D2024-08-25T20:54:20.228Z","update_time":"$D2024-08-25T21:30:51.709Z","view_time":null,"first_public_time":"$D2024-08-25T20:54:20.228Z","fork":{"id":"079ef059ffcb2dc9","slug":null,"title":"Food Insecurity Rates in the United States","owner":{"id":"0e4f3bfcc8beb20b","login":"dis-2024-spring","name":"🪦 dis-2024-spring"}},"stars":1,"starred":false,"owner":{"type":"team","id":"c555e02063f451b5","login":"angiehjort","name":"Angie Hjort","avatar_url":"https://avatars-next.observableusercontent.com/d3c0d6d22f1525b9f9f1d4c8187de1dc20adc65c5baeb538c15672fb523883fa","tier":"starter_2024"},"version":730,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1245953aabb247aa","login":"angiehjort","name":"Angie Hjort","avatar_url":"https://avatars-next.observableusercontent.com/d3c0d6d22f1525b9f9f1d4c8187de1dc20adc65c5baeb538c15672fb523883fa","tier":null}],"members":[{"type":"individual","id":"1245953aabb247aa","login":"angiehjort","name":"Angie Hjort","avatar_url":"https://avatars-next.observableusercontent.com/d3c0d6d22f1525b9f9f1d4c8187de1dc20adc65c5baeb538c15672fb523883fa","tier":null,"role":"editor"},{"type":"team","id":"c555e02063f451b5","login":"angiehjort","name":"Angie Hjort","avatar_url":"https://avatars-next.observableusercontent.com/d3c0d6d22f1525b9f9f1d4c8187de1dc20adc65c5baeb538c15672fb523883fa","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":0,"collection":{"id":"c2b96431d92a6fa1","slug":"dis-course-projects","title":"Course projects archive","owner":{"id":"c555e02063f451b5","login":"angiehjort","name":"Angie Hjort"}},"type":"notebook","body":{"title":"SP2024 Food Insecurity (mapbox, deckGL)","cells":[{"id":235,"value":"# SP2024 Food Insecurity (mapbox, deckGL)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":545,"value":"**Requirements**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":537,"value":"mapboxgl = require('mapbox-gl@^1.5.1/dist/mapbox-gl.js');","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"mapboxToken = \"pk.eyJ1IjoiYm9zdGFkc2J1c3NlbiIsImEiOiJjbHN1a2JsZzYyODA0Mm1uc285N25hdDR5In0.xpGMqGPiskiRgb4wCyBoTg\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":543,"value":"deck = require.alias({\n h3: {},\n s2Geometry: {}\n})('deck.gl@8.4.1/dist.min.js')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":550,"value":"**Data**\n\nImporting and some minor processing, as we have done the necessary data transformations in the .csv file prior","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":249,"value":"csvData = FileAttachment(\"MMG_2019_2021@1.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":254,"value":"csvData","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":476,"value":"data = d3.group(csvData, d => d[\"Year\"]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":620,"value":"state_boundaries = FileAttachment(\"gz_2010_us_040_00_5m.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":622,"value":"counties = FileAttachment(\"counties.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":553,"value":"**Hover Tooltip Function**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":180,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":559,"value":"**Preliminary Iteration**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":183,"value":"map = getttDeckGLMap([\n new deck.HexagonLayer({\n id: \"food-insecurity-heatmap\",\n data: alsoFilterCountyData,\n radius: 8500,\n elevationRange: [0, 3000],\n elevationScale: 1000,\n getColorWeight: (d) => d[\"# of Food Insecure Persons Overall\"],\n colorAggregation: \"SUM\",\n getElevationWeight: (d) => d[\"# of Food Insecure Persons Overall\"],\n elevationAggregation: \"SUM\",\n extruded: true,\n getPosition: (d) => [d.Longitude, d.Latitude],\n pickable: true,\n upperPercentile: 99.9,\n lowerPercentile: 0,\n colorRange: [\n [1, 152, 189],\n [73, 227, 206],\n [216, 254, 181],\n [254, 237, 177],\n [254, 173, 84],\n [209, 55, 78]\n ],\n })\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":268,"value":"getttDeckGLMap = (layers, pitch, bearing) => {\n let container = html`\n

`;\n let tooltip = html`\n

`;\n container.appendChild(tooltip);\n\n let prevHoveredIndex = null; // Use let instead of const\n\n let deckgl = new deck.DeckGL({\n container,\n map: mapboxgl,\n mapboxAccessToken: \"\",\n mapboxApiAccessToken: mapboxToken,\n mapStyle: \"mapbox://styles/mapbox/dark-v10\",\n layers: layers,\n initialViewState: {\n longitude: -95.6914,\n latitude: 39.0481,\n zoom: 3.8,\n minZoom: 4,\n maxZoom: 17,\n pitch: (pitch = 45),\n bearing: (bearing = -10)\n },\n controller: true,\n onViewStateChange: ({ viewState }) => {\n deckgl.setProps({ viewState });\n },\n onHover: (xyobject) => {\n hover(tooltip, xyobject);\n }\n });\n \n return container;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":480,"value":"yearOptions = new Set(csvData.map(d => d[\"Year\"]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":525,"value":"stateOptions = [\"All States\", ...new Set(csvData.map(d => d[\"State Name\"]))];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":649,"value":"countyOptions = [\"All Counties\", ...new Set(csvData.map(d => d[\"County, State\"]))]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":707,"value":"countyToggle","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":579,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":717,"value":"random = filteredData.filter((d) => countyToggle.includes(d[\"County, State\"]));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":656,"value":"alsoFilterCountyData = {\n if (countyToggle.includes(\"All Counties\") || countyToggle.length === 0) {\n return filteredData;\n } else {\n return filteredData.filter((d) => countyToggle.includes(d[\"County, State\"]));\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":562,"value":"**Most Recent Map Iteration**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":484,"value":"viewof yearToggle = Inputs.range([Math.min(...Array.from(yearOptions)), Math.max(...Array.from(yearOptions))], { type: 'radio', value: yearOptions[0], label: \"Year\", step: 1 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":527,"value":"viewof stateToggle = Inputs.select(stateOptions, { label: \"State\" });","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":661,"value":"viewof countyToggle = Inputs.select(countyOptions, { label: \"Counties (Select a range of values by dragging or Shift-clicking, and select or deselect a value by CMD- or CTRL-clicking.)\" , multiple: true});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":575,"value":"viewof checkboxes = Inputs.checkbox([\"<10%\", \"10-20%\", \">20%\"], {label: \"Food Insecurity %\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":531,"value":"https://rhondakgiadolor.wixsite.com/food-insecurity\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":179,"value":"**To add on later:**\n- Add hover over effect\n- Add slider/checkbox for three years of data\n- add comparing feature for counties\n- For countries with extremely high/low food insecurity rates, add a little description detailing why\n- Add a search feature for specific countries\n- Slide bar for upper and lower percentiles of food insecurity\n- Add legend for the rates","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"