Unlisted
Edited
Jul 1
Insert cell
# Soy deforestation in South America in 2019
Insert cell
vis = html`
${title}
${chart}
${legend}
`
Insert cell
title = titleCard({
title: "Soy deforestation within and across borders",
subtitle:
"Soy deforestation in 2019 in the jurisdictions of Argentina (Chaco) and Paraguay (Chaco and Atlantic Forest) within the main river systems (Source: Trase Supply Chains).",
width: "100%"
})
Insert cell
legend = legendTemplate({
colour: colour,
title: tooltipKey,
tickFormat: ".0s"
})
Insert cell
chart = {
let container = DOM.element("div", {
// style: `width:${width}px;height:${width / 1.8}px`
style: `height: ${mapHeight}px`
});

yield html`
<link href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" rel="stylesheet">
${container}
<div style="margin: 15px">${legend}</div>
`;

let { lat, lng, zoom } = initalView;
let map = L.map(container, {
center: [lat, lng],
zoom: zoom,
scrollWheelZoom: scrollWheelZoom
});
let osmLayer = L.tileLayer(
"https://api.mapbox.com/styles/v1/bloureiro/ckyt15pwj6l6o15pq62w5l5ri/tiles/256/{z}/{x}/{y}@2x?access_token=pk.eyJ1IjoiYmxvdXJlaXJvIiwiYSI6ImNtY2tmOHd3ZjAxNzYybXB5bDZsNm9kbWgifQ.AzCV9U9ZnPrtTvp-qo1HDg",
{
attribution:
'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors | Mapbox'
}
).addTo(map);

for (const geojson of features) {
const style = (feature) => {
return {
fillColor:
colour(dataMap.get(feature.properties.trase_id)) ||
traseColours.get("lightgrey"),
weight: 0.1,
opacity: 1,
color: "#748f7e",
fillOpacity: 0.7
};
};

let geojsonLayer = L.geoJson(geojson, { style: style })
.bindTooltip((d) => {
const value = dataMap.get(d.feature.properties.trase_id);
return html`
<small>${d.feature.properties.region_type}</small>
<h3>${d.feature.properties.name}</h3>
<h3>${valueTitle}: ${
value ? `${format(value)} ${valueUnits}` : "N/A"
}</h3>
`;
})
.addTo(map);

if (fitToLayerBounds) {
map.fitBounds(geojsonLayer.getBounds());
}
}
}
Insert cell
Insert cell
// set zoom and coordinates here
initalView = ({
lat: -30,
lng: -60,
zoom: 5
})
Insert cell
mapHeight = 600
Insert cell
scrollWheelZoom = false // keeping scrollWheelZoom disable is a good idea for Trase Insights
Insert cell
fitToLayerBounds = false // if you want the map zoom to fit your data layers
Insert cell
viewof regionsSelect
Insert cell
Insert cell
regions = [
{
country: "ARGENTINA",
region_type: "department"
},
{
country: "BRAZIL",
region_type: "country"
},
{
country: "PARAGUAY",
region_type: "department"
}
]
Insert cell
// selectedRegion = regionsSelect
selectedRegion = regions.map((r) => {
return regionsMetadata.find(
(md) => md.country === r.country && md.node_type_slug === r.region_type
);
})
Insert cell
regionsMetadata
Insert cell
valueCol = "VALUE"
Insert cell
keyCol = "TRASE_ID"
Insert cell
valueTitle = "Soy deforestation"
Insert cell
valueUnits = "ha"
Insert cell
data = FileAttachment("past_soy_deforestation_2019@1.csv").csv({
typed: true
})
Insert cell
md`## Code:`
Insert cell
dataMap = new Map(
data
.filter((d) => {
const regionId = String(d[keyCol]);
// ignore regions with XXXXXXX id, which are domestic consumption
if (regionId !== "XXXXXXX" && regionId !== "XX") {
return d;
}
})
.map((d) => {
const regionId = String(d[keyCol]);

return [regionId, +d[valueCol]];
})
)
Insert cell
colourScheme = trasePurples
Insert cell
colour = d3.scaleSequential(
d3.extent(dataMap, ([, v]) => v),
d3.interpolateRgbBasis(colourScheme[9])
)
Insert cell
numberFormat = ".2~s"
Insert cell
format = (value) =>
Math.abs(value) < 1 ? d3.format(".2r")(value) : d3.format(numberFormat)(value)
Insert cell
tooltipKey = `${valueTitle} ${valueUnits ? `(${valueUnits})` : ""}`
Insert cell
features = Promise.all(selectedRegion.map(async (r) => await getFeatures(r)))
Insert cell
## Appendix
Insert cell
L = require("leaflet@1.7.1")
Insert cell
html`<link href='${resolve(
"leaflet@1.7.1/dist/leaflet.css"
)}' rel='stylesheet' />`
Insert cell
topojson = require("topojson-client@3")
Insert cell
import {
traseColours,
traseOrangesco,
trasePurples,
fonts
} from "@trase/visual-id@1366"
Insert cell
import { legend as legendTemplate } from "@trase/legends@376"
Insert cell
import { titleCard } from "@trase/title-card"
Insert cell
import {
viewof regionsSelect,
regionsMetadata,
getFeatures
} from "@trase/regions-picker"
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more