Platform
Resources
Pricing
Sign in
Get started
Alain Roan
DataViz, Dashboard, Observable Ambassador and Notion Certified
Workspace
Fork
Public
2 collections
By
Alain Roan
Edited
Jul 5, 2024
1 star
7
Observable
Observable Framework
Observable en Observable 2024
Plot
Zoomable image
Observable en Observable
Also listed in…
Dataviz
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.
Try it for free
Learn more
Fork
View
Export
Listed in...
Dataviz
Alain Roan
Observable
Alain Roan
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
B
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
a
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
donnees1
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
donnees
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
index
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
valeur
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
cat
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
athletes
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
curve
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
driving
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
bls
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
construction
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
aapl
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
someCloses
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
baignoire
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
dflow
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
dbal
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
series
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML