• Home
  • About Us
  • Contact Us
  • Privacy Policy
  • Special Offers
Business Intelligence Info
  • Business Intelligence
    • BI News and Info
    • Big Data
    • Mobile and Cloud
    • Self-Service BI
  • CRM
    • CRM News and Info
    • InfusionSoft
    • Microsoft Dynamics CRM
    • NetSuite
    • OnContact
    • Salesforce
    • Workbooks
  • Data Mining
    • Pentaho
    • Sisense
    • Tableau
    • TIBCO Spotfire
  • Data Warehousing
    • DWH News and Info
    • IBM DB2
    • Microsoft SQL Server
    • Oracle
    • Teradata
  • Predictive Analytics
    • FICO
    • KNIME
    • Mathematica
    • Matlab
    • Minitab
    • RapidMiner
    • Revolution
    • SAP
    • SAS/SPSS
  • Humor

A Guide to the Best Javascript Visualization Libraries

May 26, 2020   Sisense

Developing analytic apps is a bold new direction for product teams. The Toolbox is where we talk development best practices, tips, tricks, and success stories to help you build the future of analytics and empower your users with the insights and actions they need.

JavaScript data visualization tools are in greater demand now than ever before because of the enormous growth of data. Marketing, finance, and sales teams all rely on visualizations to help them understand their data. Javascript visualization libraries empower product teams and other builders to create custom visuals that support their partners and can even be used to create new revenue streams in the form of customer-facing analytic apps.

Whatever their specialty or goals, users want their data to be displayed visually so that they can see insights from their data easily and act on them quickly. Data visualizations of key performance indicators (KPI) can even be sent automatically to users as they change, allowing them to make faster, smarter decisions.

packages CTA banners Product Teams A Guide to the Best Javascript Visualization Libraries

Understanding Javascript data visualization libraries

JavaScript data visualization libraries don’t just create beautiful visuals, they help make business intelligence (BI) more real to end-users. The developers building these visualizations must be guided by their colleagues who will actually be making use of them. They must also have access to flexible BI platforms (like Sisense) that can handle visualizations from a wide array of Javascript visualization libraries, which will allow them to input custom visuals that show users what they need to see in a way that makes sense to them. These visuals can include:

  • Customizable charts — sunburst, Sankey, dependency, and others 
  • Flexible API with clear documentation and sample code
  • Vibrant chart animation capabilities
  • User interactivity with chart elements
  • Compatible with React, Angular, Vue, and other libraries
  • Chart/Data export to diverse formats: PDF, JPG, PNG
  • Multiple data type compatibility: XML, JSON, CSV

Of the 50 or so competing JavaScript visualization libraries available, we’re going to explore 5 libraries that deliver a wide array of features to try to help you determine which one is the best for your application.

This decision may be dictated by a single factor such as compatibility with an existing Angular app or by an end-user performance requirement such as minimum chart rendering time. We’ll explore the intricacies of the different JavaScript libraries by reviewing example charts and code snippets. 

Stunning chart diversity with D3.js

This Sankey diagram shows the relationship between energy source supply and demand (source).

The D3.js data visualization library supports an impressive array of chart options. Combining user interactivity with chart animation puts this library in our top five. The best place to start comparing the capabilities of visualization libraries is to look at example charts and the code that generates their elements. So, let’s jump right into D3.js with a popular sample chart from this library’s GIT repo. 

This example chart interactively reveals the hierarchy of relationships among the classes of an application. In this screenshot of the interactive animation, hovering the mouse over “Data” lights up the functions shared among the classes. In this scenario, the class functions which it imports highlight as red curves, while classes which import its functions are shown as blue curves:

source

When reviewing the best visualization libraries, it is important to be aware that many other libraries are actually built with D3.js. For example, Nivo, Plotly.js, and Recharts are all built from the open-source D3.js library.

The D3.js API is flexible and features the popular d3.js dashboard which is also widely implemented in the best analytics applications — apps which demand the best quality chart performance. This code snippet contains the function which maps the hierarchy in the above chart (source):

function hierarchy(data, delimiter = ".") {
  let root;
  const map = new Map;
  data.forEach(function find(data) {
    const {name} = data;
    if (map.has(name)) return map.get(name);
    const i = name.lastIndexOf(delimiter);
    map.set(name, data);
    if (i >= 0) {
      find({name: name.substring(0, i), children: []}).children.push(data);
      data.name = name.substring(i + 1);
    } else {
      root = data;
    }
    return data;
  });
  return root;
}

An impressive selection of D3.js chart types, along with interactive examples and code snippets,  is available at the D3.js GIT repo.

Google Charts — all the basics

Featuring a comprehensive chart gallery and extensive documentation of the API, Google Charts fulfills the expectations one might have when “standing on the shoulders of a giant.” The Chart Gallery contains examples of 29 chart types with example code for developers who are getting started charting with JavaScript. Since we began on page one with a D3.js Sankey diagram, let’s compare that with Google’s Sankey:

source

Google Charts’ version has glowing color mouseover interactivity with popup comments and a rich set of features to bring the chart to life and keep the user focused on critical data. Here is the sample code to define the colors in the chart (source):

var colors = ['#a6cee3', '#b2df8a', '#fb9a99', '#fdbf6f',
                  '#cab2d6', '#ffff99', '#1f78b4', '#33a02c'];
    var options = {
      height: 400,
      sankey: {
        node: {
          colors: colors
        },
        link: {
          colorMode: 'gradient',
          colors: colors
        }
      }
    };

Google Charts documentation is concise and clearly organized. It’s also is free to use, but not open source. Data must be piped to the Google Charts API for plotting. The implication here is that users may not be comfortable with the liability of shipping confidential client data out of the environment when the Google source can’t be hosted in-house. 

sisense blog Embedded Trends 20191218 bl blog banner A Guide to the Best Javascript Visualization Libraries

Highcharts: Strong community and API reference

A robust charting library, Highcharts has both free and paid versions. The source code can be installed in-house or in a Cloud PaaS, which is advantageous for analytic apps with strict data security constraints. A significant set of large enterprises use Highcharts, and so the community of contributing users is large. Beyond the opening list of standard features, Highcharts’ high points include:

  • Excellent API reference, and community showcase.
  • Compatible with Angular, React, and .NET plus more.
  • Charts export to all web image formats.

Let’s look at an interactive Highcharts example. A variation on the Sankey chart concept, the dependency wheel is also a flow diagram. However, the nodes are mapped to the edge of a circle with the links connecting the nodes. As with the Sankey, the width of the links and size of the nodes are proportional to the quantity of flow. Unlike the Sankey, though, the dependency wheel flow is multidirectional and single-layered. In the following example, a country’s export dependency on other countries is highlighted on mouseover event:

source

amCharts: Great for touchscreens

A distinguishing feature of the amCharts JS visualization library is specialized touch screen interactivity for charts displayed on mobile devices. This will appeal to endpoint users such as sales engineers who want to monitor product performance quickly while in the field. Zoom charts which illustrate more data at deeper levels can now be explored readily on tablets and phones.

amCharts is compatible with all the major frontend development frameworks like Angular and React. The amCharts Sankey diagram is configurable for animation. Here is an example with a distinctive color scheme which shows how the relative size of nodes and links illustrates quantitative proportionality in this chart of tech revenue distribution.

source: https://www.amcharts.com/demos/animated-sankey-diagram/

Although amCharts’ primary product is a paid version, it is possible to use the library for free on the condition that all generated charts contain the amCharts logo. So, this will not work for companies offering a whitelabel analytics app. There is a rich set of demos of all supported chart types with complete documentation and code samples, all of which lends well to the customization of charts.

Recharts: built for React

Although Recharts is actually built from D3.js components, it is important to our discussion for two reasons. First, Recharts is specifically intended for use with React, as essentially all of the D3.js library is wrapped in React classes. Secondly, Recharts is very popular, boasting a number of downloads not far behind Highcharts. Now that we are operating in the age of ubiquitous white-labled web apps, many React developers will find themselves using Recharts without knowing that they’re actually using the D3.js core.

Another thing to note about the Recharts is that there are two significant disadvantages to using it. For one, there are substantial open issues on the GIT repo, and bugs seem to appear faster than they are resolved. Additionally, Recharts can only be used in React projects. The large number of downloads also speaks indirectly about the wildly popular React JavaScript framework. This paradoxical limitation to React projects likewise refers back to our initial point that the choice of visualization library may be dictated solely by the application’s pre-existing development framework. 

Choosing the right JavaScript visualization library for you

Having surveyed five of the most popular JavaScript data visualization libraries, you can see that there are substantial differences. Can your infrastructure host the library locally? Is the library license paid or free and does that depend on the intended use? Here is a list of basic criteria to consider when making the decision:

  • Type of charts required: Gantt, Sankey, Dependency wheel.
  • Level of support for library customization. 
  • Size and characteristics of dataset
  • Browser support for library of choice: Chrome, Firefox.
  • The JavaScript framework used for the app: Angular, React, etc.
  • Intended device: desktop, mobile, or both.

And yet there is still one more very important criterion for choosing the right visualization app: are you adapting the library for use with an analytic app? For example, Sisense Analytics can be extended to integrate with any javascript visualization library using our JavaScript Add-On Framework.

Detailed documentation examples and code snippets are crucial for the quick and easy library usage. You can find both in the official Sisense marketplace and Community-Led Add-Ons. Sisense implements a wealth of expert domain knowledge in the field of data visualization to generate a ton of actionable insights on live streaming data.

packages CTA banners Product Teams A Guide to the Best Javascript Visualization Libraries

Eitan Sofer is a seasoned Sisenser, having spent the last 13 years building and shaping our core analytics product, focusing on user experience and platform engineering. Today, he runs the Embedded Analytics product line which powers thousands of customers and businesses, making them insights-driven. Eitan is also an avid music fan and surfer.

Let’s block ads! (Why?)

Blog – Sisense

Best, Guide, JavaScript, libraries, Visualization
  • Recent Posts

    • The Dynamics 365 Sales Mobile App Helps Salespeople Stay Productive From Anywhere
    • THEY CAN FIND THE GUY WHO BROKE A WINDOW BUT NOT A MURDERER?
    • TIBCO4Good and She Loves Data Offer Free Data Skills Workshops During a Time of Vulnerability
    • Aurora partners with Paccar to develop driverless trucks
    • “Without Data, Nothing” — Building Apps That Last With Data
  • Categories

  • Archives

    • January 2021
    • December 2020
    • November 2020
    • October 2020
    • September 2020
    • August 2020
    • July 2020
    • June 2020
    • May 2020
    • April 2020
    • March 2020
    • February 2020
    • January 2020
    • December 2019
    • November 2019
    • October 2019
    • September 2019
    • August 2019
    • July 2019
    • June 2019
    • May 2019
    • April 2019
    • March 2019
    • February 2019
    • January 2019
    • December 2018
    • November 2018
    • October 2018
    • September 2018
    • August 2018
    • July 2018
    • June 2018
    • May 2018
    • April 2018
    • March 2018
    • February 2018
    • January 2018
    • December 2017
    • November 2017
    • October 2017
    • September 2017
    • August 2017
    • July 2017
    • June 2017
    • May 2017
    • April 2017
    • March 2017
    • February 2017
    • January 2017
    • December 2016
    • November 2016
    • October 2016
    • September 2016
    • August 2016
    • July 2016
    • June 2016
    • May 2016
    • April 2016
    • March 2016
    • February 2016
    • January 2016
    • December 2015
    • November 2015
    • October 2015
    • September 2015
    • August 2015
    • July 2015
    • June 2015
    • May 2015
    • April 2015
    • March 2015
    • February 2015
    • January 2015
    • December 2014
    • November 2014
© 2021 Business Intelligence Info
Power BI Training | G Com Solutions Limited