{"id":29291437,"url":"https://github.com/visjs/vis","last_synced_at":"2025-07-06T08:02:08.907Z","repository":{"id":8055957,"uuid":"9467421","full_name":"visjs/vis","owner":"visjs","description":"⚠️ This project is not maintained anymore! Please go to https://github.com/visjs","archived":true,"fork":false,"pushed_at":"2019-07-28T18:48:52.000Z","size":139306,"stargazers_count":7835,"open_issues_count":815,"forks_count":1471,"subscribers_count":18,"default_branch":"master","last_synced_at":"2025-06-29T13:43:12.970Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/visjs.png","metadata":{"files":{"readme":"README.md","changelog":"HISTORY.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE-APACHE-2.0","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-04-16T08:01:02.000Z","updated_at":"2025-06-24T20:23:04.000Z","dependencies_parsed_at":"2022-09-06T02:11:56.013Z","dependency_job_id":null,"html_url":"https://github.com/visjs/vis","commit_stats":null,"previous_names":["visjs/vis"],"tags_count":82,"template":false,"template_full_name":null,"purl":"pkg:github/visjs/vis","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/visjs%2Fvis","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/visjs%2Fvis/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/visjs%2Fvis/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/visjs%2Fvis/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/visjs","download_url":"https://codeload.github.com/visjs/vis/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/visjs%2Fvis/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262830467,"owners_count":23371283,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-07-06T08:01:20.336Z","updated_at":"2025-07-06T08:02:08.901Z","avatar_url":"https://github.com/visjs.png","language":"JavaScript","readme":"# vis.js (deprecated!)\n\n:exclamation: **This project is not maintained anymore! (See [Issue #4259](http://github.com/almende/vis/issues/4259#issue-412107497) for details)**\u003cbr/\u003e**We welcome you to use the libraries from the [visjs community](https://www.github.com/visjs) from now on.**\n\n---\n\nVis.js is a dynamic, browser based visualization library.\nThe library is designed to be easy to use, handle large amounts\nof dynamic data, and enable manipulation of the data.\nThe library consists of the following components:\n\n- DataSet and DataView. A flexible key/value based data set. Add, update, and\n  remove items. Subscribe on changes in the data set. A DataSet can filter and\n  order items, and convert fields of items.\n- DataView. A filtered and/or formatted view on a DataSet.\n- Graph2d. Plot data on a timeline with lines or barcharts.\n- Graph3d. Display data in a three dimensional graph.\n- Network. Display a network (force directed graph) with nodes and edges.\n- Timeline. Display different types of data on a timeline.\n\nThe vis.js library was initially developed by [Almende B.V](http://almende.com).\n\n## Install\n\nInstall via npm:\n\n```sh\nnpm install vis\n```\n\nInstall via bower:\n\n```sh\nbower install vis\n```\n\nLink via cdnjs: https://cdnjs.com/libraries/vis\n\nOr download the library from the github project:\n[https://github.com/almende/vis.git](https://github.com/almende/vis.git).\n\n## Load\n\nTo use a component, include the javascript and css files of vis in your web page:\n\n```html\n\u003c!DOCTYPE HTML\u003e\n\u003chtml\u003e\n\u003chead\u003e\n  \u003cscript src=\"vis/dist/vis.min.js\"\u003e\u003c/script\u003e\n  \u003clink href=\"vis/dist/vis.min.css\" rel=\"stylesheet\" type=\"text/css\" /\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003cscript type=\"text/javascript\"\u003e\n    // ... load a visualization\n  \u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\nor load vis.js using require.js. Note that vis.css must be loaded too.\n\n```js\nrequire.config({\n  paths: {\n    vis: 'path/to/vis/dist',\n  }\n});\nrequire(['vis'], function (math) {\n  // ... load a visualization\n});\n```\n\nA timeline can be instantiated as:\n\n```js\nvar timeline = new vis.Timeline(container, data, options);\n```\n\nWhere `container` is an HTML element, `data` is an Array with data or a DataSet,\nand `options` is an optional object with configuration options for the\ncomponent.\n\n## Example\n\nA basic example on loading a Timeline is shown below. More examples can be\nfound in the [examples directory](https://github.com/almende/vis/tree/master/examples)\nof the project.\n\n```html\n\u003c!DOCTYPE HTML\u003e\n\u003chtml\u003e\n\u003chead\u003e\n  \u003ctitle\u003eTimeline basic demo\u003c/title\u003e\n  \u003cscript src=\"vis/dist/vis.min.js\"\u003e\u003c/script\u003e\n  \u003clink href=\"vis/dist/vis.min.css\" rel=\"stylesheet\" type=\"text/css\" /\u003e\n\n  \u003cstyle type=\"text/css\"\u003e\n    body, html {\n      font-family: sans-serif;\n    }\n  \u003c/style\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\u003cdiv id=\"visualization\"\u003e\u003c/div\u003e\n\n\u003cscript type=\"text/javascript\"\u003e\n  var container = document.getElementById('visualization');\n  var data = [\n    {id: 1, content: 'item 1', start: '2013-04-20'},\n    {id: 2, content: 'item 2', start: '2013-04-14'},\n    {id: 3, content: 'item 3', start: '2013-04-18'},\n    {id: 4, content: 'item 4', start: '2013-04-16', end: '2013-04-19'},\n    {id: 5, content: 'item 5', start: '2013-04-25'},\n    {id: 6, content: 'item 6', start: '2013-04-27'}\n  ];\n  var options = {};\n  var timeline = new vis.Timeline(container, data, options);\n\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n## Build\n\nTo build the library from source, clone the project from github\n\n```sh\ngit clone git://github.com/almende/vis.git\n```\n\nThe source code uses the module style of node (require and module.exports) to\norganize dependencies. To install all dependencies and build the library,\nrun `npm install` in the root of the project.\n\n```sh\ncd vis\nnpm install\n```\n\nThen, the project can be build running:\n\n```sh\nnpm run build\n```\n\nTo automatically rebuild on changes in the source files, once can use\n\n```sh\nnpm run watch\n```\n\nThis will both build and minify the library on changes. Minifying is relatively\nslow, so when only the non-minified library is needed, one can use the\n`watch-dev` script instead:\n\n```sh\nnpm run watch-dev\n```\n\n## Custom builds\n\nThe 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*.\n\nThe 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.\n\n*Note that hammer.js version 2 is required as of v4.*\n\n### Prerequisites\n\nBefore you can do a build:\n\n- Install *node.js* and *npm* on your system: https://nodejs.org/\n- Install the following modules using npm: `browserify`, `babelify`, and `uglify-js`:\n\n```sh\n[sudo] npm install -g browserify babelify uglify-js\n```\n\n- Download or clone the vis.js project:\n\n```sh\ngit clone https://github.com/almende/vis.git\n```\n\n- Install the dependencies of vis.js by running `npm install` in the root of the project:\n\n```sh\ncd vis\nnpm install\n```\n\n### Examples of custom builds\n\n#### Example 1: Bundle only a single visualization type\n\nFor 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:\n\n```js\nexports.DataSet = require('./lib/DataSet');\nexports.Timeline = require('./lib/timeline/Timeline');\n```\n\nThen create a custom bundle using browserify, like:\n\n```sh\nbrowserify custom.js -t [ babelify --presets [es2015] ] -o dist/vis-custom.js -s vis\n```\n\nThis 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:\n\n```sh\nuglifyjs dist/vis-custom.js -o dist/vis-custom.min.js\n```\n\nThe custom bundle can now be loaded like:\n\n```html\n\u003c!DOCTYPE HTML\u003e\n\u003chtml\u003e\n\u003chead\u003e\n  \u003cscript src=\"dist/vis-custom.min.js\"\u003e\u003c/script\u003e\n  \u003clink href=\"dist/vis.min.css\" rel=\"stylesheet\" type=\"text/css\" /\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  ...\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n#### Example 2: Exclude external libraries\n\nThe 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:\n\n```sh\nbrowserify index.js -t [ babelify --presets [es2015] ] -o dist/vis-custom.js -s vis -x moment -x hammerjs\n```\n\nThis 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:\n\n```sh\nuglifyjs dist/vis-custom.js -o dist/vis-custom.min.js\n```\n\nThe custom bundle can now be loaded as:\n\n```html\n\u003c!DOCTYPE HTML\u003e\n\u003chtml\u003e\n\u003chead\u003e\n  \u003c!-- load external dependencies --\u003e\n  \u003cscript src=\"http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js\"\u003e\u003c/script\u003e\n  \u003cscript src=\"http://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js\"\u003e\u003c/script\u003e\n\n  \u003c!-- load vis.js --\u003e\n  \u003cscript src=\"dist/vis-custom.min.js\"\u003e\u003c/script\u003e\n  \u003clink href=\"dist/vis.min.css\" rel=\"stylesheet\" type=\"text/css\" /\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  ...\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n#### Example 3: Bundle vis.js as part of your (commonjs) application\n\nWhen writing a web application with commonjs modules, vis.js can be packaged automatically into the application. Create a file **app.js** containing:\n\n```js\nvar moment = require('moment');\nvar DataSet = require('vis/lib/DataSet');\nvar Timeline = require('vis/lib/timeline/Timeline');\n\nvar container = document.getElementById('visualization');\nvar data = new DataSet([\n  {id: 1, content: 'item 1', start: moment('2013-04-20')},\n  {id: 2, content: 'item 2', start: moment('2013-04-14')},\n  {id: 3, content: 'item 3', start: moment('2013-04-18')},\n  {id: 4, content: 'item 4', start: moment('2013-04-16'), end: moment('2013-04-19')},\n  {id: 5, content: 'item 5', start: moment('2013-04-25')},\n  {id: 6, content: 'item 6', start: moment('2013-04-27')}\n]);\nvar options = {};\nvar timeline = new Timeline(container, data, options);\n```\n\nThe application can be bundled and minified:\n\n```sh\nbrowserify app.js -o dist/app-bundle.js -t babelify\nuglifyjs dist/app-bundle.js -o dist/app-bundle.min.js\n```\n\nAnd loaded into a webpage:\n\n```html\n\u003c!DOCTYPE HTML\u003e\n\u003chtml\u003e\n\u003chead\u003e\n  \u003clink href=\"node_modules/vis/dist/vis.min.css\" rel=\"stylesheet\" type=\"text/css\" /\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003cdiv id=\"visualization\"\u003e\u003c/div\u003e\n  \u003cscript src=\"dist/app-bundle.min.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n#### Example 4: Integrate vis.js components directly in your webpack build\n\nYou can integrate e.g. the timeline component directly in you webpack build.\nTherefor you can e.g. import the component-files from root direcory (starting with \"index-\").\n\n```js\nimport { DataSet, Timeline } from 'vis/index-timeline-graph2d';\n\nvar container = document.getElementById('visualization');\nvar data = new DataSet();\nvar timeline = new Timeline(container, data, {});\n```\n\nTo get this to work you'll need to add some babel-loader-setting to your webpack-config:\n\n```js\nmodule: {\n  module: {\n    rules: [{\n      test: /node_modules[\\\\\\/]vis[\\\\\\/].*\\.js$/,\n      loader: 'babel-loader',\n      query: {\n        cacheDirectory: true,\n        presets: [ \"babel-preset-es2015\" ].map(require.resolve),\n        plugins: [\n          \"transform-es3-property-literals\", // #2452\n          \"transform-es3-member-expression-literals\", // #2566\n          \"transform-runtime\" // #2566\n        ]\n      }\n    }]\n  }\n}\n```\n\nThere is also an [demo-project](https://github.com/mojoaxel/vis-webpack-demo) showing the integration of vis.js using webpack.\n\n## Test\n\nTo test the library, install the project dependencies once:\n\n```sh\nnpm install\n```\n\nThen run the tests:\n\n```sh\nnpm run test\n```\n\n## License\n\nCopyright (C) 2010-2017 Almende B.V. and Contributors\n\nVis.js is dual licensed under both\n\n- [The Apache 2.0 License](http://www.apache.org/licenses/LICENSE-2.0)\n\nand\n\n- [The MIT License](http://opensource.org/licenses/MIT)\n\nVis.js may be distributed under either license.\n","funding_links":[],"categories":["📦 Legacy \u0026 Inactive Projects","HarmonyOS","JavaScript"],"sub_categories":["Windows Manager"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvisjs%2Fvis","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvisjs%2Fvis","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvisjs%2Fvis/lists"}