Platform
Resources
Pricing
Sign in
Get started
Coding with Fire
EJ Fox & Ian Johnson streaming data, code, acid, design
Workspace
Fork
Published
Season 2
By
Ian Johnson
Edited
Mar 8, 2021
Fork of
streamgraph git history data
1 star
2
Insert cell
Insert cell
Insert cell
4096
*
3
Insert cell
data
=
FileAttachment
(
"vue-stream.json"
)
.
json
(
)
Insert cell
accumulated
=
data
.
accumulated
Insert cell
authors
=
new
Map
(
data
.
authors
)
Insert cell
chart
=
{
const
svg
=
d3
.
create
(
"svg"
)
.
attr
(
"viewBox"
,
[
0
,
0
,
width
,
height
]
)
;
svg
.
append
(
"g"
)
.
selectAll
(
"path"
)
.
data
(
series
)
.
join
(
"path"
)
.
attr
(
"fill"
,
(
{
key
}
)
=>
color
(
key
)
)
.
attr
(
"d"
,
area
)
.
append
(
"title"
)
.
text
(
(
{
key
}
)
=>
key
)
;
// svg.append("g").call(xAxis);
return
svg
.
node
(
)
;
}
Insert cell
Insert cell
authorArray
=
Array
.
from
(
authors
.
entries
(
)
)
.
sort
(
(
a
,
b
)
=>
b
[
1
]
-
a
[
1
]
)
.
map
(
d
=>
d
[
0
]
)
Insert cell
series
=
d3
.
stack
(
)
.
keys
(
authorArray
)
.
offset
(
d3
.
stackOffsetWiggle
)
// .order(d3.stackOrderInsideOut)(accumulated)
.
order
(
d3
.
stackOrderNone
)
(
accumulated
)
Insert cell
area
=
d3
.
area
(
)
.
x
(
d
=>
x
(
timeParser2
(
d
.
data
.
date
)
)
)
.
y0
(
d
=>
y
(
d
[
0
]
)
)
.
y1
(
d
=>
y
(
d
[
1
]
)
)
Insert cell
d3
.
extent
(
accumulated
,
d
=>
d
.
date
)
Insert cell
x
=
d3
.
scaleUtc
(
)
.
domain
(
d3
.
extent
(
accumulated
,
d
=>
timeParser2
(
d
.
date
)
)
)
.
range
(
[
margin
.
left
,
width
-
margin
.
right
]
)
Insert cell
y
=
d3
.
scaleLinear
(
)
.
domain
(
[
d3
.
min
(
series
,
d
=>
d3
.
min
(
d
,
d
=>
d
[
0
]
)
)
,
d3
.
max
(
series
,
d
=>
d3
.
max
(
d
,
d
=>
d
[
1
]
)
)
]
)
.
range
(
[
height
-
margin
.
bottom
,
margin
.
top
]
)
Insert cell
height
=
600
Insert cell
margin
=
(
{
top
:
0
,
right
:
20
,
bottom
:
30
,
left
:
20
}
)
Insert cell
color
=
d3
.
scaleOrdinal
(
)
.
domain
(
authors
.
keys
(
)
)
// .range(d3.schemeCategory10)
.
range
(
d3
.
schemeSpectral
[
11
]
)
Insert cell
yscale
=
d3
.
scaleBand
(
)
.
domain
(
authorArray
)
.
range
(
[
10
,
550
]
)
Insert cell
yscale
(
authorArray
[
0
]
)
Insert cell
timeParser2
(
accumulated
[
0
]
.
date
)
Insert cell
dateExtent
=
d3
.
extent
(
accumulated
,
d
=>
timeParser2
(
d
.
date
)
)
Insert cell
date
=
d
=>
timeParser
(
d
.
date
)
Insert cell
timeParser
=
d3
.
timeParse
(
"%Y-%m-%d %H:%M:%S %Z"
)
Insert cell
timeParser2
=
d3
.
timeParse
(
"%Y-%m-%dT%H:%M:%S.%L%Z"
)
Insert cell
d3
=
require
(
"d3@6"
)
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
Edit
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
data
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
accumulated
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
authors
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
chart
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
authorArray
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
series
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
area
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
Add comment
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
x
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
y
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
color
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
yscale
Add comment
Copy import
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
dateExtent
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
date
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
timeParser
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
timeParser2
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
d3
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML