https://github.com/flekschas/piling.js
A general framework and library for exploring thousands of small multiples
https://github.com/flekschas/piling.js
javascript pilingjs small-multiples visual-piling visualization webgl
Last synced: 3 months ago
JSON representation
A general framework and library for exploring thousands of small multiples
- Host: GitHub
- URL: https://github.com/flekschas/piling.js
- Owner: flekschas
- License: mit
- Created: 2019-07-29T13:27:28.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-03-02T23:12:42.000Z (over 2 years ago)
- Last Synced: 2025-03-29T19:07:32.062Z (4 months ago)
- Topics: javascript, pilingjs, small-multiples, visual-piling, visualization, webgl
- Language: JavaScript
- Homepage: https://piling.js.org
- Size: 81.9 MB
- Stars: 256
- Watchers: 4
- Forks: 14
- Open Issues: 38
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Citation: CITATION.bib
Awesome Lists containing this project
README
Piling.js
**A general framework and library for visual piling/stacking.**
[](https://piling.js.org/docs)
[](https://npmjs.org/package/piling.js)
[](https://github.com/flekschas/piling.js/actions?query=workflow%3Abuild)
[](https://bundlephobia.com/result?p=piling.js)
[](https://github.com/prettier/prettier#readme)
[](https://piling.js.org/demos)
Piling.js currently supports visual piling of [images](#quick-start), [matrices](#teaser-matrices), and [SVG](https://piling.js.org/demos/?example=ridgeplot) out of the box, but can easily be customized with [your own render](https://piling.js.org/docs/?id=define-your-own-renderer).
## Get Started
#### 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à 🎉
## Examples & Templates
#### Piling.js with a Visualization Library
- [Piling.js with D3](https://observablehq.com/@flekschas/piling-js-with-d3)
- [Piling.js with Vega Lite](https://observablehq.com/@flekschas/piling-js-with-vega-lite)
- [Piling.js with Observable Plot](https://observablehq.com/@flekschas/piling-js-with-observable-plot)
#### Piling.js with an Application Framework
- [Piling.js with Svelte](https://github.com/flekschas/piling.js-svelte)
- [Piling.js with React](https://github.com/flekschas/piling.js-react)
- [Piling.js with Vue](https://github.com/flekschas/piling.js-vue)
## Development
**Install**
```bash
git clone https://github.com/flekschas/piling.js
cd piling.js
npm install
```
**Start the Development Server**
```
npm start
```
## Cite Piling.js
```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},
}
```