@plotset/animation

@plotset/animation is a free npm package that you can use to create your animated data visualizations charts with.

Usage

In order to use this package you should first import it:

const { Animation } = require("@plotset/animation")

In order to use Animation class you need your inputs to be in this format:

const data = [
	{
		"Browser": "Edge",
		"11/1/2017": "4.43",
		"11/1/2018": "4.38",
		"11/1/2019": "4.6"
	},
	{
		"Browser": "Chrome",
		"11/1/2017": "59",
		"11/1/2018": "62.8",
		"11/1/2019": "57"
	},
	...
]
const col_rel = {
	values: ["11/1/2017", "11/1/2018", "11/1/2019"],
	labels: "Browser"
}
const duration = 60

Then you can create your animation object like this:

const animation = new  Animation(duration , data, col_rel["values"])

Now add your drawing chart functions to your animation object:

function drawRaceBar(frame, transitionTime){
	// code ...
}

function drawRacePie(frame, transitionTime){
	// code ...
}

const charts = [
	drawRaceBar,
	drawRacePie,
	...
]

animation.addCharts(charts)

At the end you can call play() and pause() in your code like this:

animation.play()
animation.pause()

Drawing functions

What can be done in drawing functions you pass to animation:

Create a data visualization chart with desired library like D3.js , Chart.js , Highcharts , Recharts , Flexmonster , Chartkick , . . .
Update each frame with given frame data and transition time(ms)

What parameters drawing functions will get at each pulse:

function drawingFunction(frame, transitionTime){
	const { data, sortedData, date } = frame
	// . . .
}

data:

[
	{
		"Browser": "Edge",
		"11/1/2017": "4.43"
	},
	{
		"Browser": "Chrome",
		"11/1/2017": "59",
	}
]

sorted data:

[
	{
		"Browser": "Chrome",
		"11/1/2017": "59",
	},
	{
		"Browser": "Edge",
		"11/1/2017": "4.43"
	}
]

date:

{
	ISO: "2017-11-01T00:00:00.000Z",
	raw: "11/1/2017",
	time: 1509494400000
}

transitionTime: