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
},
})
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
}
data
genderIdentities = _.uniq(data.map(d => d.gender))
categories = {
var categories = []
data.forEach(artwork => {
if (artwork.categories)
artwork.categories.map(c => categories.push(c))
})
return _.uniq(categories)
}
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
years = _.uniq(data.map(d => d.year)).sort()
stringToDate = d3.timeParse("%Y")
data.forEach(d => {
d.date = stringToDate(d.year)
})
earliest = d3.min(data.map(d => d.year))
latest = d3.max(data.map(d => d.year))
dateToYear = d3.utcFormat("%Y")
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.
