The avatar for @nolanbjohnson
Nolan Johnson
Public
Edited
Oct 26, 2023
Fork of Session 4: Introduction to Observable Plot (Follow-along version)
6
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.dot(wb2010, { x: "gdp", y: "life_exp", fill: "gray" }),
Plot.dot(
wb2010,
Plot.pointer({
x: "gdp",
y: "life_exp",
fill: "red",
opacity: 0.6,
r: 8,
tip: true,
title: (d) => `${d.country_name}`
})
),
Plot.crosshair(wb2010, { x: "gdp", y: "life_exp" })
],
x: { type: "log" },
margin: 50
})
Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.lineY(stocks, {
x: "Date",
y: "Close",
stroke: "symbol",
tip: true,
channels: {
Open: "Open"
}
}),
Plot.tip(
stocks,
Plot.selectMaxY({
x: "Date",
y: "Close",
stroke: "symbol",
fill: "yellow"
})
)
],
color: { legend: true }
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
plants
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.barX(plants,
Plot.groupY(
{ x: "sum" },
{
x: "total_capacity",
y: "state",
fill: "primary_source",
sort: { y: "x", reverse: true, limit: 10 }
}
)
),
Plot.ruleX([0])
],
marginLeft: 100
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Power_Plants.csv
SELECT
Longitude as longitude
, Latitude as latitude
, Plant_Name as plant
, City as city
, County as county
, StateName as state
, Total_MW as total_capacity
, (case when PrimSource = 'petroleum' then 'oil'
when PrimSource = 'geothermal' then 'other'
when PrimSource = 'biomass' then 'other'
when PrimSource = 'pumped storage' then 'other'
when PrimSource = 'batteries' then 'other'
else PrimSource end) as 'primary_source'
FROM "Power_Plants"
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more