2d:null 2e:["$","title",null,{"children":"Death In The Desert | leonardo Nicoletti | Observable"}] 33:T414,html` As part of the AFP Graphical Exercise, this Observable notebook illustrates migrant deaths along the U.S. mexico border since 2014. Below, you will find three visualizations:
- a geographical heatmap showing the totality of migrant deaths along the U.S. mexico border since 2014. This map was produced using the JavaScript programming language, the mapbox.js JavaScript library, and the D3.js JavaScript library.
- A heatmap showing the average number of migrant deaths along the U.S. mexico border per month and per year. This chart was produced using the JavaScript programming language and the Observable Plot JavaScript library.
- A line-chart showing the total number of migrant deaths along the U.S. mexico border per year. This chart was produced using the JavaScript programming language and the Observable Plot JavaScript library
- Data for this project was collected here: https://missingmigrants.iom.int/region/americas

All data analysis and cleaning was done in the javascript programming language.`34:T7ae,{ const data = dataCl.filter(d=>d["Website Date"]!==null) const plot = Plot.plot({ padding: 0, marginTop:0, marginLeft: 30, marginRight: 100, inset: 3, width: 600, height: 200, x: { tickFormat: Plot.formatMonth() }, color: { type: "symlog", scheme: "Cividis", pivot: d3.mean(data, d => d["Number of Dead"]), // reverse: scheme.match("Rd")?true:false, reverse: false, legend: true, label: `Average number of deaths per month`, marginLeft: 45, marginRight: 0, ticks:5, width:330, // nice:true, }, marks: [ Plot.cell(data, Plot.group({fill: "sum"}, { x: d => d["Website Date"].getUTCMonth(), y: d => d["Website Date"].getFullYear(), fill: "Number of Dead", inset: 0.5, stroke:"white", strokeWidth:2, })) ] }) const linePlot = Plot.plot({ padding: 0, marginTop:0, marginLeft: 40, marginRight: 100, marginBottom: 0, inset: 10, width: 600, height: 200, grid:true, x: { tickFormat: d=>d.toString(), }, y: { label:"Number of Deaths", ticks:10 }, marks: [ Plot.lineY(deathsByYear, {x: d=> d["year"], y: "deaths", curve:"catmull-rom", stroke:"darkblue", strokeWidth:2.5}), Plot.dot(deathsByYear, {x: d=> d["year"], y: "deaths", curve:"catmull-rom", fill:"darkblue", strokeWidth:0, r:3}), // Plot.ruleY([0]) ] }) return html`

${[plot, linePlot]}

Data from the Missing Migrant Project

` }35:Tf7b,function renderHeatmap(map, data) { if (map!==undefined) { const geojson = dataGeoJ[0] const sourceId = `h3-hexes`; const layerId = `${sourceId}-layer`; let source = map.getSource(sourceId); // find ID of symbol layer const layers = map.getStyle().layers; // Find the index of the first symbol layer in the map style. let firstSymbolId; for (const layer of layers) { if (layer.type === 'symbol') { firstSymbolId = layer.id; break; } } // Add the source and layer if we haven't created them yet if (!source) { map.addSource(sourceId, { type: 'geojson', data: geojson }); map.addLayer({ id: layerId, source: sourceId, className: "hexes", type: 'heatmap', interactive: false, // maxzoom: 15, paint: { // increase weight as diameter breast height increases 'heatmap-weight': { 'property': 'Number of Dead', 'type': 'exponential', 'stops': [ // [selectD==="Any cause"?heatmapNorm/2:1, 0.1], // [selectG==="Children"?1:heatmapNorm, 1] [selectD==="Any cause"?heatmapNorm/2:1, 0.1], [heatmapNorm, 1] ] }, // increase intensity as zoom level increases 'heatmap-intensity': { 'stops': [ [4.5, 1], [6, 3] ] }, // use sequential color palette to use exponentially as the weight increases 'heatmap-color': [ 'interpolate', ['linear'], ['heatmap-density'], 0, 'rgba(236,222,239,0)', 0.05, config.colorScale[0], 0.1, config.colorScale[1], 0.3, config.colorScale[2], 0.4, config.colorScale[3], 0.5, config.colorScale[4], 0.6, config.colorScale[5], 0.7, config.colorScale[6], 0.75, config.colorScale[7], 0.85, config.colorScale[8], 0.9, config.colorScale[9], 0.95, config.colorScale[10], // 0, // 'rgba(236,222,239,0)', // 0.2, // 'rgb(208,209,230)', // 0.4, // 'rgb(166,189,219)', // 0.6, // 'rgb(103,169,207)', // 0.8, // 'rgb(28,144,153)' ], // increase radius as zoom increases 'heatmap-radius': { 'stops': [ [4.5, 15], [5, 15], [6, 30], [7, 100] ] }, // // increase radius as zoom increases 'heatmap-opacity': { 'stops': [ [4.5, 0.85], [5, 0.8], [6, 0.7], [7, 0.5] ] } } }, 'poi-label' ); source = map.getSource(sourceId); } // Update the geojson data source.setData(geojson); // // tooltip // // map.on('click', layerId, (e) => { // map.on('mouseover', layerId, (e) => { // d3.selectAll(".mapboxgl-popup").remove() // showTooltip(e) // }); // map.on('mousemove', layerId, (e) => { // d3.selectAll(".mapboxgl-popup").remove() // // d3.selectAll(".mapboxgl-popup-content").remove() // // d3.selectAll(".mapboxgl-popup-tip").remove() // showTooltip(e) // }); // map.on('click', layerId, (e) => { // d3.selectAll(".mapboxgl-popup").remove() // showTooltip(e) // }); // // Change the cursor to a pointer when // // the mouse is over the states layer. // map.on('mouseenter', layerId, () => { // map.getCanvas().style.cursor = 'pointer'; // }); // // Change the cursor back to a pointer // // when it leaves the states layer. // map.on('mouseleave', layerId, () => { // map.getCanvas().style.cursor = ''; // d3.selectAll(".mapboxgl-popup").remove() // // d3.selectAll(".mapboxgl-popup-content").remove() // // d3.selectAll(".mapboxgl-popup-tip").remove() // // d3.selectAll(".mapboxgl-popup mapboxgl-popup-anchor-top").remove() // }); // map.setPaintProperty(layerId, 'fill-opacity', config.fillOpacity); } }36:T45a,dataGeoJ = [{ "type": "FeatureCollection", "features": dataCl.map(d=>{ return { "type":"Feature", "geometry":{ "type":"Point", "coordinates":[ d.coords[0], d.coords[1] ] }, "properties":{ date:d["Website Date"], year:d["Incident year"], "Number of Dead":d["Number of Dead"], // "Number of Dead":selectG==="All"?d["Number of Dead"]: // selectG==="Male"?d["Number of Dead"]-d["Number of Females"]: // selectG==="Female"?d["Number of Dead"]-d["Number of Males"]: // selectG==="Adults"?d["Number of Dead"]-d["Number of Children"]:d["Number of Children"], "Total Number of Dead and Missing":d["Total Number of Dead and Missing"], // Female:d["Number of Dead"]-d["Number of Males"], // Male:d["Number of Dead"]-d["Number of Females"], // Adults:d["Number of Dead"]-d["Number of Children"], // Children:d["Number of Children"], } } }) }]37:[{"id":"67b9f924b0b71335042de7c52a8f272c4d0e94fd3691a885d553d1392923ea46d27d9f68f0aaa2f4d22a1d2ae4692b5f73488ecb8e5f04bfc5bf6597b30cbb11","href":"https://static.observableusercontent.com/files/67b9f924b0b71335042de7c52a8f272c4d0e94fd3691a885d553d1392923ea46d27d9f68f0aaa2f4d22a1d2ae4692b5f73488ecb8e5f04bfc5bf6597b30cbb11","name":"Missing_Migrants_Global_Figures_allData.csv","type":"text/csv","lastModified":1652775697924.609,"size":6586158}] 31:{"id":"65d480c250a71e59","slug":"missing-migrants","title":"Death In The Desert","thumbnail":"a8ca468271e61ff065b317d1ece132a629ee8e0ab05987574cd1f535a2ae9581","access_level":"public","create_time":"$D2022-05-17T07:43:48.000Z","update_time":"$D2022-05-17T12:02:36.513Z","view_time":null,"first_public_time":"$D2022-05-24T15:04:53.527Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"405a122b348425fd","login":"lnicoletti","name":"leonardo Nicoletti","avatar_url":"https://avatars-next.observableusercontent.com/36092ac2cd0189ba9d5c4621680d6b2ef55948e600102b0814f4135b9cec7068","tier":"starter_2024"},"version":428,"publish_version":428,"role":null,"authored":false,"authors":[{"type":"individual","id":"8280c368bc7eaac0","login":"lnicoletti","name":"leonardo Nicoletti","avatar_url":"https://avatars-next.observableusercontent.com/36092ac2cd0189ba9d5c4621680d6b2ef55948e600102b0814f4135b9cec7068","tier":null}],"members":[{"type":"individual","id":"8280c368bc7eaac0","login":"lnicoletti","name":"leonardo Nicoletti","avatar_url":"https://avatars-next.observableusercontent.com/36092ac2cd0189ba9d5c4621680d6b2ef55948e600102b0814f4135b9cec7068","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Death In The Desert","cells":[{"id":0,"value":"# Death In The Desert\n#### A visualization prepared for Agence France Presse (AFP)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":18,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":387,"value":"html`

Death in the desert: More Migrants are dying along the U.S. Mexico Border

2021 and 2022 were plagged by a dramatic increase in undocumented migrant deaths

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"html`\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":365,"value":"viewof selectD = Inputs.select(deathCauses, {label: \"Filter by cause of death\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":286,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"md`### Functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"map = renderMap()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"renderHeatmap(map, data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"function renderMap() {\n const map = new mapboxgl.Map({\n\t\t\t\t// container: mapContainer,\n\t\t\t\tcontainer: \"map\",\n\t\t\t\tcenter: [\n\t\t\t\t\tconfig.lng,\n\t\t\t\t\tconfig.lat,\n\t\t\t\t],\n\t\t\t\tzoom: config.zoom,\n\t\t\t\tmaxZoom: 6,\n\t\t\t\tminZoom: 4.5,\n\t\t\t\t\n\t\t\t\tstyle: 'mapbox://styles/mapbox/light-v10',\n\t\t\t\t// style:'mapbox://styles/lnicoletti/ckvzlna3h2vb215mv5hfzfbck/draft?optimize=true'\n\t\t\t\t// style:'mapbox://styles/lnicoletti/ckvzlna3h2vb215mv5hfzfbck/draft'\n\t\t\t\t\t\t\t\n\t\t\t\t// attributionControl: true\n\t\t\t\t});\n // map.on('style.load', function() {\n\t\t// \t\t// renderHexes(map, selectedCity)\n\t\t// \t\trenderHeatmap(map, data)\n\t\t// \t\t// if (mediaWidth<640) {\n\t\t// \t\t// \tmap.addControl(new mapboxgl.FullscreenControl(), 'top-left'); //full screen controls\n\t\t// \t\t// }\n\t\t// \t})\n return map\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"mapboxApiToken = \"pk.eyJ1IjoibG5pY29sZXR0aSIsImEiOiJjazZ1a3I5cjgwNWxtM2xxcDlva2NvaDNzIn0.xDhib2HysGYu4_oIkgHHow\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"mapboxgl = {\n const gl = await require(\"mapbox-gl@2\");\n if (!gl.accessToken) {\n // token allowed only for @sw1227\n gl.accessToken = \"pk.eyJ1IjoibG5pY29sZXR0aSIsImEiOiJjazZ1a3I5cjgwNWxtM2xxcDlva2NvaDNzIn0.xDhib2HysGYu4_oIkgHHow\";\n const href = await require.resolve(\"mapbox-gl@2/dist/mapbox-gl.css\");\n document.head.appendChild(html``);\n }\n return gl;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"md`### Constants`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"config = ({\n lng: -106.0207,\n lat: 30.2667,\n zoom: 4.5,\n fillOpacity: 0.5,\n // colorScale: [\"#fee5d9\",\"#fcbba1\",\"#fc9272\",\"#fb6a4a\",\"#de2d26\",\"#a50f15\"],\n colorScale: [\"#002051\",\"#0a326a\",\"#2b446e\",\"#4d566d\",\"#696970\",\"#7f7c75\",\"#948f78\",\"#ada476\",\"#caba6a\",\"#ead156\",\"#fdea45\"],\n // colorScale: [\"#2166ac\", \"#4393c3\", \"#92c5de\", \"#d1e5f0\", \"#fddbc7\", \"#f4a582\", \"#d6604d\", \"#b2182b\"],\n // colorScaleImp: [\"#f7fcfd\",\"#e0ecf4\",\"#bfd3e6\",\"#9ebcda\",\"#8c96c6\",\"#8c6bb1\",\"#88419d\",\"#6e016b\"],\n // colorScalePop: [\"#fff5eb\",\"#fee6ce\",\"#fdd0a2\",\"#fdae6b\",\"#fd8d3c\",\"#f16913\",\"#d94801\",\"#8c2d04\"],\n areaThreshold: 0.75\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":244,"value":"deathCauses = [\"Any cause\", d3.rollups(data, v => d3.sum(v, d => d[\"Number of Dead\"]), d => d[\"Cause of Death\"]).map(d=>d[0])].flat()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"md`### Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":262,"value":"heatmapNorm = selectD!==\"Any cause\"?d3.max(dataCl, d=>d[\"Number of Dead\"])/2:30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":305,"value":"deathsByYear = d3.rollups(dataCl, v => d3.sum(v, d => d[\"Number of Dead\"]), d => d[\"Incident year\"]).map(d=> { return {\n year:d[0],\n deaths:d[1]\n}})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":258,"value":"dataCl = data.filter(d=>selectD!==\"Any cause\"?d[\"Cause of Death\"]===selectD:d[\"Incident Type\"]!==null)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"data = data_raw.map(d => ({ ...d, coords: d.Coordinates!==null?d.Coordinates.replace(\"POINT (\", \"\").replace(\")\", \"\").split(\" \").map(c=>+c):null })).filter(d=>d[\"Region of Incident\"]===\"North America\"&&d.coords!==null)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"data_raw = FileAttachment(\"Missing_Migrants_Global_Figures_allData.csv\").csv({typed:true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 32:"$31:body"