Maps, Graphs, Cities
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: 1 // Update bubble radius based on this variable's value
})
],
height: 500, // Update canvas height
width: 800, // Update canvas width
margin: 10 // Update margins
})
powerPlants = Plot.plot({
projection: "albers-usa",
marks: [
Plot.geo(states, { strokeWidth: 4, stroke: "grey" }), // outline of the USA
Plot.geo(states, { fill: "white", strokeWidth: 2, stroke: "#e2e2e2" }), // Stroke color for internal 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: 1 // 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: 0
})
powerPlantsHighlighted = Plot.plot({
title: "US Power Plants",
projection: "albers-usa",
marks: [
Plot.geo(states, { strokeWidth: 4, stroke: "grey" }), // outline of the USA
Plot.geo(states, { fill: "white", strokeWidth: 2, stroke: "#e2e2e2" }), // Stroke color for internal state boundaries
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: 10,
marginRight: 80
})
unemployment_map = Plot.plot({
projection: "albers-usa",
color: {
n: 5,
type: "quantile",
scheme: "Cool",
// type: "threshold",
// domain: [3,4,5,6],
// range: ['#ffffb2','#fecc5c','#fd8d3c','#f03b20','#bd0026'],
label: "Unemployment (%)",
legend: true
},
marks: [
Plot.geo(counties, {
fill: (d) => d.properties.unemployment,
opacity: 0.8,
}),
Plot.geo(states, {
stroke: "black",
strokeWidth: 1
})
]
})
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: 50,
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"
}
})
Plot.plot({
projection: "equal-earth",
width: 700,
marks: [
Plot.geo(land, { fill: "black" }),
Plot.graticule(),
Plot.sphere()
]
})
land = topojson.feature(land50m, land50m.objects.land)
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.