Limeviz NPM | npm.io

Limited-effort Visualizations

LimeViz 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 LimeViz?

There are many reasons, but just to focus on the main ones:

It is extremely easy to learn
Projects created with the LimeViz 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.js installed 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 LimeViz
```
npm i limeviz
```
Add "start": "webpack-dev-server" and "build": "webpack" to scripts in your package.json file.

Create a dist folder with the index.html file and src folder for your code.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>LimeViz</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!

@everything-registry/sub-chunk-2072

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago