Platform
Resources
Pricing
Sign in
Get started
Adam Roberts
Workspace
Fork
Public
By
Adam Roberts
Edited
Feb 24, 2023
1 fork
3 stars
1
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
svg
`<svg width=16 height=16>
<circle cx=8 cy=8 r=4></circle>
</svg>`
Insert cell
Insert cell
import
{
ramp
}
from
"@mbostock/ramp"
Insert cell
plasma
=
d3
.
interpolatePlasma
Insert cell
ramp
(
plasma
)
Insert cell
Insert cell
Insert cell
svg
`<svg width=${
width
} height=60>
${
circles
.
map
(
(
d
,
i
)
=>
svg
`
<circle
cx=${
8
+
i
*
(
d3
.
max
(
circles
)
*
rMultiplier
*
2
)
}
cy=30
r=${
d
*
rMultiplier
}
fill=${
plasmify
?
plasma
(
i
/
(
circles
.
length
-
1
)
)
:
"#000"
}
></circle>
`
)
}
</svg>`
Insert cell
Insert cell
viewof
rMultiplier
=
Inputs
.
range
(
[
1
,
6
]
,
{
value
:
3
}
)
Insert cell
Insert cell
viewof
plasmify
=
Inputs
.
toggle
(
{
label
:
"Plasmify"
,
value
:
false
}
)
Insert cell
Insert cell
moment
=
require
(
"moment"
)
Insert cell
dj2023
=
moment
.
duration
(
moment
(
"2023-02-01T00:00:00"
)
.
diff
(
moment
(
now
)
)
)
Insert cell
Insert cell
Insert cell
Insert cell
athletes
=
FileAttachment
(
"athletes.csv"
)
.
csv
(
{
typed
:
true
}
)
Insert cell
athletes
Filter
Columns
Sort
Slice
Save
Type Table, then Shift-Enter. Ctrl-space for more options.
Insert cell
Insert cell
dotplot
=
Plot
.
dot
(
athletes
,
{
x
:
"weight"
,
y
:
"height"
,
stroke
:
"sex"
}
)
.
plot
(
)
Insert cell
dotplot
.
legend
(
"color"
)
Insert cell
Plot
.
rect
(
athletes
,
Plot
.
bin
(
{
fillOpacity
:
"count"
}
,
{
x
:
"weight"
,
y
:
"height"
,
fill
:
"sex"
}
)
)
.
plot
(
)
Insert cell
Plot
.
plot
(
{
grid
:
true
,
marks
:
[
Plot
.
rectY
(
athletes
,
Plot
.
binX
(
{
y
:
"count"
}
,
{
x
:
"weight"
,
fill
:
"sex"
,
fy
:
"sex"
}
)
)
,
Plot
.
ruleY
(
[
0
]
)
]
}
)
Insert cell
Plot
.
plot
(
{
x
:
{
label
:
"medal count"
}
,
marks
:
[
Plot
.
barX
(
athletes
,
Plot
.
groupY
(
{
x
:
"count"
}
,
{
y
:
"nationality"
,
sort
:
{
y
:
"x"
,
reverse
:
true
,
limit
:
10
}
}
)
)
,
Plot
.
ruleX
(
[
0
]
)
]
}
)
Insert cell
Insert cell
chart
Insert cell
import
{
chart
}
from
"@d3/bivariate-choropleth"
Insert cell
map
Insert cell
import
{
map
}
from
"@neocartocnrs/bars-pubs-in-paris"
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
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
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
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
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
plasma
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
circles
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
rMultiplier
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
plasmify
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
moment
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
dj2023
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
athletes
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
athletesTab
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
Cells
athletes
File attachments
athletes.csv
CSV
Databases
Filter
Column
Operator
Columns
Sort
Column
Direction
Descending
Ascending
Slice
From
Start
To
End
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
dotplot
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
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
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
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
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
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
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
hColor
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
resourceDiv
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
resources
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML