Platform
Resources
Pricing
Sign in
Get started
D3
Bring your data to life.
Workspace
Fork
Public
d3-hierarchy
By
Fil
Edited
Oct 24, 2023
ISC
16 forks
39 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
links
=
d3
.
csvParse
(
linksCsv
)
Insert cell
Insert cell
Insert cell
Insert cell
childColumn
=
links
.
columns
[
0
]
Insert cell
parentColumn
=
links
.
columns
[
1
]
Insert cell
Insert cell
stratify
=
d3
.
stratify
(
)
.
id
(
d
=>
d
[
childColumn
]
)
.
parentId
(
d
=>
d
[
parentColumn
]
)
Insert cell
root
=
stratify
(
links
)
Insert cell
Insert cell
root
.
data
// the original data at the root
Insert cell
root
.
id
// extracted by stratify’s .id() accessor
Insert cell
root
.
parent
// the root has no parent
Insert cell
root
.
children
// children nodes, nodes for which the .parentId() accessor indicated the root node’s id.
Insert cell
root
.
depth
// the root has depth 0, its children depth 1, its grand-children depth 2, etc.
Insert cell
root
.
height
// node.height is the length of the longest branch originating from that node
Insert cell
Insert cell
root
.
children
[
0
]
// "b", the first child of the root node has depth 1, height 1, and its own children…
Insert cell
Insert cell
d3
.
stratify
(
)
(
[
{
id
:
"1"
,
parentId
:
"2"
}
]
)
Insert cell
d3
.
stratify
(
)
(
[
{
id
:
"1"
,
parentId
:
"2"
}
,
{
id
:
"2"
,
parentId
:
"1"
}
]
)
Insert cell
d3
.
stratify
(
)
(
[
{
id
:
"1"
,
parentId
:
""
}
,
{
id
:
"2"
,
parentId
:
""
}
]
)
Insert cell
Insert cell
disk
=
d3
.
stratify
(
)
.
path
(
d
=>
d
)
(
[
"/usr/bin/grep"
,
"/usr/bin/yes"
,
"/usr/share/man/man1/grep.1"
]
)
Insert cell
Tree
(
disk
,
{
label
:
d
=>
d
.
id
,
width
:
780
,
padding
:
2
}
)
Insert cell
Insert cell
d3
.
csvFormat
(
root
.
descendants
(
)
.
map
(
d
=>
d
.
data
)
)
Insert cell
Insert cell
root
.
descendants
(
)
.
map
(
d
=>
(
{
child
:
d
.
id
,
parent
:
d
.
parent
?
d
.
parent
.
id
:
""
}
)
)
Insert cell
Insert cell
function
links2dot
(
links
)
{
return
links
.
map
(
l
=>
[
l
[
links
.
columns
[
1
]
]
,
l
[
links
.
columns
[
0
]
]
]
)
.
filter
(
(
[
source
,
target
]
)
=>
source
&&
target
)
.
map
(
(
[
source
,
target
]
)
=>
`${
source
} -> ${
target
}`
)
.
join
(
"; "
)
;
}
Insert cell
import
{
Tree
}
from
"@d3/tree"
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
linksCsv
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
links
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
childColumn
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
parentColumn
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
stratify
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
root
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
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
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
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
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
disk
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
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
links2dot
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