31:T611,{ const months = { 1: 'enero', 2: 'febrero', 3: 'marzo', 4: 'abril', 5: 'mayo', 6: 'junio', 7: 'julio', 8: 'agosto', 9: 'septiembre' } const colors = { main: '#131c1a', secondary: '#515a69', } return Plot.plot({ width: width, height: width >= 500 ? 135 : 120, marginTop:0, marginBottom: 40, marginLeft: width >= 500 ? 80 : 40, marginRight: width >= 500 ? 80 : 40, y: { axis: 'right', tickSize: 0, ticks: 3, label: null, tickFormat: d => d > 0 ? d == 3000 ? `${d / 1e3} mil` : (d / 1e3) : '' }, x: { axis: 'top', tickSize: 0, ticks: 3, label: null, tickPadding: -10, tickFormat: d => months[d] }, style: { color: colors.secondary }, marks: [ Plot.gridY({ ticks: 3, strokeOpacity: 1, strokeDasharray: "1,3" }), Plot.gridX({ ticks: 9, strokeOpacity: .5, strokeDasharray: "1,6" }), Plot.areaY(viirs, { x: 'month', y: 'count', fill: colors.main, curve: 'basis', }), Plot.text(['focos de calor de alta confianza por mes durante 2023 en Bolivia'], { frameAnchor: 'bottom', lineHeight: 1.5, lineAnchor: 'bottom', dy: 20 }), Plot.text(['VIIRS via Global Forest Watch'], { frameAnchor: 'bottom', lineHeight: 1.5, lineAnchor: 'top', fillOpacity: .5, dy: 28 }) ] }) }32:Tb17,viewof mapa = { const w = width <= 500 ? width *.88 : 384 const h = (w / 384) * 271 let container = html`

` let videoContainer = html`` let video = html`

` videoContainer.appendChild(video) let viewer = html`

` viewer.appendChild(container) viewer.appendChild(videoContainer) yield viewer let onDisplay = null const map = (container.value = new maplibregl.Map({ boxZoom: true, pitch: 0, bearing: 0, container, center: [-64, -16.5], zoom: 5, style: "https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json", scrollZoom: true })) map.on('load', () => { map.setPaintProperty( 'background', 'background-color', colors.main ) map.addSource('scenes', { type: 'geojson', data: 'https://raw.githubusercontent.com/mauforonda/scenes-of-deforestation/main/index.json' }) map.addLayer({ id: 'scenePoints', type: 'circle', source: 'scenes', paint: { 'circle-radius': [ 'case', ['boolean', ['feature-state','clicked'], false], 6, 4 ], 'circle-color': [ 'case', ['boolean', ['feature-state', 'clicked'], false], 'rgba(240, 199, 105, 1.)', 'rgba(203, 212, 148, .8)' ], 'circle-stroke-color': [ 'case', ['boolean', ['feature-state', 'clicked'], false], 'rgba(240, 172, 105, .2)', 'rgba(207, 212, 148, .05)' ], 'circle-stroke-width': 5, 'circle-blur': .4 } }) }) const mouseenter = () => { map.getCanvas().style.cursor = "pointer" } const mousedown = (e) => { if (e.features.length > 0) { const scene = e.features[0] videoContainer.style.display = 'block' video.src = `https://raw.githubusercontent.com/mauforonda/scenes-of-deforestation/main/${scene.properties.filename}` video.load() if (onDisplay) { map.setFeatureState( {source: 'scenes', id: onDisplay}, {clicked: false} ) } onDisplay = scene.id map.setFeatureState( {source: 'scenes', id: onDisplay}, {clicked: true} ) } } const mouseleave = function() { map.getCanvas().style.cursor = ""; } map.on("mouseenter", 'scenePoints', mouseenter); map.on("mouseleave", 'scenePoints', mouseleave); map.on("mousedown", 'scenePoints', mousedown); }33:T5cd,{ return html`

metodología

Construyo un panel desde donde observo alertas de deforestación en 2023 e imágenes en color natural de Planet para enero y septiembre de 2023, lado a lado.

Paseo por estos mapas y colecciono escenas donde las alertas capturan algo visible e interesante en imágenes de Planet. Estas capturas probablemente no son las únicas o las más representativas instancias de deforestación. Realizo los mapas en Google Earth Engine via geemap y jupyter. Las alertas son producidas por la Universidad de Maryland y las imágenes en color natural por Planet. Publico las capturas en github.

`; }34:[{"id":"e1282bfaed2c22681da468f60f76de498cc185ca16d5dcca0e2fd308cea173ed3737767fe79483ad0f023baefef413f3d1addf12856fa2f9af06048df3f68030","href":"https://static.observableusercontent.com/files/e1282bfaed2c22681da468f60f76de498cc185ca16d5dcca0e2fd308cea173ed3737767fe79483ad0f023baefef413f3d1addf12856fa2f9af06048df3f68030","name":"viirs.json","type":"application/json","lastModified":1697640833102.673,"size":45867}] 2f:{"title":"Escenas de Deforestación","cells":[{"id":132,"value":"header = htl.html`

Escenas de Deforestación

\n Escenas de\n
\n Deforestación\n
\n durante 2023 en Bolivia\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":435,"value":"drawLines([\n \"cada año arde el bosque\"\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":231,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":438,"value":"drawLines([\n \"cómo se ven esos árboles\",\n \"y los vacíos que toman su lugar\"\n])","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":165,"value":"html`\n

\n capturas en regiones de alta densidad de alertas de deforestación durante 2023\n ©Planet Labs PBC gracias al programa NICFI\n GLAD Forest Alerts, University of Maryland\n

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":499,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":520,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":3,"value":"maplibregl = {\n const [module, styleURL] = await Promise.all([\n require(\"maplibre-gl@3.1.0\"),\n require.resolve(\"maplibre-gl@3.1.0/dist/maplibre-gl.css\")\n ]);\n \n const style = document.head.appendChild(\n html``\n );\n invalidation.then(() => style.remove());\n \n return module;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":209,"value":"viirs = {\n const file = await FileAttachment('viirs.json').json()\n const data = file.data.\n filter(i => i.confidence__cat == 'h').\n map(i => ({\n date: new Date(i.alert__date),\n count: i.alert__count\n }))\n return Array.from(\n d3.rollup(data, v => d3.sum(v, d => d.count), d => d.date.getUTCMonth() + 1)\n ).map(\n i => {return ({month: i[0], count: i[1]})}\n )\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":381,"value":"colors = ({\n main: '#131c1a',\n secondary: '#515a69',\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":431,"value":"drawLines = (lines) => {\n\n return html`\n

\n ・\n ${lines.map(line => {return `${line}`})}\n ・\n

\n`\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}