The avatar for @jasper
Jasper Croome
Hi! I'm a Design Technologist based in Portland, Oregon (USA).
Published
Edited
Dec 20, 2021
Fork of Line Graph
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
// 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: "CO2 (ppm)",
groupBy: "Value Name",
spreadBy: "Year"
})
Insert cell
// title for the chart. defaults to:
title = `${metricAccessor}, by ${groupBy}, by ${spreadBy}`
Insert cell
// 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 = (d) => parseInt(d.toString())
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
xDomain = d3.extent(data.map((d) => parseFloat(d[spreadBy])))
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
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