The avatar for @observablehq
Observable
The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Public
Observable Plot Course
Edited
Oct 26, 2023
6 forks
4 stars
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",
r: 8,
opacity: 0.6,
tip: true,
title: d => `${d.country_name}`
})
),
Plot.crosshair(wb2010, { x: "gdp", y: "life_exp", textFill: "red", textStroke: "white", strokeWidth: 3 })
],
x: {type: "log"},
margin: 50
})
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", anchor: "right", fill: "yellow"})
) // Static annotation!
],
color: { legend: true }
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.dot(wb, {
filter: (d) => d.region == selectRegion && d.year <= pickYear,
x: "gdp",
y: "co2",
fill: "country_name",
r: "gdp",
opacity: d => d.year == pickYear ? 1 : 0.2
})
],
x: { type: "log" },
y: { type: "log" },
r: { range: [3, 20] }
})
Insert cell
Insert cell
Insert cell
plants
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
viewof pickStates = Inputs.checkbox(plants.map(d => d.state).sort(), {label: "Select states to compare:", unique: true, value: ["Alabama", "Alaska", "Arizona"]})
Insert cell
viewof pickSource = Inputs.radio(plants.map(d => d.primary_source), {label: "Select primary source:", unique: true, value: "oil"})
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.barX(
plants.filter(
(d) =>
pickStates.includes(d.state) && d.primary_source == pickSource
),
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
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

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