Dvlib NPM | npm.io

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);
}

@everything-registry/sub-chunk-1539 @zalastax/nolb-dv

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago