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

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