Infovyz is a visualization component library based on d3.js. It provides an API optimized for usage in self-updating real-time dashboards. Currently it offers bar charts, line charts and geographic maps.
Clone or download
Pull request Compare This branch is even with weblyzard:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build
examples
src
test
.eslintrc.json
.gitignore
.npmignore
API.md
LICENSE
README.md
bower.json
index.js
package.json
rollup.config.js

README.md

Infovyz

Infovyz is a visualization component library based on d3.js. It provides an API optimized for usage in self-updating real-time dashboards. Currently it offers bar charts, line charts and geographic maps.

npm npm npm

Installation and Usage

npm

npm install infovyz

bower_components

bower install infovyz

Client Side Usage

Add the required files to your HTML file. Please note that Infovyz requires d3.js V4 (https://www.npmjs.com/package/d3) and d3-tile (https://www.npmjs.com/package/d3-tile).

<link rel="stylesheet" type="text/css" href="node_modules/infovyz/build/infovyz.css">
<script src="//d3js.org/d3.v4.min.js"></script>
<script src="//d3js.org/d3-tile.v0.0.min.js"></script>
<script src="node_modules/infovyz/build/infovyz.min.js"></script>

To get started and initialize a geographic map attached to the body tag, use the following JavaScript code:

var map = infovyz(d3).map('body');

Just call map() again with an array of location objects to add some bubbles to the map:

map([
  {
    id: 'Vienna, Austria',
    latitude: 48.210033,
    longitude: 16.363449
    value: 1.741
  },
  {
    id: 'Berlin, Germany',
    latitude: 52.520008,
    longitude: 13.404954
    value: 3.502
  }
]);

Examples

To run the examples in your browser, clone the repository to your local machine and run the other commands:

git clone https://github.com/weblyzard/infovyz.git
cd infovyz
npm install
npm start

The console output should tell you at which address you can reach the static webserver, for example http://localhost:8080/examples.

Earthquakes Example

API Documentation

In addition to the examples, the library itself is documented in API.md.

Testing

Infovyz is using tape for testing its functionality:

npm install
npm test

Development

The build process uses rollup (https://github.com/rollup/rollup), so you can use ES6 modules, however the rest of the code is still ES5.

During development, using the following command allows you to watch the source files and do an automatic rebuild. Please note that minifying is not done at this stage.

npm run-script watch

Documentation

See Wiki: https://github.com/weblyzard/infovyz/wiki