Platform
Resources
Pricing
Sign in
Contact us
Ben Simonds
Workspace
Fork
Public
By
Ben Simonds
Edited
Feb 21, 2024
1 star
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
pairs
=
[
[
3
,
5
]
,
[
5
,
8
]
,
[
8
,
13
]
,
[
13
,
21
]
,
[
21
,
34
]
,
[
34
,
55
]
,
[
55
,
89
]
]
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
function
makeQuad
(
i
=
0
,
{
k
=
1
/
20
,
scale
=
width
/
50
,
u
=
8
,
v
=
13
}
=
{
}
)
{
return
[
makePoint
(
i
,
{
k
,
scale
}
)
,
makePoint
(
i
+
v
,
{
k
,
scale
}
)
,
makePoint
(
i
+
u
+
v
,
{
k
,
scale
}
)
,
makePoint
(
i
+
u
,
{
k
,
scale
}
)
,
]
}
Insert cell
function
makePoint
(
i
=
0
,
{
k
=
1
/
20
,
scale
=
width
/
50
}
=
{
}
)
{
return
toCartesian
(
[
Math
.
pow
(
PHI
,
i
*
k
)
*
scale
,
GA
*
i
]
)
;
}
Insert cell
function
makeOutline
(
{
i
=
0
,
u
=
8
,
v
=
13
,
k
=
1
/
20
,
scale
=
width
/
50
}
=
{
}
)
{
// generate a series of points
const
points
=
d3
.
range
(
i
,
i
+
u
+
v
)
.
map
(
(
j
)
=>
makePoint
(
j
,
{
k
,
scale
}
)
)
// Join them by sorting them in angle-order
.
sort
(
(
a
,
b
)
=>
toPolars
(
b
)
[
1
]
-
toPolars
(
a
)
[
1
]
)
return
points
}
Insert cell
function
makeQuads
(
n
=
10
,
{
i
=
0
,
k
=
1
/
20
,
scale
=
50
,
u
=
5
,
v
=
8
}
=
{
}
)
{
return
d3
.
range
(
i
,
i
+
n
)
.
map
(
i
=>
makeQuad
(
i
,
{
k
,
scale
,
u
,
v
}
)
)
}
Insert cell
function
toPolars
(
[
x
,
y
]
)
{
return
[
Math
.
sqrt
(
Math
.
pow
(
x
,
2
)
+
Math
.
pow
(
y
,
2
)
)
,
Math
.
atan2
(
y
,
x
)
]
}
Insert cell
function
toCartesian
(
[
r
,
theta
]
)
{
return
[
r
*
Math
.
cos
(
theta
)
,
r
*
Math
.
sin
(
theta
)
]
}
Insert cell
function
rotate
(
[
x
,
y
]
,
d
)
{
var
[
r
,
theta
]
=
toPolars
(
[
x
,
y
]
)
return
toCartesian
(
[
r
,
theta
+
d
]
)
}
Insert cell
function
scale
(
[
x
,
y
]
,
k
)
{
return
[
x
*
k
,
y
*
k
]
}
Insert cell
PI
=
Math
.
PI
Insert cell
GA
=
PI
*
(
3
-
Math
.
sqrt
(
5
)
)
Insert cell
PHI
=
(
1
+
Math
.
sqrt
(
5
)
)
/
2
Insert cell
import
{
Scrubber
}
from
"@mbostock/scrubber"
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
n
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
pairs
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
f1
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
f2
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
scrub
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
makeQuad
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
makePoint
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
makeOutline
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
makeQuads
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
toPolars
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
toCartesian
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
rotate
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
scale
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
PI
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
GA
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
PHI
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