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! 🌎🌍🌏
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.
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 codepretest: builds the source code before testingtest: runs the tests using Karmaprebuild: removes the build directory before building to prevent errorsbuild: builds the source code with Rollup.jsserve: 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.