AnimatedChartModule - An Interactive Data Visualization Tool\n\nAnimatedChartModule is a powerful Node.js module designed for developers who work with data visualization, particularly in JavaScript using D3.js. This module empowers you to create stunning
npm install plotset-animationplotset-animation is a free npm package that you can use to create your animated data visualizations charts with.
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:
`
2000
``