Streaming and static data visualization for the modern web.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Update Mar 28, 2017
dist Dependecies updated and changes in how chart pause works Jul 26, 2018
examples Changes in some examples Jul 26, 2018
images Add files via upload Feb 13, 2018
.gitignore Merge development Nov 7, 2016
.travis.yml Replace gulp call with npm on travis.uml Sep 28, 2016 Update Sep 16, 2016
LICENSE Initial commit Mar 15, 2016 Update README Apr 28, 2017 Run docs when publishing jsdocs Oct 15, 2016
esdoc.json Replace JSDocs by ESDocs, since JSDocs does not fully support ES6. Cl… Oct 15, 2016
index.d.ts Replace index.d.ts file Jan 9, 2017
index.ts Modify files according to lint rules Jun 29, 2017
karma.conf.js Add mime type option in karma file! Jan 24, 2017
package-lock.json Dependecies updated and changes in how chart pause works Jul 26, 2018
package.json Dependecies updated and changes in how chart pause works Jul 26, 2018
webpack.production.config.js Update webpack.production.config.js Nov 7, 2017
yarn.lock Add anotated events to scatterplot. May 4, 2017


Streaming and static data visualization for the modern web.

Build Status Dependency Status codecov Codacy Badge Gitter

Proteic.js is a general purpose data visualization library built for both static and streaming data. It provides a wide catalogue of ready-to-use visualizations, a fluent API for easy configuration, and connectors for streams of data over different protocols like WebSocket and HTTP. The library is built with a modular architecture, focusing on code cleanliness so it can be easily extended and customized.

Development of Proteic.js is funded by the European Union as part of the broader PROTEUS project. 🇪🇺

We invite you to contribute! 🌎🌍🌏

Annotated scatterplot Streaming area chart

Installation and usage

You can find a more detailed documentation in our Wiki and JSDoc

Simply add the proteic.js script and a Proteic CSS theme to your project and include it in your HTML:

<script type="text/javascript" src="proteic.min.js"></script>
<link rel='stylesheet' href='proteic.css'

After including the script (preferably the minified version for production environments) you are ready to use ProteicJS.

As an example, here is how to create a simple Barchart with static data:

<script type="text/javascript" src=""></script>
<script type="text/javascript" src="proteic.min.js"></script>
<link rel='stylesheet' href='proteic.css'>

<!-- By default, Proteic.js places the chart into div#chart -->
<div style id='chart'></div>

<script type="text/javascript">
var data = [
  {x: 'SP', key: '- 18', y: 30},
  {x: 'SP', key: '+ 18 - 35', y: 25},
  {x: 'SP', key: '+ 35', y: 45},
  {x: 'FR', key: '- 18', y: 10},
  {x: 'FR', key: '+ 18 - 35', y: 50},
  {x: 'FR', key: '+ 35', y: 40}

var barchart = new proteic.Barchart(data);

We also distribute Proteic as a NPM package.


Proteic.js has a unique but important dependency: D3.js. We are using the recently released version 4, which is not compatible with previous versions. Yo can have a look into the changes here.


If you are interested in the project and you want to collaborate in your spare time, you can have a look into the contributing guide.


We provide the following NPM Scripts to ease the development process. You can run each script like the following npm run-script serve:watch

  • lint: runs the JSHint linter to detect errors and problems in the code
  • pretest: builds the source code before testing
  • test: runs the tests using Karma
  • prebuild: removes the build directory before building to prevent errors
  • build: builds the source code with Rollup.js
  • serve: launches an http debug server and automatically refreshes the browser after every change


You can find general information about Proteic in its website, developer documentation in the Wiki and API documentation in the JSDocs.