The avatar for @observablehq
Observable
The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Published
Edited
Jun 29, 2022
21 forks
Importers
36 stars
3
Insert cell
Insert cell
Insert cell
Insert cell
db
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Insert cell
Insert cell
db = DuckDBClient.of([
FileAttachment("artworks.parquet"),
FileAttachment("artists@1.parquet"),
FileAttachment("lookup.parquet")
])
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
db
select * from artworks LIMIT 100
Insert cell
Insert cell
db
select * from artists
Insert cell
Insert cell
db
SELECT ObjectID, count(*)::INT as count
FROM lookup
GROUP BY ObjectID
HAVING count > 1
ORDER BY count DESC
Insert cell
Insert cell
db
SELECT
artworks.*,
artists.DisplayName as artist
FROM artworks
JOIN lookup on artworks.ObjectID = lookup.ObjectID
JOIN artists on lookup.ConstituentID = artists.ConstituentID
WHERE artists.DisplayName = 'Pablo Picasso'
ORDER BY DateAcquired ASC
Insert cell
Insert cell
Plot.image(
picassos.filter((d) => d.ThumbnailURL),
Plot.stackY2({
x: "DateAcquired",
src: "ThumbnailURL",
title: "Title",
dy: -10,
width: 20
})
).plot({
width,
height: 400,
grid: true,
marginLeft: 200
})
Insert cell
Insert cell
Insert cell
Insert cell
arts = getArtworks('Pablo Picasso')
Insert cell
Inputs.table(arts)
Insert cell
async function getArtworks(Artist) {
const artistQuery = await db.sql`SELECT
artworks.*,
artists.DisplayName as artist
FROM artworks
JOIN lookup on artworks.ObjectID = lookup.ObjectID
JOIN artists on lookup.ConstituentID = artists.ConstituentID
WHERE artists.DisplayName = ${Artist}
ORDER BY DateAcquired ASC`;
return artistQuery;
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
db
WITH counts AS (
select lookup.ConstituentID as id, count(*)::INT as count from lookup
group by id
)

SELECT artists.DisplayName, artists.BeginDate, counts.count
FROM artists
JOIN counts ON artists.ConstituentID = counts.id
WHERE artists.BeginDate > 1700
ORDER BY count DESC
Insert cell
Plot.plot({
marks: [
Plot.dot(artistCounts, { x: "BeginDate", y: "count", r: "count", fill: "count", title: "DisplayName" }),
],
marginTop: 50,
x: { line: true },
y: { line: true }
})
Insert cell
Insert cell
Insert cell
Insert cell
// artists = d3.csv("https://media.githubusercontent.com/media/MuseumofModernArt/collection/master/Artists.csv")
Insert cell
// artworks = d3.json("https://media.githubusercontent.com/media/MuseumofModernArt/collection/master/Artworks.json")
Insert cell
/*
lookup = ConstituentIDToObjectIDLookup = d3.merge(
artworks.map((d) =>
d.ConstituentID.map((e) => {
return { ConstituentID: e, ObjectID: d.ObjectID };
})
)
)
*/
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