Beef Explainer: Brazilian municipalities concentrating 95% of cattle deforestation (Map) / 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

Workspace

Public

Edited

Oct 24, 2023

Fork of Beef Explainer: Brazilian municipalities concentrating 95% of cattle deforestation (Map)

chart = htl.html`

${titleOnly}

${legendOnly}

${chartOnly}

country = "brazil"

height = width * 0.625

width

keyCol = "trase_id"

valueYear = parseInt(valueYearSelect)

pct_select = [100, 95, 50, {

total : "Total",

quase : "95%",

metade : "50%"

}]

munSelected = SelectedDataMap?.length

munSelectedProduction = d3.sum(SelectedDataMap, (d) => d["cattle_raw_production"])

munSelectedProductionPct = munSelectedProduction /

d3.sum(selectedData, (d) => d["Cattle total production (tonnes)"])

munSelectedExports = d3.sum(SelectedDataMap, (d) => d["cattle_tn"])

munSelectedExportsPct = munSelectedExports /

d3.sum(selectedData, (d) => d["Beef exports (tonnes)"])

valuePct = pct_select[Object.values(pct_select[3]).indexOf(valuePctSelect)]

valueCol = valueColSelect?.column

valueTitle = valueColSelect?.name

valueUnits = valueColSelect?.units

columnsToDisplay = {

const selected = possibleColumns.find((d) => d.column === valueCol);

const other = possibleColumns.filter((d) => d.column !== valueCol);

return [selected, ...other];

}

possibleColumns = [

{

column: "absolute_sum_cattle_def",

units: "(ha)",

selectable: true,

format: ",.0~f"

{

column: "relative_cattle_def_ha_tn",

units: "(ha/tonnes)",

selectable: true,

format: ",.0~f"

{

column: "cattle_tn",

units: "(tonnes)",

selectable: false,

format: ",.0~f"

{

column: "cattle_raw_production",

units: "(tonnes)",

selectable: false,

format: ",.0~f"

}

// {

// column: "pasture_deforestation_full",

// name: "Pasture deforestation and conversion - total",

// units: "(ha)",

// selectable: false,

// format: ",.0~f"

// },

// {

// column: "pasture_total_area",

// name: "Total pasture area",

// units: "(ha)",

// selectable: false,

// format: ",.0~f"

// }

]

tableVis

showLand = true

showBiomes = true

selectedData = data

.sort((a, b) => d3.descending(a[valueCol], b[valueCol]))

.map((d) => {

const obj = {

Municipality: `${d["mun_name"]}, ${d["state_name"]}`

// "Soy deforestation (ha)": d[valueCol]

};

for (const c of possibleColumns) {

obj[`${c.name} ${c.units}`] = d[c.column];

}

if (d["year"] === valueYear) {

return obj;

}

else{

return null

}

})

.filter(element => {

return element !== null;

})

data[0]["absolute_sum_cattle_def_cpct"]

SelectedDataMap = data

.map((d) => {

if (d["year"] === valueYear) {

if (d["absolute_sum_cattle_def_cpct"] <= valuePct) {

return d;

}

return null;

})

.filter((element) => {

return element !== null;

})

// data = configs.data

data = await FileAttachment("general_results_MatoGrosso@1.csv").csv({

typed: true

})

data[0]

configs.data[0]

configs = FileAttachment("95pct_cattledef_map@7.json").json()

dataMap = new Map(

SelectedDataMap

.filter((d) => {

const regionId = String(d[keyCol]).includes("-")

? String(d[keyCol]).split("-")[1]

: 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]).includes("-")

? String(d[keyCol]).split("-")[1]

: String(d[keyCol]);

// return [regionId, +d[valueCol]];

return [regionId, d];

})

)

boundaries = d3.json(

`https://unpkg.com/@trase/trase-atlas@1.1.1/files/${country.toLowerCase()}.json`

)

// world = d3.json("https://unpkg.com/visionscarto-world-atlas/world/50m.json")

world = FileAttachment("world-50m.json").json()

// biomes = FileAttachment("biomes_ecoregions_filtered_no_caatinga.json").json()

biomes = FileAttachment("biome@3.topo.json").json()

features = topojson.feature(boundaries, boundaries.objects[`level${level}`])

.features

// levels of data resolution - will need updating over time

levels = new Map([

["argentina", 3],

["bolivia", 3],

["brazil", 3],

["colombia", 2],

["cote_divoire", 3],

["ecuador", 3],

["paraguay", 2],

["indonesia", 3]

])

countries = Array.from(levels.keys())

level = levels.get(country.toLowerCase())

toTitleCase = (str) => {

return str?.toLowerCase()?.replace(/(^|\s)\S/g, (t) => t?.toUpperCase());

}

