Published unlisted
Edited
Sep 9, 2022
1 fork
Insert cell
Insert cell
Insert cell
Insert cell
//plotLegend(legendItems, { fontSize: 14 })
Insert cell
Insert cell
Insert cell
Insert cell
country = "indonesia"
Insert cell
viewof mapYearSelect = Inputs.select([2018, 2019, 2020], {
step: 1,
value: 2018,
label: "Select year:",
format: (d) => d
})
Insert cell
height = width * 0.4
Insert cell
data = Object.assign(
await FileAttachment("id_palm_province_prod@3.csv").csv(),
{
c: "Volume of oil palm (tonnes)"
}
)
.filter((d) => Number(d.year) === mapYearSelect)
.map((d) => ({
id: d.id,
value: d.value
}))
Insert cell
//data = full
// .filter((d) => d.year === mapYearSelect)
// .map((d) => ({
// id: d.id,
// value: d.value
// }))
Insert cell
dataMap = new Map(data.map(({ id, value }) => [id, +value]))
Insert cell
data1 = Object.assign(
await FileAttachment("id_palm_province_prod@3.csv").csv(),
{
c: "Volume of oil palm (tonnes)"
}
).map((d) => ({
id: d.id,
value: d.value
}))
Insert cell
dataMap1 = new Map(data1.map(({ id, value }) => [id, +value]))
Insert cell
Insert cell
mys = FileAttachment("malaysia.json").json()
Insert cell
mills = d3.csvParse(
await FileAttachment("id_palm_mills@1.csv").text(),
(d) => ({
type: "Feature",
properties: d,
geometry: {
type: "Point",
coordinates: [+d.lon, +d.lat]
}
})
)
Insert cell
filteredMills = mills.filter((d) => Number(d.properties.year) === mapYearSelect)
Insert cell
refs = d3.csvParse(await FileAttachment("id_refs@2.csv").text(), (d) => ({
type: "Feature",
properties: d,
geometry: {
type: "Point",
coordinates: [+d.lon, +d.lat]
}
}))
Insert cell
ports = d3.csvParse(await FileAttachment("id_ports.csv").text(), (d) => ({
type: "Feature",
properties: d,
geometry: {
type: "Point",
coordinates: [+d.lon, +d.lat]
}
}))
Insert cell
Insert cell
// 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", 2]
])
Insert cell
level = levels.get(country.toLowerCase())
Insert cell
Insert cell
projection = projections.get(country.toLowerCase())
Insert cell
scaleBarTop = d3
.geoScaleBar()
.orient(d3.geoScaleTop) // The other orientation is d3.geoScaleBottom, which is the default
.top(0.97)
.left(0.01)
.distance(500)
.label(null)
.tickPadding(3) // How far the tick text labels are from the lines
.tickFormat((d, i, e) => (i === e.length - 1 ? `${d} Kilometres` : d))
.tickValues([0, 500])
Insert cell
path = d3.geoPath(projection)
Insert cell
circle = d3.geoPath(projection)
Insert cell
colourScheme = trasePurples
Insert cell
//colour = d3.scaleSequential(d3.extent(dataMap, ([,v]) => v), d3.interpolateRgbBasis(colourScheme[9]));
Insert cell
colour = {
const values = [...dataMap.values()].sort((a, b) => a - b);
const length = values.length >= 6 ? 6 : values.length;
const breaks = simple.ckmeans(values, length).map((d) => d.pop());
return d3
.scaleThreshold()
.domain(breaks)
.range(colourScheme[length + 1].slice(-length));
}
Insert cell
format = value => Math.abs(value) < 1 ? d3.format(".2r")(value) : d3.format(".2s")(value)
Insert cell
titleCase = (text) => {
const titled = text.replace(
/(\w)(\w*)/g,
(_, first, rest) => first.toUpperCase() + rest.toLowerCase()
);
return titled;
}
Insert cell
duration = 750
Insert cell
annotate = g => {}
Insert cell
Insert cell
tooltipKey = data.c || "CPO production (tonnes)"
Insert cell
import {
traseColours,
traseOranges,
traseGreens,
trasePurples,
fonts
} from "@trase/visual-id@1366"
Insert cell
import { legend as legendTemplate } from "@trase/legends@382"
Insert cell
import { Tooltip, tooltipKeyValue, tooltipOffset } from "@trase/tooltip@440"
Insert cell
import { Radio, Table } from "@observablehq/inputs"
Insert cell
import { titleCard } from "@trase/title-card"
Insert cell
Insert cell
d3 = require("d3@6", "d3-geo-projection@2.9", "d3-geo", "d3-zoom", "d3-geo-scale-bar@1")
Insert cell
topojson = require("topojson-client@3")
Insert cell
simple = require("simple-statistics@7")
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