Hi! I'm a Design Technologist based in Portland, Oregon (USA).
Published
Edited
Jan 29, 2022
// example dataset, copy-pasted directly from spreadsheet
data = d3.tsvParse(
`Entity FarmSize
United States 178.4
Brazil 72.8
United Kingdom 70.9
France 45.0
Austria 34.1
Netherlands 22.1
India 1.3
Ethiopia 1.0
Vietnam 0.7
`,
d3.autoType
)
// this is where you specify the format to be used for the value labels. more info can be found here: https://github.com/d3/d3-format/blob/v3.1.0/README.md#format
formatValue = (d) => {
const f = d3.format("");
return f(d) + " ha";
}
metricAccessor = (d) => {
return parseFloat(d[dataStructure.metricName]);
}
categoryAccessor = (d) => {
return d[dataStructure.categoryName]
}
// this is where you call out what columns should be used for metrics and categories in your chart.
dataStructure = Object({
metricName: data.columns[1],
categoryName: data.columns[0]
})
valueCalc = (n) => `${(n)}`.substring(0, 1) // this converts the values in the data object to gigatons
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.