projections = new Map([

[

"argentina",

.geoTransverseMercator()

.rotate([69, 0])

.fitSize(

[width, height],

topojson.mesh(boundaries, boundaries.objects.level1)

)

[

"bolivia",

.geoTransverseMercator()

.rotate([50, 55])

.fitSize(

[width, height],

topojson.mesh(boundaries, boundaries.objects.level1)

)

[

"brazil",

.geoPolyconic()

.rotate([54, 0])

.fitSize(

[width, height],

topojson.mesh(boundaries, boundaries.objects.level2)

)

[

"colombia",

.geoTransverseMercator()

.rotate([68, 4.6])

.fitSize(

[width, height],

topojson.mesh(boundaries, boundaries.objects.level1)

)

[

"cote_divoire",

.geoTransverseMercator()

// .rotate([68, 4.6])

.fitSize(

[width, height],

topojson.mesh(boundaries, boundaries.objects.level1)

)

[

"ecuador",

.geoTransverseMercator()

.rotate([50, 55])

.fitSize(

[width, height],

topojson.mesh(boundaries, boundaries.objects.level1)

)

[

"paraguay",

.geoTransverseMercator()

.rotate([63, 0])

.fitSize(

[width, height],

topojson.mesh(boundaries, boundaries.objects.level1)

)

[

"indonesia",

.geoTransverseMercator()

.rotate([-139.5, 0])

.fitSize(

[width, height],

topojson.mesh(boundaries, boundaries.objects.level1)

)

]

])

projection = projections.get(country.toLowerCase())

colourScheme = traseReds

ninetiethPercentile = d3.quantile(

data.map((d) => d[valueCol]),

0.995

)

tenthPercentile = d3.quantile(data.map(d => d[valueCol]), 0.85);

extent = [tenthPercentile, ninetiethPercentile];

colour = d3

.scaleSequential(

d3.interpolateRgbBasis([

"#f7f0ee",

"#fac3be",

"#fc978f",

"#fd7167",

"#f6665c",

"#df5d55",

"#ba4e49"

])

)

.domain(extent)

// colour = d3.scaleSequential(

// d3.extent(dataMap, ([, v]) => v[valueCol]),

// d3.interpolateRgbBasis(colourScheme[9])

// )

numberFormat = ",.0~f"

format = (value) =>

Math.abs(value) < 10

? d3.format(".2r")(value)

: d3.format(numberFormat)(value)

annotate = g => {}

function hover(canvas, svg) {

const path = d3.geoPath(projection);

const highlight = svg

.append("path")

.attr("stroke", "#666")

.attr("stroke-width", 1.5)

.attr("fill", "none");

const tooltip = new Tooltip();

svg.append(() => tooltip.node);

canvas

.style("cursor", "pointer")

.on("touchstart", (event) => event.preventDefault())

.on("pointerenter pointermove", (event) => {

// get feature

let [cx, cy] = d3.pointer(event);

const [x, y] = projection.invert([cx, cy]);

const candidates = index.search(x, y, x, y).map((i) => features[i]);

const f = candidates.find((f) => turf.booleanPointInPolygon([x, y], f));

// define interaction

if (f && dataMap.has(f.id)) {

(cx += 10), (cy += 10);

if (cx + tooltip.width > width) cx -= tooltip.width + 20;

if (cy + tooltip.height > height) cy -= tooltip.height;

tooltip.show(

f.properties.name,

// tooltipKeyValue(tooltipKey, format(dataMap.get(f.id)), f)

generateTooltip(f)

);

tooltip.position(cx, cy);

highlight.attr("d", path(f));

} else {

highlight.attr("d", null);

tooltip.hide();

}

})

.on("pointerout", () => {

highlight.attr("d", null);

tooltip.hide();

});

}

generateTooltip = (d) => {

const spacing = 4.25;

const template = (valueTitle, valueUnits, value, i) => svg`

<text>

<tspan font-size="12px" fill="#839095" x="0" dy="${

spacing * i

}em" font-weight="${

i === 0 ? 700 : 400

}" style="text-transform:uppercase">${valueTitle} ${valueUnits}</tspan>

<tspan font-weight="${i === 0 ? 700 : 400}">${format(value)}</tspan>

</tspan>

return svg`

${columnsToDisplay.map((x, i) =>

template(x.name, x.units, dataMap.get(d.id)[x.column], i)

)}

}

tooltipKey = data.c || `${valueTitle} ${valueUnits ? valueUnits : ""}`

// https://observablehq.com/@rdmurphy/combining-html-canvas-svg-flatbush-for-super-efficient-hov

script = {

const blob = new Blob([`

importScripts("${await require.resolve("flatbush@3.2")}");

onmessage = (event) => {

const { data } = event.data;

const index = new Flatbush(data.length);

data.forEach(bbox => { index.add(...bbox) });

index.finish();

postMessage(index.data);

close();

};

`], {type: "text/javascript"});

const script = URL.createObjectURL(blob);

invalidation.then(() => URL.revokeObjectURL(script));

return script;

}

index = Generators.queue(notify => {

const worker = new Worker(script);

invalidation.then(() => worker.terminate());

worker.addEventListener("message", ({data}) => notify(Flatbush.from(data)))

worker.postMessage({ data: features.map(d => turf.bbox(d)) });

});

import { traseColours, traseReds, fonts } from "@trase/visual-id@1366"

import { legend as legendTemplate } from "@trase/legends@376"

import { titleCard } from "@trase/title-card"

import { Tooltip, tooltipKeyValue, tooltipOffset } from "@trase/tooltip@440"

import { tableVis } with { selectedData as data } from "@trase/table-visualization"

d3 = require("d3@6", "d3-geo-projection@2.9")

topojson = require("topojson-client@3")

Flatbush = require("flatbush@3.2")

turf = require("@turf/turf@5")

simple = require("simple-statistics@7")

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