Hi! I'm a Design Technologist based in Portland, Oregon (USA).
// declare which columns are to be used for what purpose within the line chart.
// metricAccessor: this column has the metric, to be used for the y axis
// groupBy: this column has the group name in it, to be used to create the separate lines
// spreadBy: this column has the 'spread-by', to be used for the x Axis
dataStructure = Object({
metricAccessor: "Annual C02 Emissions (tons)",
groupBy: "Code",
spreadBy: "Year"
})
// title for the chart. defaults to:
title = `${metricAccessor}, by Fossil Fuel Group, by ${spreadBy}`
// parser for x axis. what format is the date field in your data?
// more details available here: https://github.com/d3/d3-time-format
// examples:
// "%Y" - 2021
// "%B %d, %Y" - November 14, 2021
timeParse = d3.timeParse("%Y")
formatSpecifier = d3.formatSpecifier("G")
(formatSpecifier.precision = d3.precisionFixed(0.01))
formatValue = d3.format(formatSpecifier)
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.
