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
Curated Datasets
Pizza ParadiseUSAFacts Higher Education DataStack Overflow Developer Survey DataMonthly Retail Trade Report DataCurated datasetsStreetEasy Real Estate DataFAA Laser Reports DataVisualization Publication DatasetDarkCideS: Bats in Caves Data
The MoMA Collection Data
U.S. Geographic DataPlot Test DataNOAA Hourly Weather DataEIA Electricity DataBandcamp Sales DataGoogle Merchandise Sales Data
Also listed in…
Observable's Instagram Shares
Templates
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

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