Public
Edited
May 17, 2024
1 star
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
LineChart(indexParAnnee.filter(d => d.annee != 1992), {
x: d => d.annee,
y: d => d.nbOeuvres,
z: d => d.medium,
yLabel: "↑ Acquisitions (nb)",
width,
height: 500,
stroke:"medium"
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

Insert cell
import {LineChart} from "@d3/multi-line-chart"
Insert cell
Insert cell
Insert cell
chart2 = Streamgraph(indexCumulatif, {
x: d => d.annee,
y: d => d.cumul,
z: d => d.medium,
yLabel: "↑ Nombre d'œuvres",
width,
height: 600,
color: {
legend: true
}
})
Insert cell
Insert cell
Insert cell
dataGraphiqueStacked = {
var resultat
if (lavallinEt1992)
resultat = indexGroupeParAnnee
else {
resultat = indexGroupeParAnnee.filter(d => d.Annee != 1992)
}
//filtre mediums
//resultat = resultat.filter(d => selectMedium.includes(d.categorie))
resultat.columns = selectMedium
return resultat
}
Insert cell
arc = d3.arc()
.innerRadius(d => y(d[0]))
.outerRadius(d => y(d[1]))
.startAngle(d => x(d.data.Annee))
.endAngle(d => x(d.data.Annee) + x.bandwidth())
.padAngle(0.01)
.padRadius(innerRadius)
Insert cell
x = d3.scaleBand()
.domain(dataGraphiqueStacked.map(d => d.Annee))
.range([0, 2 * Math.PI])
.align(0)
Insert cell
// This scale maintains area proportionality of radial bars
y = d3.scaleRadial()
.domain([0, d3.max(dataGraphiqueStacked, d => d.Total)])
.range([innerRadius, outerRadius])
Insert cell
dataGraphiqueStacked.columns.slice(1)
Insert cell
z = d3.scaleOrdinal()
.domain(dataGraphiqueStacked.columns.slice(1))
.range(d3.schemeSet3)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
height = width
Insert cell
innerRadius = 180
Insert cell
outerRadius = Math.min(width, height) / 2
Insert cell
indexGroupeParAnnee
Insert cell
indexGroupeParAnnee = {
var resultat = []

dates.forEach(a => {
var courant = indexParAnnee.filter(d => d.annee == a)
var anneeEnCours = {
Annee: a
}
var totalAnnuel = 0
mediums.forEach( m => {
var medium = m
var mediumEnCours = courant.find( c => c.medium == m)
if (mediumEnCours){
anneeEnCours[m] = mediumEnCours.nbOeuvres
totalAnnuel += mediumEnCours.nbOeuvres
}
else
anneeEnCours[m] = 0
})

anneeEnCours.Total = totalAnnuel

resultat.push(anneeEnCours)
})
resultat.columns = ["Annee"]
mediums.forEach(m => resultat.columns.push(m))
return resultat

}
Insert cell
chronopoints = Plot.plot({
height: 1500,
width: 1200,
marks: [
Plot.dotX(test, Plot.dodgeY({x:"dateAcquisition", title:"titre", fill:"categorie"}) )
],
x: {domain: [1960, 2023]}, //1600-2022
y: {
tickRotate: 90,
},
marginBottom: 50,
color: {
legend: true
}
})
Insert cell
Insert cell
Plot.plot({
height: 280,
width:1000,
marks: [
Plot.dotX(test, Plot.dodgeY({x: "dateAcquisition", title: "titre", fill: "categorie"}))
]
})
Insert cell
test = oeuvresMacEtudiees.sort((a,b) => {
if (a.categorie < b.categorie)
return -1
if (a.categorie > b.categorie)
return 1
return 0
})
Insert cell
mediums = Array.from(new Set (oeuvresMacEtudiees.map (oeuvre => oeuvre.categorie)))
Insert cell
dates = Array.from(new Set (oeuvresMacEtudiees.map (oeuvre => oeuvre.dateAcquisition))).sort()
Insert cell
tParser = d3.timeParse("%d/%m/%Y")
Insert cell
tParser(1999)
Insert cell
import {palette10couleurs} from "26cecfbef9723965"
Insert cell
import {oeuvresMacEtudiees} from "1cd6c83a4402c258"
Insert cell
import {oeuvresMac} from "9672f0ddecee73e3"
Insert cell
import {Streamgraph} from "@d3/streamgraph"
Insert cell
Insert cell

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.
Learn more