In Greek mythology, Proteus is an early sea-god or god of rivers and oceanic bodies of water, one of several deities whom Homer calls the "Old Man of the Sea". Some who ascribe to him a specific domain call him the god of "elusive sea change", which suggests the constantly changing nature of the sea or the liquid quality of water in general. He can foretell the future, but, in a mytheme familiar to several cultures, will change his shape to avoid having to; he will answer only to someone who is capable of capturing the beast. From this feature of Proteus comes the adjective protean, with the general meaning of "versatile", "mutable", "capable of assuming many forms". "Protean" has positive connotations of flexibility, versatility and adaptability. - Wikipedia
Before start developing this (awesome) library, we first analyzed hundreds of charting libraries out there. They are really good but almost all of them:
- have a really bad and unreadable code. No code patterns. Variables traveling between files. :airplane: :airplane: = Bad for developers and community
- are really heavy. Redundant and duplicate code. :heavy_exclamation_mark: = not fast as it should be
- lack ES6 fearures. No modules. = More code lines & prone to errors
- are developed on top of old D3.js versions. Bad performance
For these reasons we decided to develop a new web-based visualization library from scratch, by aiming to solve all the previously identified issues.
Simply add the
proteic.js script to your project and include it in your HTML:
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:
Additionally, as a special feature of barcharts, they can transit from and to different states:
To transit a barchart to a different state, you can use the following code:
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 on (http://localhost:8080/)[http://localhost:8080/]
serve:watch: launches an http debug server and automatically refreshes the browser after every change
If you need more information about the ProteicJS API, you can visit our JSDocs site