Proteic.js

Streaming and static data visualization for the modern web.

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! 🌎🌍🌏

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="https://d3js.org/d3.v4.min.js"></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);
barchart.draw();
</script>

We also distribute Proteic as a NPM package.

Dependencies

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.

Contributing

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.

Developers

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

Documentation

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