Description
Vis.js is a dynamic, browser based visualization library. The library is designed to be easy to use, handle large amounts of dynamic data, and enable manipulation of the data. The library consists of the following components:
vis alternatives and similar libraries
Based on the "d3" category.
Alternatively, view vis alternatives based on common mentions on social networks and blogs.
echarts9.9 9.8 vis VS echartsEnterprise Charts.
three.js9.9 10.0 L2 vis VS three.jsJavaScript 3D library.
Chart.js9.9 9.6 L2 vis VS Chart.jsSimple HTML5 Charts using the tag.
fabric.js9.1 7.9 L2 vis VS fabric.jsJavascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser.
p5.js8.8 9.4 vis VS p5.jsp5.js is a JS client-side library for creating graphic and interactive experiences, based on the core principles of Processing.
BabylonJS8.7 10.0 L2 vis VS BabylonJSA framework for building 3D games with HTML 5 and WebGL.
chartist-js8.6 0.0 L3 vis VS chartist-jsSimple responsive charts.
recharts8.6 8.1 L3 vis VS rechartsRedefined chart library built with React and D3
paper.js8.4 5.3 L3 vis VS paper.jsThe Swiss Army Knife of Vector Graphics Scripting
Frappe Charts8.4 5.7 vis VS Frappe ChartsGitHub-inspired simple and modern SVG charts for the web with zero dependencies.
raphael8.3 0.2 L1 vis VS raphaelJavaScript Vector Library.
-
sigma.js8.0 0.0 L2 vis VS sigma.jsA JavaScript library dedicated to graph drawing.
-
vega7.9 9.1 vis VS vegaA visualization grammar.
nvd37.9 0.0 L2 vis VS nvd3Build re-usable charts and chart components for d3.js
dc.js7.8 7.3 L3 vis VS dc.jsMulti-Dimensional charting built to work natively with crossfilter rendered with d3.js
trianglify7.8 5.2 L5 vis VS trianglifyLow poly style background generator with d3.js
svg.js7.7 6.0 L3 vis VS svg.jsA lightweight library for manipulating and animating SVG.
morris.js7.4 0.0 vis VS morris.jsPretty time-series line graphs.
flot7.3 0.5 L1 vis VS flotAttractive JavaScript charts for jQuery.
mxGraph7.3 6.7 vis VS mxGraphDiagramming library that enables interactive graph and charting applications to be quickly created that run natively in any major browser that is supported by its vendor.
metrics-graphics7.1 6.6 L5 vis VS metrics-graphicsA library optimized for concise, principled data graphics and layouts.
rickshaw7.1 1.5 L2 vis VS rickshawJavaScript toolkit for creating interactive real-time graphs.
heatmap.js7.0 0.0 L4 vis VS heatmap.jsJavaScript Library for HTML5 canvas based heatmaps.
two.js6.9 7.6 L1 vis VS two.jsA renderer agnostic two-dimensional drawing api for the web.
cubism6.4 0.0 L4 vis VS cubismA D3 plugin for visualizing time series.
epoch6.2 0.0 vis VS epochA general purpose real-time charting library.
d3-cloud6.1 0.0 L3 vis VS d3-cloudCreate word clouds in JavaScript.
peity5.9 0.0 vis VS peityProgressive bar, line and pie charts.
processing.js5.8 0.0 vis VS processing.jsProcessing.js makes your data visualizations work using web standards and without any plug-ins
dimple.js5.4 0.0 L2 vis VS dimple.jsEasy charts for business analytics powered by d3
arbor5.4 0.0 L4 vis VS arborA graph visualization library using web workers and jQuery.
Frappe Gantt5.0 1.4 vis VS Frappe GanttA simple, interactive, modern gantt chart library for the web.
react-simple-maps4.7 3.9 vis VS react-simple-mapsAn svg map component built with and for React
g.raphael4.4 0.0 L2 vis VS g.raphaelCharts for Raphaël.
G2Plot4.3 9.6 vis VS G2PlotAn interactive and responsive charting library. Based on the grammar of graphics.
envisionjs4.2 0.0 L1 vis VS envisionjsDynamic HTML5 visualization.
d3plus4.0 4.4 L2 vis VS d3plusA javascript library that extends D3.js to enable fast and beautiful visualizations.
jquery.sparkline3.9 0.0 L2 vis VS jquery.sparklineA plugin for the jQuery javascript library to generate small sparkline charts directly in the browser.
Ember Charts3.5 2.3 L2 vis VS Ember ChartsA powerful and easy to use charting library for Ember.js
DHTMLX Gantt3.1 3.4 vis VS DHTMLX GanttGPL version of DHTMLX Javascript Gantt Chart
-
uvCharts2.3 0.0 L5 vis VS uvChartsSimple yet powerful JavaScript Charting library built using d3.js
SVG Gauge1.8 3.3 vis VS SVG GaugeMinimalistic, animated SVG gauge. Zero dependencies
Koto1.8 0.0 L4 vis VS KotoA framework for building reusable components with d3.js
pykcharts.js1.6 0.0 L5 vis VS pykcharts.jsWell designed d3.js charting without the complexity of d3.js.
COVID-19 in Charts0.3 8.1 vis VS COVID-19 in ChartsVisual representations of the progression of COVID-19.
xCharts0.2 2.3 L5 vis vis or a related project?
Popular Comparisons
README
vis.js (deprecated!)
:exclamation: This project is not maintained anymore! (See Issue #4259 for details)We welcome you to use the libraries from the visjs community from now on.. A DataSet can filter and order items, and convert fields of items.
- DataView. A filtered and/or formatted view on a DataSet.
- Graph2d. Plot data on a timeline with lines or barcharts.
- Graph3d. Display data in a three dimensional graph.
- Network. Display a network (force directed graph) with nodes and edges.
- Timeline. Display different types of data on a timeline.
The vis.js library was initially developed by Almende B.V.
Install
Install via npm:
npm install vis
Install via bower:
bower install vis
Link via cdnjs:
Or download the library from the github project:.
Load
To use a component, include the javascript and css files of vis in your web page:
<!DOCTYPE HTML> <html> <head> <script src="vis/dist/vis.min.js"></script> <link href="vis/dist/vis.min.css" rel="stylesheet" type="text/css" /> </head> <body> <script type="text/javascript"> // ... load a visualization </script> </body> </html>
or load vis.js using require.js. Note that vis.css must be loaded too.
require.config({ paths: { vis: 'path/to/vis/dist', } }); require(['vis'], function (math) { // ... load a visualization });
A timeline can be instantiated as:
var timeline = new vis.Timeline(container, data, options);
Where
container is an HTML element,
data is an Array with data or a DataSet,
and
options is an optional object with configuration options for the
component.
Example
A basic example on loading a Timeline is shown below. More examples can be found in the examples directory of the project.
<!DOCTYPE HTML> <html> <head> <title>Timeline basic demo</title> <script src="vis/dist/vis.min.js"></script> <link href="vis/dist/vis.min.css" rel="stylesheet" type="text/css" /> <style type="text/css"> body, html { font-family: sans-serif; } </style> </head> <body> <div id="visualization"></div> <script type="text/javascript"> var container = document.getElementById('visualization'); var data = [ '} ]; var options = {}; var timeline = new vis.Timeline(container, data, options); </script> </body> </html>
Build
Custom builds.
Prerequisitesin the root of the project:
cd vis npm install
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:
exports.DataSet = require('./lib/DataSet'); exports.Timeline = require('./lib/timeline/Timeline');
Then create a custom bundle using browserify, like:
browserify custom.js -t [ babelify --presets [es2015] ] :
<!DOCTYPE HTML> <html> <head> <script src="dist/vis-custom.min.js"></script> <link href="dist/vis.min.css" rel="stylesheet" type="text/css" /> </head> <body> ... </body> </html>
Example 2: Exclude external libraries --presets [es2015] ] :
<!DOCTYPE HTML> <html> <head> <!-- load external dependencies --> <script src=""></script> <script src=""></script> <!-- load vis.js --> <script src="dist/vis-custom.min.js"></script> <link href="dist/vis.min.css" rel="stylesheet" type="text/css" /> </head> <body> ... </body> </html>
Example 3: Bundle vis.js as part of your (commonjs) application
When writing a web application with commonjs modules, vis.js can be packaged automatically into the application. Create a file app.js containing:
var moment = require('moment'); var DataSet = require('vis/lib/DataSet'); var Timeline = require('vis/lib/timeline/Timeline'); var container = document.getElementById('visualization'); var data = new DataSet([ {id: 1, content: 'item 1', start: moment('2013-04-20')}, {id: 2, content: 'item 2', start: moment('2013-04-14')}, {id: 3, content: 'item 3', start: moment('2013-04-18')}, {id: 4, content: 'item 4', start: moment('2013-04-16'), end: moment('2013-04-19')}, {id: 5, content: 'item 5', start: moment('2013-04-25')}, {id: 6, content: 'item 6', start: moment('2013-04-27')} ]); var options = {}; var timeline = new Timeline(container, data, options);
The application can be bundled and minified:
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:
<!DOCTYPE HTML> <html> <head> <link href="node_modules/vis/dist/vis.min.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="visualization"></div> <script src="dist/app-bundle.min.js"></script> </body> </html>
Example 4: Integrate vis.js components directly in your webpack build
You can integrate e.g. the timeline component directly in you webpack build. Therefor you can e.g. import the component-files from root direcory (starting with "index-").
import { DataSet, Timeline } from 'vis/index-timeline-graph2d'; var container = document.getElementById('visualization'); var data = new DataSet(); var timeline = new Timeline(container, data, {});
To get this to work you'll need to add some babel-loader-setting to your webpack-config:
module: { module: { rules: [{ test: /node_modules[\\\/]vis[\\\/].*\.js$/, loader: 'babel-loader', query: { cacheDirectory: true, presets: [ "babel-preset-es2015" ].map(require.resolve), plugins: [ "transform-es3-property-literals", // #2452 "transform-es3-member-expression-literals", // #2566 "transform-runtime" // #2566 ] } }] } }
There is also an demo-project showing the integration of vis.js using webpack.
Test
To test the library, install the project dependencies once:
npm install
Then run the tests:
npm run test
License
Vis.js is dual licensed under both
and
Vis.js may be distributed under either license.
*Note that all licence references and agreements mentioned in the vis README section above are relevant to that project's source code only.