regl-map-animation
npm i regl-map-animation

regl-map-animation

Configurable WebGL animation showing a map transitioning into a bar chart

by eurostat

1.2.8 (see all)License:ISCTypeScript:Not Found
npm i regl-map-animation
Readme

regl-map-animation

preview

live demo

Animate x/y point data using regl and categorize them for vizualization. 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.

Installation & Usage

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

Node

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)
    .pointData(pointData)
    .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

NameDescriptionTypeRequiredDefault
pointDataAn array of objects with the following format: {x,y,value} - where value is the indicator used for categorization and colouring[{x: number, y: number, value: number}]True
containercontainer div on which regl will append its canvasHTML elementFalsedocument.body
numPointsnumber of points to displaynumberFalsepointData.length
pointMarginMargin applied to the bars in the bar chartnumberFalse1
durationThe duration of each transition animation in millisecondsnumberFalse5000
delayAtEndHow long to stay at a final frame before animating again (in milliseconds)numberFalse0
widthWidth of the animation container (pixels)numberFalsewindow.innerWidth
heightHeight of the animation container (pixels)numberFalsewindow.innerHeight
stopsThresholds used for categorizing points by their "value" attributearray[number]False
colorsAn array of Hex values corresponding with the number of defined stopsarray[hexString]False
projectionSpatial reference of the points x and y values. Accepted values are "EPSG:3035" or "EPSG:4326"stringFalse"EPSG:3035"
mapPaddingAdd padding (in pixels) to the map animationnumberFalse
backgroundColorSets the container's background colour (WebGL RGBA array of values from 0 to 1)[number,number,number,number]False[1,1,1,1] (white)

Notes

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

Downloads/wk

95

GitHub Stars

20

LAST COMMIT

11d ago

MAINTAINERS

1

CONTRIBUTORS

2

OPEN ISSUES

0

OPEN PRs

0
VersionTagPublished
1.2.8
latest
2yrs ago
No alternatives found
No tutorials found
Add a tutorial