jQuery Plugins To Visualize Date Using D3.js - Noterik DataVisualizations

File Size: 572 KB
Views Total: 10884
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
jQuery Plugins To Visualize Date Using D3.js - Noterik DataVisualizations

Noterik DataVisualizations is a set of jQuery plugin which takes advantage of D3.js library to visualize your plain data into animated, dynamic, interactive pie/bar charts or a word cloud.

More examples:

How to use it:

1. Add the needed jQuery and D3.js JavaScript libraries into your html page.

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

2. Render a bar chart in the webpage.

<script src="src/jquery.ntkBarChart.js"></script>
var barchart = $('#barchart').ntkBarChart({
    data: [],
    fontFamily: "Verdana,sans-serif",
    fontColor: "#FFFFFF",
    margin: {
      top: 20,
      right: 20,
      bottom: 30,
      left: 60

3. Render a pie chart in the webpage.

<script src="src/jquery.ntkPieChart.js"></script>
var piechart = $('#piechart').ntkPieChart({
    data: [],
    fontFamily: "Verdana,sans-serif",
    fontColor: "#FFFFFF",

4. Render a word/tag cloud in the webpage.

<script src="src/jquery.ntkWordcloud.js"></script>
var wordcloud = $('#wordcloud').ntkWordCloud({

    words: [],

    // Decides how quick the words will go to the center of gravity
    gravity: 0.4, 
    wordDefaults: {
      text: "Lorum",
      color: "random", //Can either be a HEX string or "random" <- means random color will be generated
      fontSize: 30,
      fontSizeIncrease: 10, //How much will the fontSize be increased if the word already exists,
      fontFamily: 'Helvetica'

    //Decides if nodes are attracted to each or not, positive means attraction, negative means repel
    defaultCharge: -1500, 

    //Charge is calculated from fontSize like this (fontSize * chargeMultiplier)
    chargeMultiplier: -50 



v1.4.5 (2019-02-09)

  • Bugfixed


  • Will now also animate color changes in piechart part


  • v1.1.1


  • Added waterfall visualization


  • Made word cloud responsive

This awesome jQuery plugin is developed by Noterik. For more Advanced Usages, please check the demo page or visit the official website.