Platform
Solutions
Resources
Pricing
Sign in
Sign up
Fil
Vocateur.
Workspace
Fork
Public
3 collections
By
Fil
Edited
Jan 9, 2023
4 forks
34 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
function
closestCirclePoint
(
x
,
y
,
circle
)
{
const
r
=
Math
.
hypot
(
x
-
circle
.
x
,
y
-
circle
.
y
)
;
return
{
dist
:
Math
.
abs
(
circle
.
r
-
r
)
,
value
:
r
<
circle
.
r
?
circle
.
inside
:
circle
.
outside
}
;
}
Insert cell
function
closestBoundary
(
x
,
y
)
{
const
boundaries
=
circles
.
map
(
circle
=>
closestCirclePoint
(
x
,
y
,
circle
)
)
;
return
d3
.
least
(
boundaries
,
d
=>
d
.
dist
)
;
}
Insert cell
function
walkOnSpheres
(
x
,
y
)
{
let
steps
=
10
,
boundary
;
do
{
boundary
=
closestBoundary
(
x
,
y
)
;
const
phi
=
Math
.
random
(
)
*
2
*
Math
.
PI
;
x
+=
boundary
.
dist
*
Math
.
cos
(
phi
)
;
y
+=
boundary
.
dist
*
Math
.
sin
(
phi
)
;
}
while
(
steps
--
>
0
&&
boundary
.
dist
>
1
)
;
return
boundary
.
value
;
}
Insert cell
values
=
{
const
RUNS
=
7
;
const
values
=
new
Float32Array
(
width
*
height
)
;
for
(
let
c
=
0
;
c
<
RUNS
;
c
++
)
{
for
(
let
i
=
0
;
i
<
width
;
i
++
)
{
for
(
let
j
=
0
;
j
<
height
;
j
++
)
{
const
k
=
i
+
width
*
j
;
values
[
k
]
=
(
c
*
values
[
k
]
+
walkOnSpheres
(
i
,
j
)
)
/
(
c
+
1
)
;
}
if
(
i
%
60
===
0
)
{
yield
values
;
}
}
}
yield
values
;
}
Insert cell
color
=
d3
.
scaleSequential
(
d3
[
`interpolate${
colorInterpolator
}`
]
)
Insert cell
colors
=
d3
.
range
(
0
,
1
,
1
/
256
)
.
map
(
v
=>
d3
.
rgb
(
color
(
v
)
)
)
Insert cell
height
=
500
Insert cell
circles
=
(
replay
,
Array
.
from
(
{
length
:
10
}
,
(
)
=>
(
{
x
:
Math
.
random
(
)
*
width
,
y
:
Math
.
random
(
)
*
height
,
r
:
(
Math
.
random
(
)
*
width
)
/
4
,
inside
:
Math
.
random
(
)
/
2
,
outside
:
(
1
+
Math
.
random
(
)
)
/
2
}
)
)
)
Insert cell
One platform
to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.
Try it for free
Learn more
Fork
View
Export
Listed in...
Interpolation
Fil
Color
Fil
Algorithms
Fil
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
colorInterpolator
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
replay
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
closestCirclePoint
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
closestBoundary
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
walkOnSpheres
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
values
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
color
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
colors
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
height
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
circles
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML