The avatar for @observablehq
Observable
The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Published
Edited
Aug 31, 2022
Fork of Observable overview
•
4 forks
2 stars
Insert cell
Insert cell
Insert cell
Insert cell
// Importing the database from another notebook
import {db} from "@observablehq/ecommerce-analytics-demo-data"
Insert cell
// Describe the database
db.describe()
Insert cell
// Describe a particular table
db.describe("events")
Insert cell
db
-- Select purchase events
select * from events where type = 'purchase'
Insert cell
db
-- Select items
select * from items
Insert cell
// Import the SummaryTable function from another notebook
import {SummaryTable} from "@observablehq/summary-table"
Insert cell
SummaryTable(events)
Insert cell
db
-- Select purchases and join on items information (namely, the price)
select * from events
join items on events.item_id = items.id
where type = 'purchase'
Insert cell
SummaryTable(data)
Insert cell
Insert cell
viewof bin = Inputs.radio(["Day", "Week"], {label: "Select a time bin:", value: "Week"})
Insert cell
Plot.plot({
marks: [
Plot.line(
data,
Plot.binX(
{ y: "sum" },
{ x: "date", y: "price_in_usd", thresholds: d3[`utc` + bin] }
)
)
]
})
Insert cell
Plot.plot({
marks: [
Plot.rectY(data, Plot.binX({y: "sum"}, {x: "date", y: "price_in_usd", thresholds: d3[`utc` + bin]}))
]
})
Insert cell
Plot.plot({
marks: [
Plot.areaY(
data,
Plot.binX(
{ y: "sum" },
{ x: "date", y: "price_in_usd", thresholds: d3[`utc` + bin] }
)
)
]
})
Insert cell
viewof country = Inputs.select(
new Set(["all", ...data.map((d) => d.country)]),
{ label: "country" }
)
Insert cell
// Filter down the data to the selected country
chartData = data.filter((d) =>
country === "all" ? true : d.country === country
)
Insert cell
Plot.plot({
marks: [
Plot.areaY(
chartData,
Plot.binX(
{ y: "sum" },
{
x: "date",
y: "price_in_usd",
fill: "category",
thresholds: d3[`utc` + bin]
}
)
)
],
facet: {
data: chartData,
y: "category",
marginRight: 200
},
height: 500,
width
})
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