Public
Edited
Mar 16, 2023
Plot.plot({
marks: [
Plot.barX(energy_2021, {
y: "type",
x: "quadrillion_btu",
sort: { y: "x", reverse: true },
fill: "quadrillion_btu"
})
],
marginLeft: 150,
color: { scheme: "Reds" }
})
us_energy.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
Plot.plot({
marks: [
Plot.ruleY([0]),
Plot.lineY(energy_production, {x: "year", y: "quadrillion_btu", stroke: "type"})
],
color: {legend: true},
x: {tickFormat: ""}
})
viewof range = Inputs.range([1, 20], {label: "lineWidth", step: 1, value: 1})
viewof pickType = Inputs.radio(energy_production.map(d => d.type), {label: "Select one", value: "Coal", unique: true})
Plot.plot({
marks: [
Plot.ruleY([0]),
Plot.lineY(energy_production, {
x: "year",
y: "quadrillion_btu",
z: "type",
stroke: d => d.type === pickType ? "red" : "gray",
strokeWidth: range,
title: d => `${d.type}\n${d.quadrillion_btu.toFixed(1)} quadrillion btu`
})
],
color: { legend: true },
x: { tickFormat: "" }
})
power_plants
Plot.plot({
projection: "albers-usa",
marks: [
Plot.geo(states, { stroke: "#ddd", fill: "white", strokeWidth: 1 }),
Plot.dot(us_plants, {
x: "longitude",
y: "latitude",
fill: "primary_source",
r: "total_capacity",
opacity: 0.5
})
],
r: {domain: d3.extent(us_plants, d => d.total_capacity),
range: [1, 20]},
color: {scheme: "spectral"}
})
power_plants
viewof pickSource = Inputs.radio(power_plants.map(d => d.primary_source), {label: "Select one", value: "solar", unique: true})
Plot.plot({
projection: "albers-usa",
marks: [
Plot.geo(states, { stroke: "#ddd", fill: "white", strokeWidth: 1 }),
Plot.dot(us_plants2, {
x: "longitude",
y: "latitude",
fill: "dodgerblue",
r: "total_capacity",
opacity: 0.5
})
],
r: {domain: d3.extent(us_plants2, d => d.total_capacity),
range: [1, 20]},
color: {scheme: "spectral"}
})
import {addTooltips} from "@mkfreeman/plot-tooltip"
energy_2021 = energy_production.filter(d => d.year == 2021)
import {power_plants} from "@observablehq/us-energy-mix-bubble-map-recreation"
import {states} from "@observablehq/us-energy-mix-bubble-map-recreation"
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.
