NoterikDataVisualizations

Data Visualization plugins for jQuery using d3.js, contains several jQuery plugins that can be used to visualize data.

Dependencies

Building

-NPM

-Grunt

Runtime

-jQuery

-d3

Building

Make sure you have npm installed, go to NoterikDataVisualization root directory and run:

npm install

After that run:

grunt 

In NoterikDataVisualization root directory.

Usage

For devel environment you can use:

//Each visualization type separately <script src="src/jquery.ntkPieChart.js"> 

or

//Concatenated non-mimimized/uglified file containing all plugins <script src="src/noterik-data-visualizations-<VERSION>.concat.js"> 

For production environments use:

<script src="dist/noterik-data-visualizations-<VERSION>.min.js">

All plugins use jQueryUI like initialization:

$("#wordcloud").ntkWordcloud({setting: 'settingValue'})

Examples can be found in the /examples folder and can be run without a webserver.

Piechart

Renders part values in a piechart. The amount of space a slice takes represents the part takes in the sum of all parts. Takes an array of data like:

[   {     "color": "#043ae2",     "label": "fimumlu",     "value": 3   },   {     "color": "#e51f43",     "label": "biak",     "value": 1   } ]

The array of data can be set once using the "setData" call, and after that any changes to the array can be reflected by the piechart by using the "redraw" call.

Example code can be found in /examples/piechart.html

DEMO:

https://rawgit.com/Noterik/NoterikDataVisualizations/master/example/piechart.html

Initialization

A piechart can be initialized like this:

$('#piechart').ntkPiechart({   data: data });

Settings can be passed when initializing the piechart, example:

$('#piechart').ntkPiechart({   data: data,   fontFamility: 'Verdana,sans-serif' });

Updating

Data should be changed directly in the array that was used to initialize the chart. The chart maintains a direct coupling to the array and any changes to the array can be reflected by doing a redraw call like this:

$('#piechart').ntkPiechart('redraw')

If you want to change the dataset with a new one, you can use the 'setData' call like this

$('#piechart').ntkPiechart('setData', data);

Customization

The label of a PieChart can be customized by with the labelCallback function. This callback function takes an "element" argument which is a D3 element in which the label is rendered. For more information on how to customize these elements, please look here: https://github.com/d3/d3-selection/blob/master/README.md#modifying-elements

Should always return the element being modified!

// Example on how to set an id on a label var piechart = $('#piechart').ntkPieChart({   data: data,   labelCallback: function(element){ // Element is a D3 selected element that is being rendered for the current data entry.     return element.attr("id", function(entry){ // Entry contains a reference to the current data entry being rendered.       return "label_" + entry.data.label     })   } });

Piechart settings

Piechart events

You can listen to piecharts by using jQuery .on() like this:

// Example on how to bind an event listener var piechart = $('#piechart').ntkPieChart({   data: data, });  piechart.on('slice-animation-finished', function(){   //Callback   console.log('slice animation has finished!') });

Wordcloud

Renders words in a cloud. When a new word is added, it "shoots" it into the existing cloud. If a word is added that already exists, the size of the existing word will be increased. Example code can be found in /examples/wordcloud.html

DEMO:

https://rawgit.com/Noterik/NoterikDataVisualizations/master/example/wordcloud.html

Initialization

A wordcloud can be initialized like this:

$('#wordcloud').ntkWordcloud();

All the settings can be passed when initializing the wordcloud, example:

$('#wordcloud').ntkWordcloud({   gravity: 0.5 });

Updating

A word can be added like this:

$('#wordcloud').ntkWordcloud('addWord', {     text: "Lorum" });

You can also add several words at once like this:

$('#wordcloud').ntkWordcloud('addWord', [{   text: "Lorum" },{   text: "Ipsum" }]);

Wordcloud generic settings

Wordcloud word settings

These are passed as an object in the generic wordDefaults object like:

$('#wordcloud').ntkWordcloud({   gravity: 0.5,   wordDefaults: { //<-- These are the default word settings     fontFamilty: 'Arial'   } });

They can also be overwritten specifically by changing the values of the word object passed in the "addWord" method like:

$('#wordcloud').ntkWordcloud('addWord', {   text: 'Lorum',   fontFamily: 'Helvetica',   color: '#123456' });

Waterball

Based on http://bl.ocks.org/brattonc/raw/5e5ce9beee483220e2f6/

Displays a number inside a ball and fills the ball with water according to the percentage of the value relative to the min and max.Can be updated realtime, will animate changes nicely.

Example code can be found in /examples/waterball.html

DEMO:

https://rawgit.com/Noterik/NoterikDataVisualizations/master/example/waterball.html

Initialization

A waterball can be initialized like this:

$('#wordcloud').ntkWaterball();

All the settings can be passed when initializing the waterball, example:

$('#waterball').ntkWaterball({   minValue: 300, // The gauge minimum value.   maxValue: 500, // The gauge maximum value. });

Updating

The value of a waterball can be updated like this:

$('#waterball').ntkWaterball("update", 310);

Waterball settings

Logo

Displays the Noterik logo and allows a text to be rendered in the center. For supports one animation called: "rotate" which rotates the two arcs on the outside of logo around the center.

Example code can be found in /examples/logo.html

DEMO:

https://rawgit.com/Noterik/NoterikDataVisualizations/master/example/logo.html

Initialization

The logo can be initialized like this:

$('#logo').ntkLogo();

All these settings can be passed when initializing the logo, example:

$('#logo').ntkLogo({   animation: 'rotate' });

Updating

The text in the logo can be updated like this:

$('#logo').ntkLogo('setText', {   'text': 'Lorum Ipsum',   'animation': 'rotate' });

Logo settings