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
Season 2
gitviz: streamgraph
vis git history data
streamgraph git history data
get git history data
d3 git history data
HHS Hospital Data Visualizations IV
HHS Hospital Data Visualizations III
HHS Hospital Data Visualizations II
HHS Hospital Data Visualizations
HHS Hospital Data
Boid Contours II
Annotated Stacked Area Chart
CMU COVIDcast API: Bubbles Extent Update
Boid Contours With SVG Filters
3D Boid Contours
Seuss Boid Contours
Herding Cats
CMU COVIDcast API: Bubbles Dark Mode
Boid Contours
CWF Season 2 Reusable Style Elements
Wheel Of Data
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