Public
Edited
Sep 5, 2023
import {us_power_plants} from "@observablehq/build-your-first-map-with-observable-plot"
us_power_plants
import {us} from "@observablehq/build-your-first-map-with-observable-plot"
us
states = topojson.feature(us, us.objects.states)
counties = topojson.feature(us, us.objects.counties)
nation = topojson.feature(us, us.objects.nation)
Plot.plot({ // Initialize the plot
projection: "albers-usa", // Set the projection
marks: [
Plot.geo(counties, { fill: "white", stroke: "#e2e2e2" }), // Add the state boundaries
],
r: { range: [1, 15] }, // Limit the size range for dot radii
color: { legend: true }, // Include a legend for the fill color
height: 500, // Update canvas height
width: 800, // Update canvas width
margin: 50 // Update margins
})
Plot.plot({ // Initialize the plot
projection: "albers-usa", // Set the projection
marks: [
Plot.geo(states, { fill: "white", stroke: "#e2e2e2" }), // Add the state boundaries
Plot.dot(us_power_plants, { // Create dot marks (bubbles) using data from power_plants
x: "longitude", // Provide longitude values
y: "latitude", // Provide latitude values
r: "Total_MW", // Update bubble radius based on this variable's value
fill: "PrimSource", // Update dot fill color to depend on primary source (variable: PrimSource)
opacity: 0.7 // Decrease opacity (0 = transparent, 1 = opaque)
})
],
r: { range: [1, 15] }, // Limit the size range for dot radii
color: { legend: true }, // Include a legend for the fill color
height: 500, // Update canvas height
width: 800, // Update canvas width
margin: 50 // Update margins
})
Plot.plot({
projection: "albers-usa",
marks: [
Plot.geo(states, { fill: "white", stroke: "#e2e2e2" }),
Plot.dot(us_power_plants, {
x: "longitude",
y: "latitude",
r: "Total_MW",
fill: "PrimSource",
opacity: 0.7
}),
Plot.dot(us_power_plants, { // Can you figure out what this additional Plot.dot layer adds?
x: "longitude",
y: "latitude",
r: "Total_MW",
fill: "PrimSource",
stroke: "black",
filter: d => d.Total_MW > 3500
}),
Plot.text(us_power_plants, { // Add text to the map using data from us_power_plants
x: "longitude", // Place text horizontally at plant longitude
y: "latitude", // Place text vertically at plant latitude
text: "Plant_Name", // The text that appears is the value from the Plant_Name column,
filter: (d) => d.Total_MW > 3500, // Only add text for plants with capacity exceeding 3500 MW
fontSize: 12, // Increased font size
fontWeight: 600, // Increased font weight
stroke: "white", // Adds white outer stroke to text (for readability)
fill: "black", // Text fill color
textAnchor: "start", // Left align text with the x- and y-coordinates
dx: 15 // Shifts text to the right (starting from left alignment with coordinate)
})
],
r: { range: [1, 15] },
color: { legend: true },
height: 500,
width: 800,
margin: 50
})
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.
