A WebGL-based Library for Visual Piling/Stacking
npm install piling.jsPiling.js currently supports visual piling of images, matrices, and SVG out of the box, but can easily be customized with your own render.
#### Install
``bash`
npm install piling.js pixi.js
PixiJS is the underlying WebGL rendering engine. It's not pre-bundled in case your application needs to use PixiJS elsewhere.
Optionally, if you want to lay out piles by more than two attributes you have to install UMAP as follows.
`bash`
npm install umap-js
#### Quick Start
Let's pile some natural images
`javascript
import createPilingJs, { createImageRenderer } from 'piling.js';
// define your items
const items = [{ src: 'http://example.com/my-fancy-photo.png' }, ...];
// instantiate a matching the data type of your items
const itemRenderer = createImageRenderer();
const piling = createPilingJs(
document.getElementById('demo'), // dom element in which piling.js will be rendered
{
// Mandatory: add the items and corresponding renderer
items,
itemRenderer,
// Optional: configure the view specification
columns: 4
}
);
`
Et voilà 🎉
#### Piling.js with a Visualization Library
- Piling.js with D3
- Piling.js with Vega Lite
- Piling.js with Observable Plot
#### Piling.js with an Application Framework
- Piling.js with Svelte
- Piling.js with React
- Piling.js with Vue
Install
`bash`
git clone https://github.com/flekschas/piling.js
cd piling.js
npm install
Start the Development Server
`
npm start
`bibtex``
@article{lekschas2021generic,
author = {Fritz Lekschas and Xinyi Zhou and Wei Chen and Nils Gehlenborg and Benjamin Bach and Hanspeter Pfister},
title = {A Generic Framework and Library for Exploration of Small Multiples through Interactive Piling},
publisher = {IEEE},
journal = {IEEE Transactions on Visualization and Computer Graphics},
series = {InfoVis ’20},
year = {2021},
month = {2},
day = {1},
volume = {27},
number = {2},
pages = {358-368},
doi = {10.1109/TVCG.2020.3028948},
}