The avatar for @alainro
Alain Roan
DataViz, Dashboard, Observable Ambassador and Notion Certified
Public
Edited
Jul 5, 2024
1 star
7
Dataviz
Essai d'auto resizeHackaviz - Toulouse - 2018Quadtree can speed up pan and zoom on a canvasIntroduction à Vega Lite
Plot
Stacked Bars for funDual Axis ChartsObservable en ObservableA Misleading Plot - It is even worse than you thinkLe diagramme en ligne est un traitreLes surfaces sont difficiles à évaluerShark AttackLa plus mauvaise représentation du résultat des élections législativesFace recognition doesn't work upside downZoomable Nested Treemap of PopulationTest de perception des longueursStacked, Grouped, PerCent or SmallMultipleQui travaille le cerveau ou l'oeil ?
Also listed in…
Observable
Insert cell
Insert cell
Insert cell
Insert cell
B = a * 76
Insert cell
a = 245
Insert cell
Insert cell
Un texte formaté
* Titre
* point 1
* point 2
Insert cell
Insert cell
<input type=range>
Insert cell
Insert cell
E = mc^2 / \pi
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
donnees1 = [
[1, "A"],
[6, "B"],
[2, "A"],
[10, "C"],
[13, "A"],
[8, "C"]
]
Insert cell
Insert cell
Plot.dot(donnees1).plot()
Insert cell
Insert cell
Plot.dot(donnees1, { x: (d, i) => i, y: (d) => d[0] }).plot()
Insert cell
Insert cell
donnees = [
{ index: 0, valeur: 1, cat: "A" },
{ index: 1, valeur: 6, cat: "B" },
{ index: 2, valeur: 2, cat: "A" },
{ index: 3, valeur: 10, cat: "C" },
{ index: 4, valeur: 13, cat: "A" },
{ index: 5, valeur: 8, cat: "C" }
]
Insert cell
Insert cell
Plot.dot(donnees, { x: "index", y: "valeur" }).plot()
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Plot.dot(index, { x: index, y: valeur }).plot()
Insert cell
Insert cell
Plot.line(donnees, {
y: d3.randomNormal(), // Chaque rafraichissement de la cellule va changer le graphe : clic sur le triangle bleu
x: "index"
}).plot()
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Inputs.table(athletes)
Insert cell
Insert cell
Plot.dot(athletes, { x: "weight", y: "height", fill: "sex" }).plot()
Insert cell
Insert cell
Plot.dot(athletes, { x: "weight", y: "height", fill: "sex" }).plot({
y: { domain: [0, 2.2] },
x: { domain: [0, 160] }
})
Insert cell
Insert cell
Insert cell
Plot.plot({
y: { domain: [0, 2.5], grid: true },
x: { domain: [0, 190], grid: true },
marks: [
Plot.frame(),
Plot.dot(athletes, { x: "weight", y: "height", fill: "sex" })
]
})
Insert cell
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.

Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
y: {
grid: true
},
marks: [
Plot.line(d3.shuffle(aapl.slice(0, 100)), {
//sort: "Date", // retirer le commentaire pour faire apparaitre la véritable courbe
x: "Date",
y: "Close"
})
]
})
Insert cell
Insert cell
Insert cell
Plot.plot({
inset: 10,
grid: true,
x: {
label: "Miles driven (per person-year) →"
},
y: {
label: "↑ Cost of gasoline ($ per gallon)"
},
marks: [
Plot.line(driving, { x: "miles", y: "gas", curve: "catmull-rom" }),
Plot.dot(driving, { x: "miles", y: "gas", fill: "currentColor" }),
Plot.text(driving, {
filter: (d) => d.year % 5 === 0,
x: "miles",
y: "gas",
text: "year",
dy: -6
})
]
})
Insert cell
Insert cell
Plot.plot({
x: {
domain: d3.groupSort(
donnees,
(g) => -d3.sum(g, (d) => d.valeur),
(d) => d.cat
)
},
marks: [
Plot.barY(donnees, Plot.groupX({ y: "sum" }, { x: "cat", y: "valeur" }))
]
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Plot.barY(donnees, { x: "index", y: "valeur", fill: "cat" }).plot()
Insert cell
---
Insert cell
Insert cell
Insert cell
<img src=${await FileAttachment("cashflow.png").url()}>
Insert cell
Insert cell
dflow = baignoire.values
Insert cell
Insert cell
Insert cell
Plot.barY(dflow, {
x: "date",
y: "value",
fill: (d) => d.value > 0 // Ne fait pas ce que l'on croit au premier abord
//fill: (d) => (d.value > 0 ? "blue" : "red")
}).plot()
Insert cell
Insert cell
Plot.plot({
color: { domain: [true, false], range: ["lightblue", "lightgrey"] },
marks: [Plot.barY(dflow, { x: "date", y: "value", fill: (d) => d.value > 0 })]
})
Insert cell
Insert cell
Plot.plot({
color: { domain: ["credit", "debit"], range: ["lightblue", "lightgrey"] },
x: "date",
y: "value",
marks: [
Plot.barY(dflow, {
x: "date",
y: "value",
fill: (d) => (d.value > 0 ? "credit" : "debit")
}),
Plot.tickY(
dflow,
Plot.groupX({ y: "sum" }, { x: "date", y: "value", strokeWidth: 2 })
)
]
})
Insert cell
Insert cell
Plot.plot({
color: { domain: ["credit", "debit"], range: ["lightblue", "lightgrey"] },
x: "date",
y: "value",
marks: [
Plot.barY(dflow, {
x: "date",
y: "value",
fill: (d) => (d.value > 0 ? "credit" : "debit")
}),
Plot.tickY(
dflow,
Plot.groupX({ y: "sum" }, { x: "date", y: "value", strokeWidth: 2 })
),
Plot.text(dbal, {
filter: (d) => d.bal > 0,
x: "date",
y: "bal",
fontSize: 30,
text: () => "▲",
textAnchor: "middle",
dy: 2
}),
Plot.text(dbal, {
filter: (d) => d.bal < 0,
x: "date",
y: "bal",
fontSize: 30,
text: () => "▼",
textAnchor: "middle",
dy: 19
})
]
})
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Plot.plot({
color: { scheme: "viridis" }, //range: ["red", "blue", "grey"] },
marks: [Plot.barY(series, { x: "index", y: "value", fill: "serie" })]
})
Insert cell
Insert cell
Plot.plot({
color: { scheme: "viridis" },
facet: { data: series, x: "serie" },
fx: { domain: [0, 1, 2] },
marks: [Plot.barY(series, { x: "index", y: "value", fill: "serie" })]
})
Insert cell
Insert cell
Plot.plot({
color: { scheme: "viridis" },
facet: { data: series, x: "index" },
fx: {
domain: d3.range(0, 20)
},
marks: [Plot.barY(series, { x: "serie", y: "value", fill: "serie" })]
})
Insert cell
Insert cell
Insert cell
yz
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
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