regl-map-animation v1.2.20

regl-map-animation

Animate x/y point data using regl and categorize them into a bar chart. Point data should be defined as an array of objects {x,y,value} - with "value" being the numerical indicator with which the points will be categorized.

Examples

Population grid of Europe | code

Different animation patterns

Phyllotaxis | Random | Sine | Spiral | Rollout

Installation & Usage

The project is built using UMD so it works both in browsers and in node.js

Node.js

Within a node.js project simply run the following command:

npm i regl-map-animation --save

Then import:

import { animation } from "regl-map-animation";

  ReglMapAnimation.animation()
    .container(container) // div element
    .pointData(pointData) // array of {x,y,value} objects
    .width(width)
    .height(height)
    .duration(500)
    .delayAtEnd(500)
    .binLabels(true)
    .legend(true)
    .legendTitle("Population per 5 km²")
    .animate();
});

Browsers

As a standalone script use:

<script src="https://unpkg.com/regl-map-animation/build/reglmapanimation.js"></script>

Then:

  ReglMapAnimation.animation()
    .container(container)
    .pointData(pointData)
    .width(width)
    .height(height)
    .duration(500)
    .delayAtEnd(500)
    .binLabels(true)
    .legend(true)
    .legendTitle("Population per 5 km²")
    .animate();
});

Methods

Notes

Inspired by Peter Beshai and adapted from his excellent tutorial on regl.

Node.js v16.