Platform
Resources
Pricing
Sign in
Contact us
Ian Lyttle
Workspace
Fork
Public
Computing on color
By
Ian Lyttle
Edited
Aug 3, 2023
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
categorical
=
[
"#4b94d8"
,
"#f0a70a"
,
"#65d0d7"
,
"#518c31"
,
"#fbd82d"
,
"#d17b95"
]
Insert cell
reference
=
(
{
light
:
"#d5d5d5"
,
dark
:
"#484848"
}
)
Insert cell
ref
=
dark
?
reference
.
dark
:
reference
.
light
Insert cell
Insert cell
Insert cell
Insert cell
olympians_age
=
tidy
.
tidy
(
olympians
,
tidy
.
mutate
(
{
age
:
(
d
)
=>
(
date_opening_ceremony
.
getTime
(
)
-
d
.
date_of_birth
.
getTime
(
)
)
/
(
1000
*
60
*
60
*
24
*
365.25
)
}
)
)
Insert cell
sportCount
=
tidy
.
tidy
(
olympians
,
tidy
.
groupBy
(
"sport"
,
tidy
.
summarize
(
{
count
:
tidy
.
n
(
)
}
)
)
,
tidy
.
arrange
(
tidy
.
desc
(
"count"
)
)
)
Insert cell
countCutoff
=
sportCount
[
5
]
.
count
Insert cell
sportCutoff
=
tidy
.
tidy
(
sportCount
,
tidy
.
mutate
(
{
sportCategory
:
(
d
)
=>
(
d
.
count
>=
countCutoff
?
d
.
sport
:
"other"
)
}
)
,
tidy
.
select
(
[
"sport"
,
"sportCategory"
]
)
)
Insert cell
olympians_binned
=
tidy
.
tidy
(
olympians_age
,
tidy
.
leftJoin
(
sportCutoff
,
{
by
:
"sport"
}
)
)
Insert cell
domainSport
=
sportCutoff
.
map
(
(
d
)
=>
d
.
sportCategory
)
.
filter
(
(
x
,
i
,
arr
)
=>
arr
.
indexOf
(
x
)
===
i
)
Insert cell
date_opening_ceremony
=
new
Date
(
"2016-08-05"
)
Insert cell
Insert cell
tidy
=
import
(
"https://unpkg.com/@tidyjs/tidy@2.5.2/dist/es/index.js?module"
)
Insert cell
import
{
toSVG
}
from
"@fil/plot-figure-to-svg"
Insert cell
import
{
inputMode
,
invokeMode
,
styleDark
}
from
"@ijlyttle/dark-mode-input"
Insert cell
invokeMode
(
dark
)
Insert cell
styleDark
(
)
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
dark
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
categorical
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
reference
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
ref
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
olympians_age
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
sportCount
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
countCutoff
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
sportCutoff
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
olympians_binned
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
domainSport
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
date_opening_ceremony
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
tidy
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Copy import
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
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML