Platform
Resources
Pricing
Sign in
Get started
Fritz Lekschas
👋 I am computer scientist researching intelligent and scalable visualization systems for biomedical data exploration. Harvard CS PhD '21.
Workspace
Fork
Published
By
Fritz Lekschas
Edited
Sep 11, 2021
Fork of
Piling.js with D3
3 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
itemRenderer
=
pilingJs
.
createObservablePlotRenderer
(
Plot
,
// A function that translates `itemSrc` into marks
(
itemSrc
)
=>
[
Plot
.
barY
(
itemSrc
,
{
x
:
"index"
,
y
:
"value"
,
fill
:
"black"
,
stroke
:
"white"
,
strokeWidth
:
1
}
)
]
,
// Plot.plot() options
{
width
:
itemWidth
,
height
:
itemHeight
}
)
Insert cell
Insert cell
viewSpec
=
(
{
// Mandatory
items
,
itemRenderer
,
// Optional
columns
:
10
,
pileBorderColor
:
0xdddddd
,
pileBorderSize
:
1
,
pileItemOffset
:
[
10
,
10
]
,
pileItemBrightness
:
(
item
,
i
,
pile
)
=>
Math
.
min
(
0.9
,
0.1
*
(
pile
.
items
.
length
-
1
-
i
)
)
}
)
Insert cell
Insert cell
piling
=
{
rerun
;
if
(
state
.
piling
)
state
.
piling
.
destroy
(
)
;
state
.
piling
=
pilingJs
.
createLibrary
(
container
,
viewSpec
)
;
yield
state
.
piling
;
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
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
container
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
rerun
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
itemRenderer
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
viewSpec
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
piling
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
state
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
x
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
y
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
items
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
numItems
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
numHistBins
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
itemWidth
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
itemHeight
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
width
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
PIXI
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
UMAP
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML
pilingJs
Edit
Add comment
Copy import
Select
Duplicate
Copy link
Embed
Delete
JavaScript
Markdown
HTML