DataVizArtisan Library
dvalib is an open-source data visualization library written entirely in TypeScript, that utilizes HTML5 Canvas features. This library was written mainly to provide an easy way to create custom visuals for Power BI. However, it can be used for other applications as well.
Why use dvalib?
There are many reasons, but just to focus on the main ones:
- It is extremely easy to learn
- Projects created with the dvalib library follow OPP principles. Thus the majority of your code can be easily reused.
- You can achieve complex, dynamic visualizations with truly limited effort.
Quick start
To start a new visualization project, follow the steps below:
-
Create a new folder.
-
Inside the newly created folder initiate the npm package:
npm init
Make sure you have
Node.jsinstalled on your machine. -
Install development dependencies:
npm i webpack webpack-cli webpack-dev-server typescript ts-loader --save-dev
-
Create webpack.config.js file with the following content
const path = require('path'); module.exports = { mode: 'production', entry: './src/main.ts', module: { rules: [ { test: /\.ts/, use: 'ts-loader', include: path.resolve(__dirname, 'src') } ] }, output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') }, resolve: { extensions: ['.ts', '.js'] }, devServer: { static: { directory: path.join(__dirname, 'dist'), }, compress: true, port: 8080 } }
-
Install
*dvalib*npm i *dvalib*
-
Add
"start": "webpack-dev-server"and"build": "webpack"toscriptsin yourpackage.jsonfile. -
Create a
distfolder with theindex.htmlfile andsrcfolder for your code.<html lang="en"> <head> <meta charset="UTF-8"> <title>*dvalib*</title> </head> <body> <div id="canvas-container"> <canvas id="my-canvas"></canvas> </div> <script src="bundle.js"></script> </body> </html>
You are ready to code. Enjoy!