Public
Edited
Jun 9, 2024
1 fork
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
title: `Chronology of public artworks`,
width: chartWidth, //dynamic input for the width of the chart
height: chartHeight, //dynamic input for the height of the chart
marginBottom: 50, //add a margin at the botton to see the dates better
marks: [
Plot.dot(chartData, Plot.dodgeY({ //make a dot for each artwork in the chartData
x: "date", // place it on the x axis according to the date
fill:"gender", //fill it using the gender value
sort: "gender",
title: "title", //defin the title of each element
tip: true, //show the title when you hover over the element
href:"url", //add clic interaction
target: "_blank"}))// opens a new tab in the browser
],
color: { //create a color scale to associate gender values with colors
type: "categorical",
domain: ["woman", "non binary", "man", "mixed", "collective", "unknown"],
range: [bordeau, turquoise, noir, jaune, jaune, gris],
legend: true
},
x: {
grid: true,
tickRotate: -45
},
})
Insert cell
Insert cell
chartData = {
var genderFilter = data.filter(d => genderSelection.includes(d.gender))
var timeFilter = genderFilter.filter(d => d.year < timeInterval[1] && d.year > timeInterval[0])

if (categoryFilter != null)
return timeFilter.filter(d => d.categories && d.categories.includes(categoryFilter))
else
return timeFilter
}
Insert cell
Insert cell
Insert cell
data
Insert cell
Insert cell
genderIdentities = _.uniq(data.map(d => d.gender))
Insert cell
Insert cell
categories = {
var categories = []
data.forEach(artwork => {
if (artwork.categories)
artwork.categories.map(c => categories.push(c))
})

return _.uniq(categories)
}
Insert cell
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

Insert cell
Insert cell
years = _.uniq(data.map(d => d.year)).sort()
Insert cell
stringToDate = d3.timeParse("%Y")
Insert cell
data.forEach(d => {
d.date = stringToDate(d.year)
})
Insert cell
earliest = d3.min(data.map(d => d.year))
Insert cell
latest = d3.max(data.map(d => d.year))
Insert cell
dateToYear = d3.utcFormat("%Y")
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
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