The avatar for @lenamk
Lena MK
Directrice technique de la Maison MONA Candidate au doctorat en histoire de l’art à l'Université de Montréal, option recherche-création
Public
Edited
May 18, 2024
Fork of Paul's Observable Tips & Tricks
Insert cell
Insert cell
Insert cell
db
SELECT *
FROM artists
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
db
SELECT nationality
, count(*) as num_artists
FROM artists
WHERE nationality is not null
GROUP BY 1
ORDER BY 2 DESC
LIMIT 10
Insert cell
Insert cell
viewof selectNationality = Inputs.select(nationalities.map(d => d.Nationality), {label: "Select one"})
Insert cell
db
SELECT artists.DisplayName
, count(distinct artworks.ObjectID)::int as num_artworks
FROM artists
JOIN lookup
ON artists.ConstituentID = lookup.ConstituentID
JOIN artworks
ON lookup.ObjectID = artworks.ObjectID
WHERE artists.Nationality = ${selectNationality}
GROUP BY 1
ORDER BY 2 DESC
LIMIT 10
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.barX(artistsByNationality, {x: "num_artworks", y: "DisplayName", sort: {y: "x", reverse: true}}),
Plot.ruleX([0])
],
marginLeft: 150
})
Insert cell
Insert cell
db
SELECT artists.DisplayName
, artists.Nationality
, count(distinct artworks.ObjectID)::int as num_artworks
FROM artists
JOIN lookup
ON artists.ConstituentID = lookup.ConstituentID
JOIN artworks
ON lookup.ObjectID = artworks.ObjectID
GROUP BY 1, 2
ORDER BY 3 DESC
Insert cell
Insert cell
d3.group(artistsByNationalities, d => d.Nationality)
Insert cell
viewof selectArtistsByNationality = Inputs.select(d3.group(artistsByNationalities, d => d.Nationality), {label: "Select one"})
Insert cell
Insert cell
selectArtistsByNationality
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.barX(selectArtistsByNationality, {
x: "num_artworks",
y: "DisplayName",
sort: { y: "x", reverse: true, limit: 10 }
}),
Plot.ruleX([0])
],
marginLeft: 150
})
Insert cell
Insert cell
Insert cell
tooltipPlugin(Plot)
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.barX(selectArtistsByNationality, {
x: "num_artworks",
y: "DisplayName",
title: d => `${d.DisplayName} - ${d3.format(',')(d.num_artworks)}`,
sort: { y: "x", reverse: true, limit: 10 }
}),
Plot.ruleX([0])
],
marginLeft: 150
})
Insert cell
Insert cell
db
SELECT artworks.*
FROM artists
JOIN lookup
ON artists.ConstituentID = lookup.ConstituentID
JOIN artworks
ON lookup.ObjectID = artworks.ObjectID
WHERE artists.DisplayName = 'Pablo Picasso'
AND artworks.Classification != 'Illustrated Book'
AND artworks.URL is not null
Insert cell
Insert cell
chart = Plot.plot({
height: 700,
width,
marks: [
Plot.dot(
picassos,
Plot.dodgeY({
x: "DateAcquired",
r: 3,
padding: 0.1,
fill: "Classification",
href: "URL",
target: "_blank"
})
)
],
color: {
legend: true
}
})
Insert cell
Insert cell
Insert cell
Plot.plot({
marks: [
Plot.ruleY([0]),
Plot.lineY(mtaData, { x: "Date", y: "Value", stroke: "#000" }),
],
marginLeft: 60
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
nycHurricanes = [
{name: 'Tropical Storm Fay', date: '07/10/2020'},
{name: 'Tropical Storm Isaias', date: '08/04/2020'},
{name: 'Hurricane Laura', date: '08/31/2020'},
{name: 'Hurricane Delta', date: '10/12/2020'},
{name: 'Hurricane Zeta', date: '10/28/2020'},
{name: 'Hurricane Eta', date: '11/13/2020'},
{name: 'Groundhog Day noreaster', date: '02/01/2021'},
{name: 'Hurricane Elsa', date: '07/09/2021'},
{name: 'Tropical Storm Fred', date: '08/18/2021'},
{name: 'Hurricane Henri', date: '08/22/2021'},
{name: 'Hurricane Ida', date: '09/01/2021'},
{name: 'Hurricane Larry', date: '09/06/2021'},
{name: 'Tropical Storm Wanda', date: '10/26/2021'},
].map(d => ({name: d.name, date: parseDate(d.date)}))
Insert cell
USholidays = [
{name: 'Thanksgiving', date: '11/26/2020'},
{name: 'Thanksgiving', date: '11/25/2021'},
{name: 'Halloween', date: '10/31/2021'},
{name: 'Christmas', date: '12/25/2020'},
{name: 'Christmas Eve', date: '12/24/2020'},
{name: 'Christmas', date: '12/25/2021'},
{name: 'Christmas Eve', date: '12/24/2021'},
{name: 'Labor Day', date: '09/06/2021'},
{name: 'Labor Day', date: '09/07/2020'},
{name: 'New Years Eve', date: '12/31/2020'},
{name: 'New Years Day', date: '01/01/2021'},
{name: 'New Years Eve', date: '12/31/2021'},
{name: 'New Years Day', date: '01/01/2022'},
{name: 'MLK Day', date: '01/18/2021'},
{name: 'MLK Day', date: '02/15/2022'},
{name: 'Presidents Day', date: '02/18/2021'},
{name: 'Presidents Day', date: '02/21/2022'},
{name: 'St. Patricks Day', date: '03/17/2021'},
{name: 'St. Patricks Day', date: '03/17/2022'},
{name: 'Memorial Day', date: '05/25/2020'},
{name: 'Memorial Day', date: '05/31/2021'},
{name: 'Memorial Day', date: '05/30/2022'},
{name: 'July 4th', date: '07/04/2020'},
{name: 'July 4th', date: '07/04/2021'},
{name: 'July 4th', date: '07/04/2022'},
].map(d => ({name: d.name, date: parseDate(d.date)}))
Insert cell
Insert cell
Insert cell
Insert cell
bisect = d3.bisector(d => d.Date)
Insert cell
Plot.plot({
marks: [
Plot.ruleY([0]),
Plot.lineY(mtaData, { x: "Date", y: "Value", stroke: "#ccc" }),
Plot.lineY(seasonallyAdjustedMTA, {
x: "Date",
y: "seasonality",
stroke: "blue"
}),
Plot.dot(nycHurricanes, {
x: "date",
y: d => {
const bisectIndex = bisect.center(
seasonallyAdjustedMTA,
d.date
);
d = seasonallyAdjustedMTA[bisectIndex];
return d['seasonality'];
},
r: 3,
fill: "#E8C655",
stroke: '#000',
strokeWidth: .25,
title: d => `${d3.timeFormat("%Y-%m-%d")(d.date)} ${d.name}`
}),
Plot.dot(USholidays, {
x: "date",
y: d => {
const bisectIndex = bisect.center(
seasonallyAdjustedMTA,
d.date
);
d = seasonallyAdjustedMTA[bisectIndex];
return d['seasonality'];
},
r: 3,
fill: "#BC2E2E",
title: d => `${d3.timeFormat("%Y-%m-%d")(d.date)} ${d.name}`
}),
],
color: {
legend: true,
domain: ["Original Values", `Day of Week Seasonality Adjusted Values`, 'US Holidays', 'NYC Hurricanes'],
range: ["#ccc", "blue", "#BC2E2E", "#E8C655"]
},
marginLeft: 60
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
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