Public
Edited
May 15, 2024
1 star
country = "brazil"
height = width * 0.525
width
keyCol = "origin_ibge_cod"
uniqueCompanies = Array.from(
new Set(data.map((d) => d.destination_company))
).sort()
uniqueMun = Array.from(new Set(SelectedDataMap1.map(d => d.destination_municipality))).sort();
uniqueAddress = Array.from(new Set(SelectedDataMap2.map(d => d.destination_cnpj))).sort();
viewof valueCompany = Inputs.select(["All", ...uniqueCompanies], {
value: "All" // Default to "All" or another logic as necessary
//label: "Select a company or 'All'"
})
viewof valueMun = Inputs.select(["All", ...uniqueMun], {
value: "All", // Default value, or use logic to determine
label: ""
})
viewof valueAddress = Inputs.select(["All", ...uniqueAddress], {
value: "All",
label: ""
})
uniqueSourcing = Array.from(new Set(SelectedDataMap1.map(d => d.origin_municipality)));
munSelected = uniqueSourcing ?.length
assetRiskText = calculateMode(asset.map((d) => d.asst_risk))
viewof valueColSelect = Inputs.select(
possibleColumns.filter((d) => d.selectable),
{ format: (d) => `${d.name} ${d.units}` }
)
valueCol = valueColSelect?.column
valueTitle = valueColSelect?.name
pasture_defo = d3.sum(uniqueDataMap, (d) => d[valueCol])
lowerRiskSum = d3.sum(uniqueDataMap, d => {
if (d.risk_score === "Lower risk") {
return d["prop_flows"];
} else {
return 0; // Return 0 for rows that do not meet the condition
}
});
temp = d3.sum(uniqueDataMap, (d) => {
if (d.risk_score === "Higher risk") {
return d["kg_per_mun"];
} else {
return 0; // Return 0 for rows that do not meet the condition
}
})
higherRiskSum = d3.sum(uniqueDataMap, d => {
if (d.risk_score === "Higher risk") {
return d["prop_flows"];
} else {
return 0; // Return 0 for rows that do not meet the condition
}
});
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: "trase_deforestation_exposure_20",
name: "Soy deforestation area",
units: "(ha)",
selectable: true,
format: ",.0~f"
}
]
//tableVis
showLand = true
showBiomes = true
selectedData = data
.sort((a, b) =>
d3.descending(
a["trase_deforestation_exposure_20"],
b["trase_deforestation_exposure_20"]
)
)
.map((d) => {
const obj = {
Municipality: `${d["destination_municipality"]}, ${d["destination_state"]}`
};
for (const c of possibleColumns) {
obj[`${c.name} ${c.units}`] = d[c.column];
}
return obj;
})
.filter((element) => {
return element !== null;
})
data[0]["risk_score"]
SelectedDataMap1 = data.filter(
(d) => valueCompany === "All" || d.destination_company === valueCompany
)
SelectedDataMap2 = SelectedDataMap1.filter(
(d) => valueMun === "All" || d.destination_municipality === valueMun
)
SelectedDataMap = SelectedDataMap2.filter(
(d) => valueAddress === "All" || d.destination_cnpj === valueAddress
)
uniqueDataMap = SelectedDataMap.filter((d) => {
const seen = new Set();
if (seen.has(d.origin_ibge_cod)) {
return false;
} else {
seen.add(d.origin_ibge_cod);
return true;
}
})
data = await FileAttachment("soy_supply_shed_trase_2020_threshold_95%@1.csv").csv({
typed: true,
})
asset_raw = await FileAttachment("soy_asset_risk_trase_2020_threshold_95%@3.csv").csv({
typed: true,
})
asset1 = asset_raw.filter(
(d) => valueCompany === "All" || d.destination_company === valueCompany
)
asset2 = asset1.filter(
(d) => valueMun === "All" || d.destination_municipality === valueMun
)
asset = asset2.filter(
(d) => valueAddress === "All" || d.destination_cnpj === valueAddress
)
asset_location = {
const features = asset.map((d) => ({
type: "Feature",
properties: {
company: d.destination_company,
risk: d.asst_risk
},
geometry: {
type: "Point",
coordinates: [+d.destination_long, +d.destination_lat]
}
}));
return {
type: "FeatureCollection",
features: features
};
}
circle = d3.geoPath(projection)
data[0]
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_raw = FileAttachment("biome@3.topo.json").json()
features = topojson.feature(boundaries, boundaries.objects[`level${level}`]).features
// Function to filter the geometries
function filterBiomes(geojson, names) {
const filteredGeometries = geojson.objects.data.geometries.filter(
(geometry) => names.includes(geometry.properties.name)
);
return {
...geojson, // Spread the original geojson structure
objects: {
...geojson.objects, // Spread the original objects
data: {
...geojson.objects.data, // Spread the original data
geometries: filteredGeometries // Replace geometries with the filtered list
}
}
};
}
biomes = filterBiomes(biomes_raw, [
"AMAZONIA",
"CERRADO",
"PANTANAL",
"CAATINGA",
"MATA ATLANTICA"
])
bounds = topojson.feature(biomes, biomes.objects.data).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",
d3
.geoTransverseMercator()
.rotate([69, 0])
.fitSize(
[width, height],
topojson.mesh(boundaries, boundaries.objects.level1)
)
],
[
"bolivia",
d3
.geoTransverseMercator()
.rotate([50, 55])
.fitSize(
[width, height],
topojson.mesh(boundaries, boundaries.objects.level1)
)
],
[
"brazil",
d3
.geoPolyconic()
.rotate([54, 0])
.fitSize(
[width, height],
topojson.mesh(boundaries, boundaries.objects.level1)
)
],
[
"colombia",
d3
.geoTransverseMercator()
.rotate([68, 4.6])
.fitSize(
[width, height],
topojson.mesh(boundaries, boundaries.objects.level1)
)
],
[
"cote_divoire",
d3
.geoTransverseMercator()
// .rotate([68, 4.6])
.fitSize(
[width, height],
topojson.mesh(boundaries, boundaries.objects.level1)
)
],
[
"ecuador",
d3
.geoTransverseMercator()
.rotate([50, 55])
.fitSize(
[width, height],
topojson.mesh(boundaries, boundaries.objects.level1)
)
],
[
"paraguay",
d3
.geoTransverseMercator()
.rotate([63, 0])
.fitSize(
[width, height],
topojson.mesh(boundaries, boundaries.objects.level1)
)
],
[
"indonesia",
d3
.geoTransverseMercator()
.rotate([-139.5, 0])
.fitSize(
[width, height],
topojson.mesh(boundaries, boundaries.objects.level1)
)
]
])
projection0 = projections.get(country.toLowerCase())
margin = ({
top: 5,
right: 10,
bottom: 70,
left: 5
})
projection = d3
.geoPolyconic()
.rotate([54, 0])
.fitExtent(
[
[margin.left, margin.top],
[width - margin.right, height - margin.bottom]
],
topojson.feature(biomes, biomes.objects.data)
)
colour = d3
.scaleOrdinal()
.domain(["Higher risk", "Lower risk"])
.range(["#FF6A5F", "#2EE8C5", "#E2EAE7"])
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-family="var(--trase-sans-serif)" font-size="14px" fill="#31464e" x="0" dy="1.4em">
<tspan font-weight="${i === 0 ? 700 : 400}">${format(value)}</tspan>
</tspan>
`;
return svg`
<line x1="0" y1="30" x2="250" y2="30" stroke="#839095" />
${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, traseOranges, 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")
d3_annotation = require("https://cdnjs.cloudflare.com/ajax/libs/d3-annotation/2.5.1/d3-annotation.js")
topojson = require("topojson-client@3")
Flatbush = require("flatbush@3.2")
turf = require("@turf/turf@5")
simple = require("simple-statistics@7")
import { swatches, getLabelLength } from "@trase/legends-2-0"
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.
