2.0.8 • Published 6 years ago
dvlib v2.0.8
Dynamic Visualizations Library
Dynamic Visualizations Library (dvlib) is a JavaScript library which helps to create interactive data visualizations on HTML Canvas. Because dvlib is written in TypeScript, it can be easily used with PowerBI Visual Tools to create outstanding custom visualizations for Power BI using object oriented programming approach.
Installing
Recommended installation is via npm
.
npm i dvlib
Quickest start with webpack
The quickest way to start programming using dvlib is to clone the template repository, which includes also development server.
git clone --depth=1 https://github.com/marepilc/dvlib_template.git projectname
rm -rf !$/.git
cd projectname
Now, you have to install dependencies
npm i
and you are ready to go! Run the server:
npm start
and start coding.
Not so quick start with webpack
Create new folder with the following structure\
newProject
|- /src
|- main.ts
|- /dist
|- index.html
|- webpack.config.js
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>dvlib</title>
</head>
<body>
<script type="text/javascript" src="./main.js"></script>
</body>
</html>
webpack.config.js
const path = require('path');
module.exports = {
entry: './src/main.ts',
mode: 'production',
module: {
rules: [{
test: /\.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/
}]
},
resolve: {
extensions: ['.tsx', '.ts', '.js']
},
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
}
};
Create package.json
npm init -y
Install webpack and webpack-cli
npm i --save-dev webpack
npm i --save-dev webpack-cli
Add to the to the "scripts" dictionary in the package.json:
"build": "webpack --config webpack.config.js"
Install the TypeScript compiler and loader
npm i --save-dev typescript ts-loader
Create tsconfig.json
npx tsc --init
Install dvlib
npm i dvlib
Write your first program
main.ts
import "dvlib";
import {
createCanvas, dvStart, resizeCanvas, background, fill,
textAlign, HAlignment, textSize, text, width, height
} from "dvlib";
dvStart(setup, draw);
function setup(): void {
let body: HTMLElement = document.getElementsByTagName('body')[0];
createCanvas(body);
resizeCanvas(600, 300);
}
function draw() {
background('#2d2f2f');
fill('#faf6ee');
textAlign(HAlignment.center);
textSize(48);
text('Hello, World!', width / 2, height / 2);
}