React Pixi Plot - Make interactive plots with React and WebGL

ReactPixiPlot is a Javascript library for writing PixiJS plots using React declarative style. It relies on react-pixi-fiber to render the plot

Usage

import{render}from'react-dom';import*asPIXIfrom'pixi.js';importReactfrom'react';importcountriesfrom'./countries.json';importwhite_circlefrom'./white_circle.png';import{scaleLinear}from'd3-scale';import{extent}from'd3-array';import{PixiPlot,RescalingSprite,DraggableContainer,ZoomableContainer}from'react-pixi-plot';PIXI.loader.add('circle',white_circle);PIXI.loader.load(()=>{constxScale=scaleLinear().domain(extent(countries,(c: any)=>c.NetMigrationasnumber)).range([0,100]);constyScale=scaleLinear().domain(extent(countries,(c: any)=>c.Literacyasnumber)).range([100,0]);constdisplayObjects=countries.map((country)=>{return<RescalingSpritekey={country.Name}texture={PIXI.loader.resources.circle.texture}position={newPIXI.Point(xScale(country.NetMigration),yScale(country.Literacy))}pixelWidth={10}pixelHeight={10}tint={0xFF0000}/>;});render(<divstyle={{marginLeft:'25%',marginRight:'25%',marginTop: 50,marginBottom: 50,border: '1px solid black',height: '100%',display: 'flex',}}><PixiPlotleftAxisScale={yScale}leftLabel={'Literacy'}bottomAxisScale={xScale}bottomLabel={'Net Migration'}rendererMargins={{left:50,right:50,top:50,bottom:50}}><DraggableContainer><ZoomableContainer>{displayObjects}</ZoomableContainer></DraggableContainer></PixiPlot></div>,document.getElementById('container'));});

Components

This library provides the following components allowing for the easy creation of an interactive plot.

<PixiPlot />

import{PixiPlot}from'react-pixi-plot';

PixiPlot is the main component to use to render a plot. It will render a PIXI.js canvas, using the react-pixi-fiberStage component.

Children of a PixiPlot element are rendered using react-pixi-fiber, and thus must be components from that library, one of the components below, or a customPIXIComponent.

PixiPlot allows you to render axes around the plot, using d3 scales. The following props can be given to PixiPlot:

typeAnyScale=ScaleContinuousNumeric<number,number>|ScaleBand<any>|ScalePoint<any>;interfacePixiPlotProps{/** * A d3 scale that will be displayed along the left axis. * You need to specify a renderer margin to allow room for this axis */readonlyleftAxisScale?: AnyScale;/** * The label for the left axis */readonlyleftLabel?: string;/** * A d3 scale that will be displayed along the right axis. * You need to specify a renderer margin to allow room for this axis */readonlyrightAxisScale?: AnyScale;/** * The label for the right axis */readonlyrightLabel?: string;/** * A d3 scale that will be displayed along the top axis. * You need to specify a renderer margin to allow room for this axis */readonlytopAxisScale?: AnyScale;/** * The label for the top axis */readonlytopLabel?: string;/** * A d3 scale that will be displayed along the bottom axis. * You need to specify a renderer margin to allow room for this axis */readonlybottomAxisScale?: AnyScale;/** * The label for the bottom axis */readonlybottomLabel?: string;/** * The margins around the renderer, where you can display axes for instance */readonlyrendererMargins?: {left: number,right: number,top: number,bottom: number};}

<DraggableContainer />

import{DraggableContainer}from'react-pixi-plot';

A simple PIXI container that makes the viewport draggable by using the mouse right click.

<ZoomableContainer />

import{ZoomableContainer}from'react-pixi-plot';

A PIXI container that makes the viewport zoomable by scrolling. If used in combination with DraggableContainer, ZoomableContainer should be a child of DraggableContainer.

<SelectionContainer />

import{SelectionContainer}from'react-pixi-plot';

A container that captures mouse interactions such as selection (left click), hovering, and brushing (click and drag). During brushing operations, an optional selection overlay can be rendered.

<RescalingSprite />

import{RescalingSprite}from'react-pixi-plot';

To be used in combination with a ZoomableContainer, this sprite always renders with the same height and width in pixels. Useful for instance for scatterplots, allowing you to get more detail values when zooming without ending up with very large sprites.

<SVGContainer />

import{SVGContainer}from'react-pixi-plot';

A container that will reproduce the contents of an SVG HTML element with one or more PIXI.Graphics.