Public
Edited
Apr 28
db
sculptures
artists
data = {
// This function takes in an artist object and returns an artist object with a new "sculptures" property
function formatArtist(artist) {
// UPDATE THIS FUNCTION to filter only sculptures with the same ConstituentID as this artist
let artistSculptures = sculptures.filter(x => x.ConstituentID == artist.id)
return {
...artist,
sculptures: artistSculptures,
numSculptures: artistSculptures.length
}
}
return artists.map(formatArtist)
}
data
{
function countByNationality(a, e) {
if (!a[e.Nationality]) {
a[e.Nationality] = {artworks: 0, artists: 0}
}
a[e.Nationality].artworks += e.numSculptures;
a[e.Nationality].artists += 1;
return a;
}
return formattedData.reduce(countByNationality, {})
}
Plot.plot({
marks: [
Plot.barX(barPlotData, {
x: "avg",
y: "nation",
fill: "nation",
stroke: "green",
color: {
type: "categorical",
},
marginLeft: 100,
})
]
})
viewof demoCheckbox = Inputs.checkbox(["a", "b", "c", "d", "e"], {label: "choose some", value: ["a", "d"]})
demoCheckbox
{
function getArtistNationality(artist) {
return artist.Nationality;
}
return artists.map(getArtistNationality)
}
nationalities = artists.map(artist => artist.Nationality);
nations = new Set(nationalities)
viewof nats = Inputs.checkbox(Array.from(nations).sort(), {label: "Nations to display", value: nations})
filteredData = barPlotData.filter(x => nats.includes(x.nation))
Plot.plot({
marks: [
Plot.barX(filteredData, {
x: "avg",
y: "nation",
fill: "nation",
stroke: "green",
color: {
type: "categorical",
},
marginLeft: 100,
})
]
})
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.
