Hi! I'm a Design Technologist based in Portland, Oregon (USA).
data = d3.tsvParse(`Year Scenario Global Surface Temperature ºC (Above 1800-1950)
2020 High Emissions 1.05
2030 High Emissions 1.5
2040 High Emissions 1.75
2050 High Emissions 2.05
2060 High Emissions 2.45
2070 High Emissions 2.75
2080 High Emissions 3.06
2090 High Emissions 3.5
2100 High Emissions 3.95
2020 Low Emissions 1.05
2030 Low Emissions 1.45
2040 Low Emissions 1.53
2050 Low Emissions 1.75
2060 Low Emissions 1.8
2070 Low Emissions 1.81
2080 Low Emissions 1.8
2090 Low Emissions 1.75
2100 Low Emissions 1.73
2020 Mid-level Emissions 1.05
2030 Mid-level Emissions 1.495
2040 Mid-level Emissions 1.6
2050 Mid-level Emissions 1.9
2060 Mid-level Emissions 2.2
2070 Mid-level Emissions 2.4
2080 Mid-level Emissions 2.5
2090 Mid-level Emissions 2.625
2100 Mid-level Emissions 2.75
2020 Very High Emissions 1.05
2030 Very High Emissions 1.6
2040 Very High Emissions 1.9
2050 Very High Emissions 2.25
2060 Very High Emissions 2.8
2070 Very High Emissions 3.25
2080 Very High Emissions 3.75
2090 Very High Emissions 4.25
2100 Very High Emissions 4.75
2020 Very Low Emissions 1.05
2030 Very Low Emissions 1.45
2040 Very Low Emissions 1.5
2050 Very Low Emissions 1.52
2060 Very Low Emissions 1.51
2070 Very Low Emissions 1.5
2080 Very Low Emissions 1.49
2090 Very Low Emissions 1.48
2100 Very Low Emissions 1.47
1950 Historical 0.3
1960 Historical 0.3
1970 Historical 0.25
1980 Historical 0.4
1990 Historical 0.5
2000 Historical 0.7
2010 Historical 0.99
2020 Historical 1.05`)
referenceData = d3
.tsvParse(
`Event Temperature change
50% of all land affected by drought 4.0
850M+ people experience crop yield decreases 3.0
Once/decade drought 2x as likely, extreme heat 5x as likely. 2.0
Current Temperature 1.5`
)
.map((t) => ({
event: t["Event"],
temp: parseFloat(t["Temperature change"])
}))
// 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: "Global Surface Temperature ºC (Above 1800-1950)",
groupBy: "Scenario",
spreadBy: "Year"
})
// title for the chart. defaults to:
title = `Global Air Temperature ºC (Above 1800-1950 average)`
// 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")
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.