Streaming and static data visualization for the modern web.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Update PULL_REQUEST_TEMPLATE.md 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
scss
src
test/utils
.gitignore Merge development Nov 7, 2016
.travis.yml Replace gulp call with npm on travis.uml Sep 28, 2016
CHANGELOG.md
CONTRIBUTING.md Update CONTRIBUTING.md Sep 16, 2016
LICENSE Initial commit Mar 15, 2016
README.md Update README Apr 28, 2017
deploy-jsdoc.sh 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
tsconfig.json
tslint.json
webpack.config.js
webpack.production.config.js Update webpack.production.config.js Nov 7, 2017
yarn.lock Add anotated events to scatterplot. May 4, 2017

README.md

Proteic.js

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="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.