The avatar for @observablehq
Observable
The end-to-end solution for building and hosting better data apps, dashboards, and reports.
Published
Meetup Archive
Edited
May 25, 2022
5 stars
Insert cell
Insert cell
Insert cell
import { db } from '@observablehq/the-moma-collection-data-exploration'
Insert cell
Insert cell
db.describe()
Insert cell
Insert cell
db
SELECT * FROM lookup LIMIT 10
Insert cell
Insert cell
db
SELECT Classification
, count(distinct ObjectID)::int as num_artworks
FROM artworks
GROUP BY Classification
ORDER BY num_artworks DESC
LIMIT 10
Insert cell
Plot.plot({
marks: [
Plot.barX(countOfArtworksByClassification, {x: "num_artworks", y: "Classification", sort: {y: "x", reverse: true}}),
Plot.ruleX([0])
],
marginLeft: 200
})
Insert cell
Insert cell
viewof numberOfArtworksFilter = Inputs.text({label: "Name", submit: true, value: 10})
Insert cell
db
SELECT artists.DisplayName
, artists.BeginDate::varchar as BeginDate
, artworks.Classification
, count(distinct artworks.ObjectID)::int as num_artworks
FROM artworks
JOIN lookup
ON artworks.ObjectID = lookup.ObjectID
JOIN artists
ON artists.ConstituentID = lookup.ConstituentID
WHERE artists.BeginDate > 0
GROUP BY 1, 2, 3
HAVING num_artworks > ${numberOfArtworksFilter}
ORDER BY 4 DESC
Insert cell
Plot.plot({
marks: [
Plot.rectY(countByArtistAndClassification, {x: d => d3.timeParse('%Y')(d["BeginDate"]), y: "num_artworks", interval: d3.utcYear, fill: "Classification"}),
Plot.ruleY([0])
],
color: {
legend: true
}
})
Insert cell
Insert cell
Plot.plot({
x: {
outerPadding: 0
},
marks: [
Plot.areaY(countByArtistAndClassification, {
x: d => d3.timeParse('%Y')(d.BeginDate, 'YYYY'),
y: "num_artworks",
fill: d => customDomain.includes(d['Classification']) ? d['Classification'] : 'Other',
interval: d3.utcYear,
curve: d3.curveStep,
}),
Plot.ruleY([0])
],
// color: {
// legend: true
// }
color: {
type: "categorical",
domain: customDomain,
range: customRange,
legend: true
}
})
Insert cell
customDomain = {
const top5 = countOfArtworksByClassification.filter((d,i) => i < 5).map(d => d.Classification)
top5.push('Other')
return top5;
}
Insert cell
customRange = d3.schemeDark2
Insert cell
Insert cell
viewof selectedArtist = Inputs.select(countByArtistAndClassification.map(d => d.DisplayName), {label: "Select an Artist"})
Insert cell
db
SELECT artists.DisplayName
, artworks.*
FROM artworks
JOIN lookup
ON artworks.ObjectID = lookup.ObjectID
JOIN artists
ON artists.ConstituentID = lookup.ConstituentID
WHERE artists.DisplayName = ${selectedArtist}

Insert cell
viewof selectedArtwork = Inputs.range([0, artistArtworks.length - 1], {label: "Select an Artwork", step: 1})
Insert cell
selectedURL = artistArtworks[selectedArtwork].ThumbnailURL
Insert cell
Insert cell
Insert cell
db
SELECT artists.DisplayName
, artworks.Classification
, count(distinct artworks.ObjectID) as num_artworks
FROM artworks
JOIN lookup
ON artworks.ObjectID = lookup.ObjectID
JOIN artists
ON artists.ConstituentID = lookup.ConstituentID
GROUP BY 1, 2
HAVING num_artworks > 100
ORDER BY 3 DESC
Insert cell
Insert cell
db
SELECT myQuery.*
FROM (
SELECT Medium
, count(distinct artworks.ObjectID) as num_artworks
FROM artworks
LEFT JOIN lookup
ON artworks.ObjectID = lookup.ObjectID
WHERE Classification = 'Architecture'
GROUP BY Medium
-- HAVING num_artworks > 2000
ORDER BY num_artworks DESC
) as myQuery


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