Platform
Resources
Pricing
Sign in
Get started
Andrew Washbrook
Workspace
Fork
Published
By
Andrew Washbrook
Edited
Jun 13, 2019
Fork of
Sankey With Animated Gradients
•
2 forks
Insert cell
Insert cell
Insert cell
graph
=
{
const
graph
=
layout
(
exports
)
;
graph
.
nodes
.
forEach
(
(
node
)
=>
{
node
.
color
=
color
(
node
.
index
/
graph
.
nodes
.
length
)
;
}
)
;
graph
.
links
.
forEach
(
(
link
)
=>
{
link
.
gradient
=
DOM
.
uid
(
"gradient"
)
;
link
.
path
=
DOM
.
uid
(
"path"
)
;
}
)
;
return
graph
;
}
Insert cell
Insert cell
format
=
(
value
)
=>
{
let
f
=
d3
.
format
(
",.0f"
)
;
return
f
(
value
)
+
" (£M)"
;
}
Insert cell
color
=
(
value
)
=>
{
return
d3
.
interpolateRainbow
(
value
)
;
}
Insert cell
Insert cell
size
=
[
width
-
2
*
margin
,
height
-
2
*
margin
]
Insert cell
height
=
600
Insert cell
margin
=
10
Insert cell
nodeWidth
=
20
Insert cell
nodePadding
=
10
Insert cell
duration
=
250
Insert cell
arrow
=
"\u2192"
Insert cell
Insert cell
sankey
=
require
(
"d3-sankey@0.12"
)
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
svg
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
graph
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
layout
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
format
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
exports
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
size
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
margin
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
nodeWidth
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
nodePadding
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
duration
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
arrow
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
sankey
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML