Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Four Free Data Analysis and Visualization Libraries for Your Project

DZone's Guide to

Four Free Data Analysis and Visualization Libraries for Your Project

We take a look at four JavaScript libraries for data visualization and data analysis. Read on to find which one works best for you!

· Big Data Zone ·
Free Resource

The open source HPCC Systems platform is a proven, easy to use solution for managing data at scale. Visit our Easy Guide to learn more about this completely free platform, test drive some code in the online Playground, and get started today.

Image title

The human brain works in such a way that visual information is better recognized and perceived than textual information. That’s why all marketers and analysts use different data visualization techniques and tools to make boring tabular data more vibrant. Their goal is to convert the raw, unstructured data to structured data and to convey its meaning to those people who are involved in the process of decision-making.

The following approach is the most common:

  • Firstly, aggregate the dataset in the pivot table.
  • Visualize it with the help of charts.

So, today I’d like to give an overview of four powerful tools for data analysis and visualization which can be combined together to achieve even the most elaborate demands. They can be divided into two categories: pivot tables and charts.

Moreover, these tools are free and accessible by anyone.

1. PivotTable.js

Image title

PivotTable.js is an open-source Pivot Table written in JavaScript.

Features and Functionality

  • The library provides analysts with drag and drop functionality which makes user experience interactive.
  • Data can be filtered, grouped, and aggregated using UI. There is plenty of aggregation functions to choose from. However, although grand totals are available, subtotals support is missing.
  • It has built-in renderers for heat map and table-bar charts. If these charts are not enough, the pivot table can be integrated with Plotly, C3 Charts, D3.js, and Google Charts.
  • For React developers there is a React-based pivot table with Plotly charts already embedded into it.
  • You can export your report to TSV format. In case you want to save it in another data format, you can use third-party plugins.
  • There is only an Excel-like layout. It means that if a row is composed of more than one hierarchy, each hierarchy is always displayed in a separate column.
  • It can be localized into different languages.

Learn More

  1. Demo
  2. Download from GitHub

2. WebDataRocks

Image title

WebDataRocks is a lightweight web pivot table written in JavaScript for quick data analysis.

Features and Functionality

  • The main feature of the web reporting tool is its accessibility — you don’t need to know how to code to start creating reports based on your JSON/CSV dataset.
  • Data can be easily aggregated, filtered, and sorted in real-time using an intuitive UI. Grand totals and subtotals are available as well as the conditional formatting of cells. For custom aggregation, you can add a calculated value.
  • If you want to create an analytical dashboard, you can integrate WebDataRocks with Google Charts, Highcharts, or any other charting library.
  • Integration with different frameworks like React, AngularJS, and Angular 2+ is also supported.
  • Report’s customization options are available: you can choose between the predefined themes or create a new one.
  • The Toolbar is an extra UI-feature of WebDataRocks Pivot Table which gives end-users an access to the basic functionality.
  • You can save your report for further editing and export to three possible formats: PDF, Excel, and HTML or print it.
  • There are three possible layouts of the table: classic, compact and flat forms. The classic form provides a separate column for each hierarchy. With the compact form chosen, the hierarchies are combined into one column. The flat form displays non-hierarchical data without aggregation being applied.
  • Localization is available as well.

Learn More

  1. Demo
  2. Download options

3. GoogleCharts

Image title


GoogleCharts is one of the most-known dynamic charting libraries which can be embedded into any web project with the help of simple JavaScript.

It is cross-browser compatible and comes with an extensive set of chart types. It’s free for both commercial and non-commercial use, therefore, it can be used by developers, data analysts, students, casual users, etc.

Features and Functionality

To create a smart data visualization based on the data you can:

  • Connect to SQL databases, Excel, Google Spreadsheets, and CSV files using Chart Tools Datasource protocol and visualize it.
  • Prepare the data in your own way before sending it to the chart by creating an instance of google.visualization.DataTable class.
  • Customize the Look and Feel of charts — make the charts adopt the style of your webpage.
  • Add interactive elements (e.g., Events which can be fired on user interaction, Animation).
  • Use Table Chart to display non-aggregated data.

Furthermore, there are many ways to draw the chart or multiple charts.

Learn More

  1. Quick start
  2. Chart Gallery

4. D3.js

Image title

Last but not least, is D3.js. If you are not enthusiastic about the idea of DOM manipulation using the W3C DOM API, then D3.js is a perfect choice for you.

This open-source JavaScript library allows making visualizations based on the data from the documents. Probably, it has the greatest collection of charts on the web and its community support is impressive. Many modern charting libraries are built on top of D3.js. However, D3.js requires certain experience with JavaScript and it is not compatible with all browsers.

Features and Functionality

To produce an interactive visualization you can:

  • Create or remove HTML, SVG, and CSS elements, associate certain documents’ changes with user’s actions.
  • Bind the data to the DOM and SVG.
  • Load the data from the documents and make interactive charts and animations based on it.

Also, D3.js can work with Canvas if you need to boost the performance of your application.

Learn More

  1. Download from GitHub
  2. Tutorials
  3. Chart Gallery

It’s up to you which tool to choose to start making reports and visualization of the data from your application. Undoubtedly, choosing the right one is not an easy task. So I hope this short overview will help you to make a decision and empower your data analysis process.

Managing data at scale doesn’t have to be hard. Find out how the completely free, open source HPCC Systems platform makes it easier to update, easier to program, easier to integrate data, and easier to manage clusters. Download and get started today.

Topics:
javascript ,data visualization ,big data ,d3.js

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}