Consulting software guide and technical mentor for climate companies. 10+yrs in software, data and climate.
textFormat = tonnes => {
const kilogramsFormat = `${tonnes*1000}kg`
const tonnesFormat = `${d3.format(".2s")(tonnes)}t`
return tonnes < 1 ? kilogramsFormat : tonnesFormat
}
// Check what the result looks like
impacts.map(d=>textFormat(d['co2e (tonnes)']))
diagonalLength = 50
calloutHeight = 25
textDistanceToCallout = 7
x = d3.scaleLinear()
.domain([0, 100])
.range([0, width])
// From Carbon Context by Duncan Geere: google sheet converted to json
// https://docs.google.com/spreadsheets/d/1kPuNFFncPWrx2ZZqCT7cT4j0pwmL9O29MLLzCAyo3sg/edit#gid=0
impacts = FileAttachment("impacts.json").json()
height = 800
// How many orders of magnitude should each subchart cover?
// oomPerSubchart = 3 // we moved this to a view up above
getOrderOfMagnitude = x => Math.floor(Math.log10(x))
import {wrap_text} from "@ben-tanen/svg-text-and-tspan-word-wrapping@224"
impactsTons = impacts.map(d=>d['co2e (tonnes)']);
impactsOom = impactsTons.map(getOrderOfMagnitude)
dataOomRange = {
const extent = d3.extent(impactsOom)
return {
min: extent[0],
max: extent[1]
}
}
d3.extent(Object.keys(oomBins).map(d=>+d))
subchartCount = Math.ceil((maxOom - minOom) / oomPerSubchart)
subchartIndices = [...Array(subchartCount).keys()]
xDomainEdges = {
// [0,1,2,3, ... , subchartCount]
const subchartIndicesWithRightEdge = [...subchartIndices, subchartCount]
// [-2,0,2,4, ...] (orders of magnitude)
const subchartEdgeOoms = subchartIndicesWithRightEdge.map(i => (i * oomPerSubchart) + minOom)
// [1e-2,1e0,1e2,1e4, ...]
const subchartEdges = subchartEdgeOoms.map(oom => Math.pow(10, oom))
return subchartEdges
}
xDomains = xDomainEdges
.slice(0,-1) // get left edges only
.map(
(leftEdge, index) => [
leftEdge,
xDomainEdges[index + 1]
]
)
getSubchartIndex = x => xDomains.findIndex(([minRange, maxRange]) => (maxRange >= x))
// Quick test - these should all be reasonable indices
[
getSubchartIndex(0),
getSubchartIndex(1000),
getSubchartIndex(Math.min(...impactsTons)),
getSubchartIndex(Math.max(...impactsTons))
]
xRange = [margin.left, width - margin.right]
subchartUpperEdges = subchartIndices.map(i => subchartHeight * i + margin.top)
subchartHeight = (height - margin.top - margin.bottom) / subchartCount
margin = ({top: 20, right: 200, bottom: 20, left: 100})
markerCircleRadius = 5
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.
