Platform
Resources
Pricing
Sign in
Get started
Matthew Bouchard
Workspace
Fork
Published
By
Matthew Bouchard
Edited
Apr 15, 2022
MIT
Fork of
Force Layout Cells
1
Insert cell
Insert cell
Insert cell
Insert cell
nodeRadius
=
7
Insert cell
rawData
=
FileAttachment
(
"e2e-test.json"
)
.
json
(
)
Insert cell
amGroups
=
_
.
groupBy
(
rawData
.
nodes
,
'workload.namespace'
,
'unknown-namespace'
)
Insert cell
amNodes
=
_
.
map
(
rawData
.
nodes
,
(
n
,
i
)
=>
(
{
...
n
,
index
:
i
,
cluster
:
_
.
get
(
n
,
'workload.namespace'
,
'unknown-namespace'
)
,
radius
:
nodeRadius
,
x
:
0
,
y
:
0
}
)
)
Insert cell
amClusters
=
_
.
map
(
amGroups
,
(
val
,
key
)
=>
(
{
radius
:
0
,
cluster
:
key
,
id
:
key
,
x
:
Math
.
random
(
)
*
300
,
y
:
Math
.
random
(
)
*
300
}
)
)
Insert cell
Insert cell
Insert cell
cluster
=
function
(
alpha
)
{
// https://bl.ocks.org/mbostock/7881887
return
function
(
d
)
{
const
cluster
=
clusters
[
d
.
cluster
]
if
(
_
.
isEmpty
(
cluster
)
)
{
return
}
let
x
=
d
.
x
-
cluster
.
x
,
y
=
d
.
y
-
cluster
.
y
,
l
=
Math
.
sqrt
(
x
*
x
+
y
*
y
)
,
r
=
d
.
radius
+
cluster
.
radius
+
3
;
if
(
l
!=
r
)
{
l
=
(
l
-
r
)
/
l
*
alpha
;
d
.
x
-=
x
*=
l
;
d
.
y
-=
y
*=
l
;
cluster
.
x
+=
x
;
cluster
.
y
+=
y
;
}
}
;
}
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
Compare fork
Fork
View
Export
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
updateButton
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
chart
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
nodeRadius
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
rawData
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
amGroups
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
amNodes
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
amClusters
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
collide
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
clusters
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
cluster
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
hullPoints
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
nodes
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
padding
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
clusterPadding
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
numClusters
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
maxRadius
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
width
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
height
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
color
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
radius
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
d3
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML