The avatar for @soma
Soma Maroju
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) => `Country: ${d.country_name} \nGDP: ${d.gdp}`
})
),
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",
anchor: "right"
})
)
],
color: { legend: true }
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
viewof pickRegion = Inputs.select(
wb.map((d) => d.region),
{ label: "Select one", unique: true }
)
Insert cell
viewof pickYear = Inputs.range(
d3.extent(wb, (d) => d.year),
{ label: "Pick Year", step: 1 }
)
Insert cell
Plot.plot({
marks: [
Plot.dot(wb, {
filter: (d) => d.region === pickRegion && d.year <= pickYear,
x: "gdp",
y: "co2",
fill: "country_name",
r: "gdp"
})
],
x: { type: "log" },
y: { type: "log" },
r: { range: [3, 20] }
})
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
viewof pickStates = Inputs.checkbox(plants.map((d) => d.state).sort(), {
label: "Select some",
value: ["A"],
unique: true,
value: ["Alabama", "Alaska", "Arizona"]
})
Insert cell
Plot.plot({
marks: [
Plot.barX(
plants.filter((d) => pickStates.includes(d.state)),
Plot.groupY(
{ x: "sum" },
{
x: "total_capacity",
y: "state",
fill: "primary_source",
sort: { y: "x", reverse: true, limit: 10 }
}
)
),
Plot.ruleX([0])
],
color: { legend: true },
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