Public
Edited
Feb 20, 2024
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
// Describe the tables in the database
db.describe()
Insert cell
Insert cell
db
select * from items
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
db
-- type your SQL code here
select * from events where type = 'purchase'
Insert cell
Insert cell
db
select distinct type from events
Insert cell
Insert cell
Insert cell
db
select * from events
join items on events.item_id = items.id
where type = 'purchase'
LIMIT 5
Insert cell
Insert cell
db
select name, category, brand,
count(*)::int as count,
sum(price_in_usd)::int as revenue
from events
join items on events.item_id = items.id
where type = 'purchase'
group by name, category, brand
order by revenue desc
Insert cell
// type your code here

Insert cell
Insert cell
Insert cell
Insert cell
// type your code here
viewof table = Inputs.table(items, {})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
SummaryTable(items)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
search
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
// type your code here

Insert cell
Plot.plot({
marginLeft: 100,
marks: [
Plot.dot(items, {x: "count", y: "revenue", tip: true, title: "name"})
]
})
Insert cell
Insert cell
Insert cell
Insert cell
// type your code here
Plot.plot({
color: { legend: true },
marginLeft: 100,
marks: [
Plot.dot(items, {
x: "count",
y: "revenue",
tip: true,
title: "name",
fill: "category"
}),
Plot.text(items, {
x: "count",
y: "revenue",
text: "name",
fill: "category",
textAnchor: "end",
dx: -8,
fontSize: (d) => d.count / 10
})
]
})
Insert cell
Insert cell
Insert cell
Insert cell
// type your code here

