The avatar for @dis-2023-fall
DIS-2023-FALL
Public
Edited
Nov 27, 2023
1
Insert cell
Insert cell
mta = FileAttachment("MTA_Daily_Ridership_Data__Beginning_2020-9 (1).csv").csv()
Insert cell
mta
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
myData
X
Date
Y
Subways: Total Estimated Ridership
Color
—
Size
—
Facet X
—
Facet Y
—
Mark
Auto
Type Chart, then Shift-Enter. Ctrl-space for more options.

Insert cell
myValue = {
const a = 20;
const b = 20;
return a+b;
}
Insert cell
myValue * 20;
Insert cell
myOtherValue = 100
Insert cell
Insert cell
mta
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
myNewDatabase
SELECT * FROM mta
Insert cell
myNewDatabase = DuckDBClient.of({mta})
Insert cell
myEndpointData = d3.json("https://data.ny.gov/resource/vxuj-8kew.json")
Insert cell
Insert cell
myData
X
Buses: Total Estimated Ridership
Y
Subways: Total Estimated Ridership
Color
Subways: Total Estimated Ridership
Size
Subways: Total Estimated Ridership
Facet X
—
Facet Y
—
Mark
Auto
Type Chart, then Shift-Enter. Ctrl-space for more options.

Insert cell
pizza
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
pizza
SELECT * FROM "pizza" WHERE category = ${selectCategory}
Insert cell
Insert cell
viewof range = Inputs.range([1, 100], {label: "Amount", step: 1})
Insert cell
Plot.plot({
marks: [
Plot.areaY(myFilteredData, Plot.windowY({
x: "order_date",
y: "orders",
k: range,
interval: d3.utcDay
})),
Plot.ruleY([0])
]
})
Insert cell
myPizzaData
X
order_date
Y
orders
Color
—
Size
—
Facet X
category
Facet Y
day_of_week
Mark
bar
Type Chart, then Shift-Enter. Ctrl-space for more options.

Insert cell
Plot.plot({
marginLeft: 100,
marginRight: 200,
marks: [
Plot.frame({ strokeOpacity: 0.1 }),
Plot.rectY(
myPizzaData,
Plot.binX(
{ y: "sum" },
{
fx: "category",
fy: "day_of_week",
x: "order_date",
y: "orders",
fill: "category",
tip: true
}
)
),
Plot.ruleY([0])
],
height : 600
})
Insert cell
Plot.plot({
y: {
tickFormat: "s"
},
marks: [
Plot.areaY(industries, {x: "date", y: "unemployed", fill: "industry"}),
Plot.ruleY([0])
]
})
Insert cell
d3.version
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