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")
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.