Skip to content

A general framework and library for exploring thousands of small multiples

License

Notifications You must be signed in to change notification settings

flekschas/piling.js

Repository files navigation

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

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.

npm install umap-js

Quick Start

Let's pile some natural images

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à 🎉

teaser-natural-images

Examples & Templates

Piling.js with a Visualization Library

Piling.js with an Application Framework

Development

Install

git clone https://github.com/flekschas/piling.js
cd piling.js
npm install

Start the Development Server

npm start

Cite Piling.js

@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},
}