/pixi-mvm

Force directed graph generated in Pixi and D3.

Primary LanguageJavaScript

pixi-mvm

License: MIT Language Grade: JavaScript

About

Repo contains a demo of interactive data visualization on WebGL Canvas - force directed graph generated in Pixi and D3.

Github pages demo (better quality)

Codepen Demo

Goals

Interactivity

Pointer interactivity on container level

  • zooming (on scroll) (/)
  • panning (on canvas drag)

Pointer interactivity on particle level

  • mouse hover
  • clicking
  • dragging

Visual appeal and data representation

  • represents underlying data with hierarchy of nodes
  • each data item can be represented by simple primitive (rect, ellipse, etc.) or with more complex graphics with PIXI.Sprite (texture, image)
  • enables one or multiple shader passes - pixi filters as well as custom shaders

Performance

  • able to smoothly render 1000+ items without drop in FPS

Animation and transitions

  • motion based on physics, user interaction and individual particle behavior (agents simulation, d3.simulation)

Usage

git clone https://github.com/stopyransky/pixi-mvm.git
cd pixi-mvm
npm install
npm start