The avatar for @trase
Trase
Trase is a supply chain transparency initiative that seeks to transform our understanding of how companies and governments involved in the trade of agricultural commodities are linked to impacts and opportunities for more sustainable production
Published unlisted
Edited
Sep 2, 2022
1
Insert cell
# Soy deforestation in South America in 2019 - Spanish
Insert cell
vis = html`
${title}
${chart}
${legend}
`
Insert cell
Insert cell
Insert cell
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.region_type === r.region_type
);
})
Insert cell
valueCol = "VALUE"
Insert cell
keyCol = "TRASE_ID"
Insert cell
valueTitle = "Deforestación causada por la soja"
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 = getFeatures(selectedRegion)
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