Insert cell
Insert cell
Insert cell
Insert cell
// type your code here
Plot.plot({
color: { legend: true },
marginLeft: 100,
marks: [
Plot.dot(items, {
x: "count",
y: "revenue",
tip: true,
title: "name",
fill: "category",
//filter: d => d.category == "Apparel",
}),
Plot.text(items, {
x: "count",
y: "revenue",
text: "name",
fill: "category",
textAnchor: "end",
dx: -8,
fontSize: (d) => d.count / 10,
filter: d => d.revenue > 7000
})
]
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
// type your code here
Plot.plot({
color: { legend: true },
marginLeft: 100,
marks: [
Plot.dot(items, {
x: "count",
y: "revenue",
tip: true,
title: "name",
fill: "category",
//filter: d => d.category == "Apparel",
}),
Plot.ruleY([limit]),
Plot.text(items, {
x: "count",
y: "revenue",
text: "name",
fill: "category",
textAnchor: "end",
dx: -8,
fontSize: (d) => d.count / 10,
filter: d => d.revenue > limit
})
]
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
// type your code here

Insert cell
viewof numItems = Inputs.range([0, 100], {label: "Amount", step: 1, value: 10})
Insert cell
Plot.plot({
color: { legend: true },
marginLeft: 250,
marks: [
Plot.barX(items, {
x: "revenue",
y: "name",
fill: "brand",
opacity: (d) =>
d.name.toLowerCase().includes(hlt.toLowerCase()) ? 1 : 0.4,
sort: { y: "x", reverse: true, limit: numItems }
}),
Plot.ruleX([0])
]
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
// type your code here

Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
viewof hlt = Inputs.text({label: "Highlight in chart"})
Insert cell
// type your code here
Plot.plot({
color: { legend: true },
marginLeft: 250,
marks: [
Plot.barX(items, {
filter: f => brands.includes(f.brand),
tip: true,
title: "name",
order: "brand",
x: "revenue",
y: "category",
fill: "brand",
opacity: (d) =>
d.name.toLowerCase().includes(hlt.toLowerCase()) ? 1 : 0.4,
sort: { y: "x", reverse: true, limit: numItems }
}),
Plot.ruleX([0])
]
})
Insert cell
Insert cell
Insert cell
// Get the unique list of brands in the dataset for the checkboxes below
brandOptions = new Set(items.map(d => d.brand))
Insert cell
// type your code here

Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
// type your code here
Plot.plot({
color: { legend: true },
marginLeft: 50,
marks: [
Plot.barX(items, {
filter: f => brands.includes(f.brand),
tip: true,
title: "name",
order: "category",
x: "revenue",
y: d => d.category === "Apparel" ? "Apparel" : "Other",
fill: "category",
opacity: (d) =>
d.name.toLowerCase().includes(hlt.toLowerCase()) ? 1 : 0.4,
sort: { y: "x", reverse: true, limit: numItems }
}),
Plot.ruleX([0])
]
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Plot.barY(
items,
// Group data into categories along the x axis
Plot.groupX(
{ y: "mean" }, // compute + display the count of observations in each group
{ x: "brand", y: "revenue" } // group observations by the `brand`
)
).plot()
Insert cell
Insert cell
Insert cell
Insert cell
viewof reducer = Inputs.radio(["mean", "min", "max", "deviation", "sum"], {
value: "mean",
label: "Summary statistic (reducer):"
})
Insert cell
Insert cell
Plot.barY(
items,
// Group data into categories along the x axis
Plot.groupX(
{ y: reducer }, // compute + display the count of observations in each group
{ x: "brand", y: "revenue" } // group observations by the `brand`
)
).plot()
Insert cell
Insert cell
Insert cell
Insert cell
db
select brand, date_trunc('day', date) as day, SUM(price_in_usd)::INT as revenue from events
left join items on events.item_id = items.id
where type = 'purchase'
group by brand, day
Insert cell
Insert cell
// type your code here
Insert cell
Insert cell
Insert cell
Insert cell
viewof k = Inputs.range([1, 30], {
label: "Number of days for moving average (K)",
value: 7,
step: 1
})
Insert cell
// type your code here
Plot.plot({
marks: [
Plot.dot(byDay, { x: "day", y: "revenue", stroke: "brand" }),
Plot.line(
byDay,
Plot.windowY(
{ y: "mean", k },
{ x: "day", y: "revenue", stroke: "brand" }
)
),
Plot.text(
byDay,
Plot.selectMaxY(
Plot.windowY(
{ y: "mean", k },
{
x: "day",
y: "revenue",
fill: "brand",
dy: -10,
text: (d) => d3.utcFormat("%Y-%m-%d")(d.day) + ": " + d.revenue + " $"
}
)
)
)
],
color: { legend: true }
})
Insert cell
Insert cell
Insert cell
Insert cell
import { Treemap } from "@d3/treemap"
Insert cell
tree = Treemap(items, {
path: (d) => d.category + "/" + d.name,
value: (d) => d?.revenue, // size of each node
group: (d) => d.category, // for color
label: (d, n) => d.name + "\n" + numformat(d.revenue) + "\n " + d.category,
width: width,
height: 700
})
Insert cell
numformat = d3.format(",d")
Insert cell
Insert cell
import {showMe} from "@observablehq/show-me"
Insert cell
import {toc} from "@nebrius/indented-toc"
Insert cell
sampleData = d3.range(100).map(d => ({x: Math.random(), y: Math.random()}))
Insert cell
Insert cell
getSnippet = () => svg`<svg width="16" height="20" viewBox="0 -4 16 16" fill="none"><path d="M13 3H3C2.44772 3 2 3.44772 2 4V12C2 12.5523 2.44772 13 3 13H13C13.5523 13 14 12.5523 14 12V4C14 3.44772 13.5523 3 13 3Z" stroke="currentColor" stroke-width="2"></path><rect x="4" y="9" width="2" height="2" rx="0.5" fill="currentColor"></rect><rect x="7" y="5.5" width="2" height="5.5" rx="0.5" fill="currentColor"></rect><rect x="10" y="7" width="2" height="4" rx="0.5" fill="currentColor"></rect></svg>`
Insert cell
getTop10 = () => svg`<svg width="30" height="20" viewBox="0 0 60 25" fill="none" class="jsx-98319bc75a420d73 mr2 ba b--light-gray moon-gray snippet-thumbnail" style="border-radius: 5px;"><rect width="60" height="40" rx="4" fill="#F5F5F5"></rect><rect x="8.5" y="8.5" width="43" height="23" rx="1.5" fill="white" stroke="currentColor"></rect><rect x="10" y="10" width="33" height="6" rx="1" fill="currentColor"></rect><rect x="10" y="17" width="16" height="6" rx="1" fill="currentColor"></rect><rect x="10" y="24" width="10" height="6" rx="1" fill="currentColor"></rect></svg>`
Insert cell
getScatter = () => svg`<svg width="30" height="20" viewBox="0 0 60 40" fill="none" class="jsx-285534909 mr2 ba b--light-gray moon-gray snippet-thumbnail" style="border-radius: 5px;"><rect width="60" height="40" rx="4" fill="#F5F5F5"></rect><rect x="8.5" y="8.5" width="43" height="23" rx="1.5" fill="white" stroke="#C4C4C4"></rect><circle cx="15.5" cy="25.5" r="2" stroke="currentColor"></circle><circle cx="19.5" cy="20.5" r="2" stroke="currentColor"></circle><circle cx="21.5" cy="21.5" r="2" stroke="currentColor"></circle><circle cx="33.5" cy="19.5" r="2" stroke="currentColor"></circle><circle cx="39.5" cy="18.5" r="2" stroke="currentColor"></circle><circle cx="41.5" cy="17.5" r="2" stroke="currentColor"></circle><circle cx="28.5" cy="23.5" r="2" stroke="currentColor"></circle><circle cx="25.5" cy="17.5" r="2" stroke="currentColor"></circle><circle cx="45.5" cy="13.5" r="2" stroke="currentColor"></circle></svg>`
Insert cell
getRange = () =>
svg`<svg width="40" height="20" viewBox="0 0 60 30" fill="none" class="jsx-285534909 mr2 ba b--light-gray moon-gray snippet-thumbnail" style="border-radius: 5px;"><rect width="60" height="40" rx="4" ></rect><rect x="7.5" y="17.5" width="47" height="5" rx="2.5" fill="white" stroke="currentColor"></rect><rect x="7" y="17" width="33" height="6" rx="3" fill="currentColor"></rect><circle cx="38" cy="20" r="5.5" fill="white" stroke="currentColor"></circle></svg>`
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