myGraph = Plot.plot({
title: `Chronology of public art: ${categoryFilter}`,
height: chartHeight,
width: chartWidth,
marginBottom: 50,
marks: [
Plot.dot(chartData, Plot.dodgeY({
x: "date",
fill: "gender",
sort: "gender",
title: "title",
tip: true,
href: "url",
target: "_blank"
}))
],
color: {
type: "categorical",
domain: genderIdentities,
range:[burgundy, black, grey, yellow, blue, yellow],
legend: true
},
x: {
tickRotate: -45,
grid: true,
}
})
genderIdentities = _.uniq(data.map(d => d.gender))
chartData = {
var genderFilter = data.filter( d => genderSelection.includes(d.gender))
var timeFilter = genderFilter.filter(d => d.year > timeInterval[0] && d.year < timeInterval[1])
if (categoryFilter != null)
return timeFilter.filter(d => d.categories && d.categories.includes(categoryFilter))//then filter
else //if there is no categery filter
return timeFilter
}
timeInterval[1]
data
Object.keys(data[0])
categories = {
var categories = []
data.forEach(artwork => {
if (artwork.categories)
artwork.categories.map(c => categories.push(c))
})
return _.uniq(categories)
}
timeParser = d3.timeParse("%Y")
data.forEach(d => {
d.date = timeParser(d.year)
})
earliest = d3.min(data.map(d => d.year))
latest = d3.max(data.map(d => d.year))
import {data} from "@lenamk/pre-workshop-data-preparation"
import {interval} from "@mootari/range-slider@1781"
import {jaune as yellow} from "@artistes-femmes-mac/charte-de-couleurs"
import {noir as black} from "@artistes-femmes-mac/charte-de-couleurs"
import {bordeau as burgundy} from "@artistes-femmes-mac/charte-de-couleurs"
import {gris as grey} from "@artistes-femmes-mac/charte-de-couleurs"
import {turquoise as blue} from "@maison-mona/preparation-reconciliation"
data
X
—
Y
territory
Color
gender
Size
—
Facet X
—
Facet Y
—
Mark
bar
Type Chart, then Shift-Enter. Ctrl-space for more options.
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.
