The end-to-end solution for building and hosting better data apps, dashboards, and reports.
us_power_plants.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
us = FileAttachment("us-counties-10m.json").json()
states = topojson.feature(us, us.objects.states)
Plot.plot({ // Initialize the plot
projection: "albers-usa", // Set the projection
marks: [
Plot.geo(states), // 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
})
],
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" }), // Updated stroke color for state boundaries
Plot.dot(us_power_plants, {
x: "longitude",
y: "latitude",
r: "Total_MW",
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,
width: 800,
margin: 50
})
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
})
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",
stroke: "PrimSource",
strokeOpacity: .5,
opacity: d => selectSource.includes(d.PrimSource) ? 0.7 : 0,
}),
Plot.density(us_power_plants, {
x: "longitude",
y: "latitude",
bandwidth: 10,
thresholds: 10,
stroke: "PrimSource",
fill: "PrimSource",
fillOpacity: 0.25,
opacity: d => selectSource.includes(d.PrimSource) ? 0.7 : 0, // (transparent unless source selected)
mixBlendMode: "multiply",
weight: "Total_MW"
})
],
height: 500,
width: 800,
margin: 50,
density: {
domain: [100, 2000]
},
r: { range: [1, 15], domain: d3.extent(us_power_plants, (d) => d.Total_MW) },
color: { legend: true }
})
Plot.plot({
projection: "albers-usa",
marks: [
Plot.geo(states, { fill: "#eaeaea", stroke: "white" }),
Plot.dot(
us_power_plants,
Plot.hexbin(
{ r: "count", fill: "count" },
{ x: "longitude", y: "latitude" }
)
)
],
height: 500,
width: 800,
margin: 50,
r: { range: [0, 15] },
color: {
legend: true,
label: "Number of power plants:",
scheme: "cool"
}
})
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.
