jrtechs
/
jrtechs-vis
mirror of https://github.com/jrtechs/vis.git
1
0
Fork 0
Code Issues 0 Releases 82 Wiki Activity
Browse Source

Readme improvements (#2520) 

* generate custom builds into the dist folder

* updated the we-need-help link in the readme

* general improvements of the readme
fix2580
Alexander Wunschik 8 years ago
committed by yotamberk
parent
bbb48497af
commit
412f6e333d
1 changed files with 34 additions and 41 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +34
    -41
      README.md

+ 34
- 41
README.md View File

@ -1,7 +1,7 @@
vis.js vis.js
================== ==================
<a href="https://github.com/almende/vis/issues/1781" target="_blank">
<a href="https://github.com/almende/vis/blob/develop/misc/we_need_help.md">
<img align="right" src="https://raw.githubusercontent.com/almende/vis/master/misc/we_need_help.png"> <img align="right" src="https://raw.githubusercontent.com/almende/vis/master/misc/we_need_help.png">
</a> </a>
@ -10,8 +10,8 @@ The library is designed to be easy to use, handle large amounts
of dynamic data, and enable manipulation of the data. of dynamic data, and enable manipulation of the data.
The library consists of the following components: The library consists of the following components:
- DataSet and DataView. A flexible key/value based data set. Add, update, and
remove items. Subscribe on changes in the data set. A DataSet can filter and
- DataSet and DataView. A flexible key/value based data set. Add, update, and
remove items. Subscribe on changes in the data set. A DataSet can filter and
order items, and convert fields of items. order items, and convert fields of items.
- DataView. A filtered and/or formatted view on a DataSet. - DataView. A filtered and/or formatted view on a DataSet.
- Graph2d. Plot data on a timeline with lines or barcharts. - Graph2d. Plot data on a timeline with lines or barcharts.
@ -19,8 +19,7 @@ The library consists of the following components:
- Network. Display a network (force directed graph) with nodes and edges. - Network. Display a network (force directed graph) with nodes and edges.
- Timeline. Display different types of data on a timeline. - Timeline. Display different types of data on a timeline.
The vis.js library is developed by [Almende B.V](http://almende.com).
The vis.js library was initially developed by [Almende B.V](http://almende.com).
## Install ## Install
@ -37,18 +36,16 @@ Link via cdnjs: http://cdnjs.com
Or download the library from the github project: Or download the library from the github project:
[https://github.com/almende/vis.git](https://github.com/almende/vis.git). [https://github.com/almende/vis.git](https://github.com/almende/vis.git).
## Load ## Load
To use a component, include the javascript and css files of vis in your web page: To use a component, include the javascript and css files of vis in your web page:
```html ```html
<!DOCTYPE HTML> <!DOCTYPE HTML>
<html> <html>
<head> <head>
<script src="components/vis/dist/vis.js"></script>
<link href="components/vis/dist/vis.css" rel="stylesheet" type="text/css" />
<script src="webroot/vis/dist/vis.js"></script>
<link href="webroot/vis/dist/vis.css" rel="stylesheet" type="text/css" />
</head> </head>
<body> <body>
<script type="text/javascript"> <script type="text/javascript">
@ -123,7 +120,6 @@ of the project.
</html> </html>
``` ```
## Build ## Build
To build the library from source, clone the project from github To build the library from source, clone the project from github
@ -131,7 +127,7 @@ To build the library from source, clone the project from github
$ git clone git://github.com/almende/vis.git $ git clone git://github.com/almende/vis.git
The source code uses the module style of node (require and module.exports) to The source code uses the module style of node (require and module.exports) to
organize dependencies. To install all dependencies and build the library,
organize dependencies. To install all dependencies and build the library,
run `npm install` in the root of the project. run `npm install` in the root of the project.
$ cd vis $ cd vis
@ -146,32 +142,30 @@ To automatically rebuild on changes in the source files, once can use
$ npm run watch $ npm run watch
This will both build and minify the library on changes. Minifying is relatively This will both build and minify the library on changes. Minifying is relatively
slow, so when only the non-minified library is needed, one can use the
slow, so when only the non-minified library is needed, one can use the
`watch-dev` script instead: `watch-dev` script instead:
$ npm run watch-dev $ npm run watch-dev
## Custom builds ## Custom builds
The folder `dist` contains bundled versions of vis.js for direct use in the browser. These bundles contain all the visualizations and include external dependencies such as hammer.js and moment.js.
The folder `dist` contains bundled versions of vis.js for direct use in the browser. These bundles contain all the visualizations and include external dependencies such as *hammer.js* and *moment.js*.
The source code of vis.js consists of commonjs modules, which makes it possible to create custom bundles using tools like [Browserify](http://browserify.org/) or [Webpack](http://webpack.github.io/). This can be bundling just one visualization like the Timeline, or bundling vis.js as part of your own browserified web application.
The source code of vis.js consists of commonjs modules, which makes it possible to create custom bundles using tools like [Browserify](http://browserify.org/) or [Webpack](http://webpack.github.io/). This can be bundling just one visualization like the Timeline, or bundling vis.js as part of your own browserified web application.
*Note that hammer.js version 2 is required as of v4.* *Note that hammer.js version 2 is required as of v4.*
#### Prerequisites
### Prerequisites
Before you can do a build: Before you can do a build:
- Install node.js and npm on your system: https://nodejs.org/
- Install *node.js* and *npm* on your system: https://nodejs.org/
- Install the following modules using npm: `browserify`, `babelify`, and `uglify-js`: - Install the following modules using npm: `browserify`, `babelify`, and `uglify-js`:
``` ```
$ [sudo] npm install -g browserify babelify uglify-js $ [sudo] npm install -g browserify babelify uglify-js
``` ```
- Download or clone the vis.js project: - Download or clone the vis.js project:
``` ```
@ -185,9 +179,11 @@ Before you can do a build:
$ npm install $ npm install
``` ```
#### Example 1: Bundle a single visualization
### Examples of custom builds
#### Example 1: Bundle only a single visualization type
For example, to create a bundle with just the Timeline and DataSet, create an index file named **custom.js** in the root of the project, containing:
For example, to create a bundle with just the Timeline and DataSet, create an index file named **custom.js** in the root of the project, containing:
```js ```js
exports.DataSet = require('./lib/DataSet'); exports.DataSet = require('./lib/DataSet');
@ -196,11 +192,11 @@ exports.Timeline = require('./lib/timeline/Timeline');
Then create a custom bundle using browserify, like: Then create a custom bundle using browserify, like:
$ browserify custom.js -t babelify -o vis-custom.js -s vis
$ browserify custom.js -t babelify -o dist/vis-custom.js -s vis
This will generate a custom bundle *vis-custom.js*, which exposes the namespace `vis` containing only `DataSet` and `Timeline`. The generated bundle can be minified using uglifyjs: This will generate a custom bundle *vis-custom.js*, which exposes the namespace `vis` containing only `DataSet` and `Timeline`. The generated bundle can be minified using uglifyjs:
$ uglifyjs vis-custom.js -o vis-custom.min.js
$ uglifyjs dist/vis-custom.js -o dist/vis-custom.min.js
The custom bundle can now be loaded like: The custom bundle can now be loaded like:
@ -208,7 +204,7 @@ The custom bundle can now be loaded like:
<!DOCTYPE HTML> <!DOCTYPE HTML>
<html> <html>
<head> <head>
<script src="vis-custom.min.js"></script>
<script src="dist/vis-custom.min.js"></script>
<link href="dist/vis.min.css" rel="stylesheet" type="text/css" /> <link href="dist/vis.min.css" rel="stylesheet" type="text/css" />
</head> </head>
<body> <body>
@ -219,13 +215,13 @@ The custom bundle can now be loaded like:
#### Example 2: Exclude external libraries #### Example 2: Exclude external libraries
The default bundle `vis.js` is standalone and includes external dependencies such as hammer.js and moment.js. When these libraries are already loaded by the application, vis.js does not need to include these dependencies itself too. To build a custom bundle of vis.js excluding moment.js and hammer.js, run browserify in the root of the project:
The default bundle `vis.js` is standalone and includes external dependencies such as *hammer.js* and *moment.js*. When these libraries are already loaded by the application, vis.js does not need to include these dependencies itself too. To build a custom bundle of vis.js excluding *moment.js* and *hammer.js*, run browserify in the root of the project:
$ browserify index.js -t babelify -o vis-custom.js -s vis -x moment -x hammerjs
This will generate a custom bundle *vis-custom.js*, which exposes the namespace `vis`, and has moment and hammerjs excluded. The generated bundle can be minified with uglifyjs:
$ browserify index.js -t babelify -o dist/vis-custom.js -s vis -x moment -x hammerjs
$ uglifyjs vis-custom.js -o vis-custom.min.js
This will generate a custom bundle *vis-custom.js*, which exposes the namespace `vis`, and has *moment.js* and *hammer.js* excluded. The generated bundle can be minified with uglifyjs:
$ uglifyjs dist/vis-custom.js -o dist/vis-custom.min.js
The custom bundle can now be loaded as: The custom bundle can now be loaded as:
@ -234,11 +230,11 @@ The custom bundle can now be loaded as:
<html> <html>
<head> <head>
<!-- load external dependencies --> <!-- load external dependencies -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.7.0/moment.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/hammer.js/1.1.3/hammer.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
<!-- load vis.js --> <!-- load vis.js -->
<script src="vis-custom.min.js"></script>
<script src="dist/vis-custom.min.js"></script>
<link href="dist/vis.min.css" rel="stylesheet" type="text/css" /> <link href="dist/vis.min.css" rel="stylesheet" type="text/css" />
</head> </head>
<body> <body>
@ -275,8 +271,8 @@ Install the application dependencies via npm:
The application can be bundled and minified: The application can be bundled and minified:
$ browserify app.js -o app-bundle.js -t babelify
$ uglifyjs app-bundle.js -o app-bundle.min.js
$ browserify app.js -o dist/app-bundle.js -t babelify
$ uglifyjs dist/app-bundle.js -o dist/app-bundle.min.js
And loaded into a webpage: And loaded into a webpage:
@ -288,13 +284,11 @@ And loaded into a webpage:
</head> </head>
<body> <body>
<div id="visualization"></div> <div id="visualization"></div>
<script src="app-bundle.min.js"></script>
<script src="dist/app-bundle.min.js"></script>
</body> </body>
</html> </html>
``` ```
## Test ## Test
To test the library, install the project dependencies once: To test the library, install the project dependencies once:
@ -303,12 +297,11 @@ To test the library, install the project dependencies once:
Then run the tests: Then run the tests:
$ npm test
$ npm run test
## License ## License
Copyright (C) 2010-2015 Almende B.V.
Copyright (C) 2010-2016 Almende B.V. and Contributors
Vis.js is dual licensed under both Vis.js is dual licensed under both

Write Preview
Loading…
Cancel
Save