Piling.js

A JavaScript Library for Interactive Visual Piling of Small Multiples

flekschas/piling.jspiling.js.orgpiling.js

README

  Piling.js

  
  A general framework and library for visual piling/stacking.
  

  
  Docs
  NPM Version
  Build Status
  File Size
  Code Style Prettier
  Demos
  
  
  Preview
  

Piling.js currently supports visual piling of images, matrices, and SVG out of the box, but can easily be customized with your own render.

Get Started


Install


  1. ``` sh
  2. npm install piling.js pixi.js
  3. ```

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.

  1. ``` sh
  2. npm install umap-js
  3. ```

Quick Start


Let's pile some natural images

  1. ``` js
  2. import createPilingJs, { createImageRenderer } from 'piling.js';

  4. // define your items
  5. const items = [{ src: 'http://example.com/my-fancy-photo.png' }, ...];

  7. // instantiate a matching the data type of your items
  8. const itemRenderer = createImageRenderer();

  10. const piling = createPilingJs(
  11.   document.getElementById('demo'), // dom element in which piling.js will be rendered
  12.   {
  13.     // Mandatory: add the items and corresponding renderer
  14.     items,
  15.     itemRenderer,
  16.     // Optional: configure the view specification
  17.     columns: 4
  18.   }
  19. );
  20. ```

Et voilà 🎉

teaser-natural-images

Examples & Templates


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

Development


Install

  1. ``` sh
  2. git clone https://github.com/flekschas/piling.js
  3. cd piling.js
  4. npm install
  5. ```

Start the Development Server

  1. ```
  2. npm start
  3. ```

Cite Piling.js


  1. ```bibtex
  2. @article{lekschas2021generic,
  3.   author = {Fritz Lekschas and Xinyi Zhou and Wei Chen and Nils Gehlenborg and Benjamin Bach and Hanspeter Pfister},
  4.   title = {A Generic Framework and Library for Exploration of Small Multiples through Interactive Piling},
  5.   publisher = {IEEE},
  6.   journal = {IEEE Transactions on Visualization and Computer Graphics},
  7.   series = {InfoVis ’20},
  8.   year = {2021},
  9.   month = {2},
  10.   day = {1},
  11.   volume = {27},
  12.   number = {2},
  13.   pages = {358-368},
  14.   doi = {10.1109/TVCG.2020.3028948},
  15. }
  16. ```