{"_id":"plotset-animation","_rev":"31-66b051d28e27797ef6da79c1dbfbaa3c","name":"plotset-animation","dist-tags":{"latest":"1.0.16"},"versions":{"1.0.15":{"name":"plotset-animation","version":"1.0.15","description":"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 ","main":"dist/index.js","module":"dist/index.js","exports":{"default":"./dist/index.js"},"scripts":{"test":"node test.js","build":"esbuild ./src/index.js --format=esm --platform=browser --bundle --minify --outdir=dist"},"repository":{"type":"git","url":"https://gitlab.pro.ai/alirezabalayi/plotset-animation"},"keywords":["data-visualization","D3.js","animated-charts","animation-library","data-animation","interactive-graphics","JavaScript","Node.js","open-source","MIT-license"],"author":{"name":"Alireza Balaei"},"license":"MIT","dependencies":{"d3":"^7.8.5","d3-array":"^3.2.4","d3-scale":"^4.0.2","d3-timer":"^3.0.1","esbuild":"^0.19.5","plotset-formatter":"^1.2.149"},"gitHead":"c9a52b6701081a2f55623c410da69dca237b4dc6","_id":"plotset-animation@1.0.15","_nodeVersion":"18.17.1","_npmVersion":"9.6.7","dist":{"integrity":"sha512-l2EYJ0vbKsNhkQ0pw3mGuRFDCKIR6VfJynjk6HBAbNJwp58OS0ufgAO6YoT7QA+Ov2mioEVTcnl53KdnXTaN1w==","shasum":"38388de87d2bb4fb35eefdb1abbacfd4ae99e50e","tarball":"https://registry.npmjs.org/plotset-animation/-/plotset-animation-1.0.15.tgz","fileCount":3,"unpackedSize":385671,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHfpHoipIqAKhWRgcs/nmUk0WHXGtrUfhhqpvw9RWfN4AiEA8SUM3YYt3JY+4R6/tE/+yCsCtnNBRXew2Idllrrk5I4="}]},"_npmUser":{"name":"alirezabalayi","email":"alirezabalayi7@gmail.com"},"directories":{},"maintainers":[{"name":"alirezabalayi","email":"alirezabalayi7@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plotset-animation_1.0.15_1700033782330_0.11089657715401935"},"_hasShrinkwrap":false},"1.0.16":{"name":"plotset-animation","version":"1.0.16","description":"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 ","main":"dist/index.js","module":"dist/index.js","exports":{"default":"./dist/index.js"},"scripts":{"test":"node test.js","build":"esbuild ./src/index.js --format=esm --platform=browser --bundle --minify --outdir=dist","publish":"npm run build && npm version patch && npm publish"},"repository":{"type":"git","url":"https://gitlab.pro.ai/alirezabalayi/plotset-animation"},"keywords":["data-visualization","D3.js","animated-charts","animation-library","data-animation","interactive-graphics","JavaScript","Node.js","open-source","MIT-license"],"author":{"name":"Alireza Balaei"},"license":"MIT","dependencies":{"d3":"^7.8.5","d3-array":"^3.2.4","d3-scale":"^4.0.2","d3-timer":"^3.0.1","esbuild":"^0.19.5","plotset-formatter":"^1.2.149"},"gitHead":"ea0dec57353c9ab83220ad7629184edf4911d405","_id":"plotset-animation@1.0.16","_nodeVersion":"18.17.1","_npmVersion":"9.6.7","dist":{"integrity":"sha512-59eCFhMp729q65rI2G9mUUtfcxo/uvZujXIdcAnhG17Akks196N+oYkvMC+T7fox2RoBNHho6BFbnnKgjNHiNw==","shasum":"48ccbcadf663d24fd528485857bcb8f1ac8bdc3d","tarball":"https://registry.npmjs.org/plotset-animation/-/plotset-animation-1.0.16.tgz","fileCount":3,"unpackedSize":387877,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDts3REqs0DXkowmjGCH5XMcmMxtU1W3TjLn7g0Mb3KgQIgFMERb5BgX3Bs25u2qwUhcOsyEOh7iXdiLs4xw8F4Z7U="}]},"_npmUser":{"name":"alirezabalayi","email":"alirezabalayi7@gmail.com"},"directories":{},"maintainers":[{"name":"alirezabalayi","email":"alirezabalayi7@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/plotset-animation_1.0.16_1700300538314_0.34702609274441865"},"_hasShrinkwrap":false}},"time":{"created":"2023-11-01T07:39:38.333Z","1.0.0":"2023-11-01T07:39:38.620Z","modified":"2023-11-18T09:42:18.774Z","1.0.1":"2023-11-01T08:04:47.462Z","1.0.2":"2023-11-01T08:50:11.553Z","1.0.3":"2023-11-01T12:30:13.414Z","1.0.4":"2023-11-02T09:20:53.901Z","1.0.5":"2023-11-05T13:34:56.358Z","1.0.6":"2023-11-06T05:47:47.494Z","1.0.7":"2023-11-07T06:15:19.335Z","1.0.8":"2023-11-07T12:59:40.235Z","1.0.9":"2023-11-09T11:23:00.839Z","1.0.10":"2023-11-09T11:41:19.115Z","1.0.11":"2023-11-09T13:13:25.532Z","1.0.12":"2023-11-11T08:30:27.763Z","1.0.13":"2023-11-11T12:07:15.655Z","1.0.14":"2023-11-12T06:09:28.940Z","1.0.15":"2023-11-15T07:36:22.487Z","1.0.16":"2023-11-18T09:42:18.580Z"},"maintainers":[{"name":"alirezabalayi","email":"alirezabalayi7@gmail.com"}],"description":"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 ","keywords":["data-visualization","D3.js","animated-charts","animation-library","data-animation","interactive-graphics","JavaScript","Node.js","open-source","MIT-license"],"repository":{"type":"git","url":"https://gitlab.pro.ai/alirezabalayi/plotset-animation"},"author":{"name":"Alireza Balaei"},"license":"MIT","readme":"# plotset-animation\r\n`plotset-animation` is a free npm package that you can  use to create your animated data visualizations charts with.\r\n## Usage\r\nIn order to use this package you should first **import** it:\r\n```\r\nconst { Animation } = require(\"plotset-animation\")\r\n```\r\nIn order to use `Animation` class you need your inputs to be in this format:\r\n```\r\nconst data = [\r\n\t{\r\n\t\t\"Browser\": \"Edge\",\r\n\t\t\"11/1/2017\": \"4.43\",\r\n\t\t\"11/1/2018\": \"4.38\",\r\n\t\t\"11/1/2019\": \"4.6\"\r\n\t},\r\n\t{\r\n\t\t\"Browser\": \"Chrome\",\r\n\t\t\"11/1/2017\": \"59\",\r\n\t\t\"11/1/2018\": \"62.8\",\r\n\t\t\"11/1/2019\": \"57\"\r\n\t},\r\n\t...\r\n]\r\nconst col_rel = {\r\n\tvalues: [\"11/1/2017\", \"11/1/2018\", \"11/1/2019\"],\r\n\tlabels: \"Browser\"\r\n}\r\nconst duration = 60\r\n```\r\nThen you can create your animation object like this:\r\n```\r\nconst animation = new  Animation(duration , data, col_rel[\"values\"])\r\n```\r\nNow add your drawing chart functions to your `animation` object:\r\n```\r\nfunction drawRaceBar(frame, transitionTime){\r\n\t// code ...\r\n}\r\n\r\nfunction drawRacePie(frame, transitionTime){\r\n\t// code ...\r\n}\r\n\r\nconst charts = [\r\n\tdrawRaceBar,\r\n\tdrawRacePie,\r\n\t...\r\n]\r\n\r\nanimation.addCharts(charts)\r\n```\r\nAt the end you can call `play()` and `pause()` in your code like this:\r\n```\r\nanimation.play()\r\nanimation.pause()\r\n```\r\n## Drawing functions\r\n**What can be done in drawing functions you pass to `animation`:**\r\n - Create a data visualization chart with desired library like `D3.js` ,  `Chart.js` , `Highcharts` , `Recharts` , `Flexmonster` , `Chartkick` , . . .\r\n - Update each frame with given frame data and transition time(ms)\r\n \r\n**What parameters drawing functions will get at each pulse:**\r\n```\r\nfunction drawingFunction(frame, transitionTime){\r\n\tconst { data, sortedData, date } = frame\r\n\t// . . .\r\n}\r\n```\r\n**data:** \r\n```\r\n[\r\n\t{\r\n\t\t\"Browser\": \"Edge\",\r\n\t\t\"11/1/2017\": \"4.43\"\r\n\t},\r\n\t{\r\n\t\t\"Browser\": \"Chrome\",\r\n\t\t\"11/1/2017\": \"59\",\r\n\t}\r\n]\r\n```\r\n **sorted data:**\r\n```\r\n[\r\n\t{\r\n\t\t\"Browser\": \"Chrome\",\r\n\t\t\"11/1/2017\": \"59\",\r\n\t},\r\n\t{\r\n\t\t\"Browser\": \"Edge\",\r\n\t\t\"11/1/2017\": \"4.43\"\r\n\t}\r\n]\r\n```\r\n **date:**\r\n```\r\n{\r\n\tISO: \"2017-11-01T00:00:00.000Z\",\r\n\traw: \"11/1/2017\",\r\n\ttime: 1509494400000\r\n}\r\n```\r\n **transitionTime:**\r\n```\r\n2000\r\n```","readmeFilename":"README.md"}