Top JS Data Visualization Libraries for Small Business and Startups
Regardless of the company size and industry, keeping track of business performance is vital at any stage of a project, especially if your business is just taking off.
This is where analytics always comes in handy. To be precise — embedded analytics. Its benefits are well-known: it provides end-users with insights within an application and helps to iteratively improve the product thanks to collecting and returning these insights to the development team.
There are many ways you can approach acquiring such a platform inside your application.
One way is to buy embedded analytics with out-of-the-box features. But rather than purchasing a ready-to-use product from a vendor, you can build your business intelligence solution in-house. This way you can take full control over the final product and make sure it matches the specific requirements of your project. But you should bear in mind that investing in internal development resources is thereby unavoidable.
Requirements for embedded analytics
- Smooth learning curve.
- Configuring shouldn’t be complicated.
- Ability to manipulate visualization interactively in a real-time manner.
- Flexibility — the ability to meet Agile requirements.
- No less important is the support of CSV and JSON data sources, since these are the most popular ones.
- Customization of the look and feel should be easy.
- Ability to export the visualized data.
Besides, it must fit end-users without much technical background and empower decision-makers with functionality for performing complex analysis in minutes.
Embedded analytics structure
As a rule, an embedded analytics solution is composed of individual parts working together under a shared goal. These elements can be charts, graphs, maps, data and pivot tables, control widgets, and many others.
Challenges
Given that the budget limitation is a common constraint for all aspiring entrepreneurs, searching for libraries to build these components can be complicated.
So, how to keep the costs of embedded analytics development to a minimum and the results to a maximum?
One way is to take advantage of multiple JavaScript libraries available on the market. And whilst enterprise solutions are often too costly, free data visualization libraries are a strong choice.
To prevent you from becoming overwhelmed by the myriad of tools, let me guide you through the most easy-to-use and powerful ones.
Note that these libraries do not present a ready-to-use solution. Instead, these are instrumental in accomplishing the task of building a custom embedded analytics solution from scratch.
Data visualization libraries to check in 2019:
Charts:
Pivot tables:
Maps:
Charts
Plotly
Plotly is one of the hottest libraries for data scientists, statisticians, and Python programmers. It’s loved for a broad spectrum of interactive and eye-catching visualizations that can enrich any data analysis project.
The creators of Plotly took care not only of Python developers but also JavaScript developers. There is a JavaScript version you can benefit from — Plotly.js. Using a declarative JSON data structure, you can specify figures and plots on your web page.
Under the hood, the library is based on two major technologies of data visualization — D3.js and WebGL. Both perform valuable work: WebGL ensures high performance when it comes to rendering thousands or millions of data points and D3.js is responsible chiefly for high-quality exporting of vector images.
Chart types
It offers six main categories of charts: basic, statistical, scientific, financial, 3D charts, and maps. With such classification, it’s easy to navigate the documentation and find the information you need.
I’d like to bring statistical charts to the attention — these are exceptionally handy for statisticians and data scientists.
Working with data
Plotly.js accepts JSON and CSV data sources. But to load the CSV file, you need to use Plotly.d3.cdvto read the data from an AJAX call.
Customization
You are free to tailor charts by adding custom controls, events, dynamic behavior via animations, transformations (e.g., filtering and grouping) as well as changing styles and the layout of elements, etc.
Moreover, you can represent the data not only in 2D but also in 3D and 4D charts. Try rotating 3D plots around a fixed point or its middle point — it’s entertaining and shows your data from multiple sides. To focus on a certain area of the chart, you can select it and take a closer look.
Saving results is easy — simply download a plot as a png file.
Another advantage is that the product is free and open-source, meaning that the core technologies behind the Plotly.js are available to the community of developers. Such a model of distribution noticeably facilitates the evolution of the product. Plus, you can use it in any project without any limitations.
Integrations
Other versions of the same product are Plotly Matlab, Plotly R, and Plotly Python.
You can use Plotly with React, Angular, and Vue.
Learn more
To know how to configure any chart, try a cheat sheet with code. To learn how to create your first plot with Plotly.js, check this guide.
Google Charts
Google Charts is the world-famous charting service that provides the Google Visualization API for creating top-notch charts on the web. Its main features that distinguish the service from the rest are cross-browser compatibility, free license model, and rich diversity of charts.
Chart types
Chart types include basic charts: area, bar, bubble, column, combo, pie, donut, scatter, stepped area, waterfall, charts, statistical charts: histograms, trendlines, candlestick charts, intervals, charts for tracking performance: Gantt, gauge charts, charts for visualizing geospatial data: map charts and geocharts. Other types of visualization you may be interested in:
- Word trees for visualizing sequences of text data.
- Treemaps for depicting hierarchical data.
- Tables for displaying data on a grid.
In the gallery, you can find lots of ready-to-use code examples. I encourage you to try embedding visualizations in your app to liven up the analytics.
Working with data
Every chart accepts the data in a different format and you need to process your raw data before sending it to charts. Internally, the underlying data is represented as a two-dimensional table of values which is implemented in the DataTable and DataView classes. This type of data representation should be familiar to you if you ever worked with relational databases or Excel spreadsheets.
You can connect to various data sources (e.g., CSV, Spreadsheets, Google Fusion Tables, Salesforce, etc) via the Datasource web service.
One more way to load your data to charts is by using the Google Visualization API Query language — a special SQL-like syntax that helps to retrieve data from the data source with a required structure.
Customization
The customization process is smooth — everything can be configured via options before you render charts. To make charts interactive, you can add animations, event handlers, toolbars, tooltips, and overlay areas. There are also ways to organize all the widgets on the dashboard.
Certain core chart types can be restyled according to principles of material design. Note that since Material Charts require SVG, they won’t work in IE8 and earlier versions of Internet Explorer.
Integrations
Integrations with frameworks are available through 3rd party wrappers for React, Angular, and Vue.
In general, Google Charts provides excellent functionality to visualize your data on the website. But the main disadvantage is that you can’t use charts without an internet connection since the data visualization library must be loaded dynamically before you use it.
Vega
Vega is a high-level visualization grammar that enables generating web-based charts using SVG or Canvas. The visualizations are defined with the help of a JSON format. There are various ways to deploy Vega: by importing JS scripts, installing the Vega-Embed module, using the Vega View API or Node.js
Customization
The syntax gives the freedom to transform the data the way you want: set query expressions for filtering and multiple configurations.
Besides, every aspect of a chart can be customized: axes, symbol and gradient legends, etc.
Working with data
Vega accepts tabular data. You can load JSON, CSV, TSV, DSV, TopoJSON files by specifying the source URL or defining the data directly in the configuration.
Chart types
Charts are divided into the following categories:
- Bar charts
- Line & area charts
- Circular charts
- Dot & scatter plots
- Distributions
- Geographic maps
- Tree diagrams
- Network diagrams
- Other types: heatmaps, word clouds, timelines, etc.
There are plenty of examples that will help you get started. The full code is given under each visualization. You can also become inspired by custom visual designs and discover new data visualization techniques.
There are extra features, too: you can stream data updates, export static images, or debug with the Vega View API.
Integrations
Vega is compatible with all ES6-compliant JS runtimes. Here is how you can convert Vega specifications into React classes or use it with Angular.
If you need to visualize Elasticsearch data, you can reap the benefits of Vega as well — it’s available as one of the visualization types of Kibana (currently in an experimental mode).
amCharts
amCharts is a data visualization software that offers a broad variety of charts and maps. You can install it via npm, yarn, and CDN.
Note that your browser has to support SVG technology (which all modern browsers do).
Chart types
A broad list of chart types is worth your attention: you can try all kinds of charts to visualize your data — column, line, bar, radial line, chord, bubble, pie graphs, force-directed trees, Gantt, area charts and a lot of others.
On the documentation, every chart type is covered with information about its purposes, required data structure and the specifics of creation.
Customization
This library is flexible and configurable — you can set a lot of options to make the charts fit the look and feel of your app.
To my mind, in terms of visual aesthetics and interactivity, these charts are best-of-class.
Integrations
It can be used with any JavaScript-compatible environments — React, Angular, TypeScript and vanilla JS apps. Other supported frameworks and module bundlers are Ember, webpack, Cordova, and RequireJS.
Plus, since the 4th version is written in TypeScript, it’s handy to use the library with Angular2+ projects or any ES6 apps.
Pivot Tables
WebDataRocks
WebDataRocks Pivot Table is a reporting web component written in JavaScript and compatible with multiple client-side frameworks and server-side technologies.
It serves for organizing data on the grid and deriving insights from aggregated data.
Being lightweight, it speeds up reporting in any app. Its web deployment is straightforward and requires a minimum of code.
Its strongest features and functionalities you should pay attention to when considering this tool for web reporting are the following:
- Intuitive browser-based UI.
- Rapid summarization of the raw data by aggregation functions.
- Filtering.
- Easy reports creating via the drag-and-drop gesture.
- Saving reports in the JSON format.
- Exporting reports in various formats to the server or locally.
All these characteristics make reporting a time-saving process. The resulting reports can be accessed from any device and platform.
Working with data
You can connect to local or remote JSON and CSV data sources via the UI or API.
Customization
If you want to restyle the component, you can apply themes (or create custom ones), highlight or change individual cells, and redefine the appearance of the toolbar (completely or partially).
Integrations
There are React, Angular, AngularJS, jQuery integration guides that will set you on the right path.
This pivot table fits both developers and non-technical users. While developers can benefit from the ease of integration, the end-users are provided with a solution for making data-driven decisions based on summarized reports. Besides, it’s possible to work with the component interactively and take a look at your data from different viewpoints.
Moreover, you can use it as a component of the embedded BI at no cost.
react-pivottable
react-pivottable is a React-based pivot table component that offers functionality for fast data summarizing via dragging and dropping. Installing is easy — you can walk through this GitHub guide on getting started.
Unlike the basic version, you can easily combine this pivot table with Plotly charts. It’s comfy to switch between table and chart views.
Working with data
You can load CSV files and JSON data to the pivot table.
Customization
Since it’s an open-source product, you can contribute to its development and extend it with more powerful features.
All in all, it’s a great choice for pivoting data, especially if you are a React developer.
Maps
Leaflet
Leaflet is a JavaScript library for displaying geographical data on maps. With it, you can create a visually appealing map of any area you want.
Creating maps is not hard at all — with step-by-step tutorials, you’ll quickly learn about all the basic capabilities of the library. All you need to get started is to include CSS files, scripts, and render the containers for maps.
Customization
You can add markers, circles, pop-ups, polygons, and events to your maps.
To dive deeper into advanced features, you can learn more about its API and customize the maps according to your taste.
Integrations
There are third-party packages for integrating with Angular, AngularJS, React, and Vue.
You can use Leaflet for creating exciting data stories. To get the feel of the ways to use this library, check out the examples of creating maps in web apps, services, and news.
OpenLayers
OpenLayers is a JavaScript library for building dynamic maps on the web.
A few words about the map’s structure. Each map consists of layers, a view for visualizing, interactions for editing the map’s content, and UI controls.
Working with data
You can load GeoJSON data into the maps.
Customization
OpenLayers is designed with flexibility in mind: you can style controls with CSS, use 3rd party libraries to customize or extend its functionality, and more.
With its API, you can define interactions and sources for each layer, show map tiles, vector data or markers.
Integrations
You can find wrappers of OpenLayers to React, Vue, and Angular.
These are useful tutorials that will guide you through all the fundamentals of working with the library:
- Introduction
- Basic concepts
- Check out the numerous examples of ready-to-use maps.
- To make the map look realistic, see how to preload tiles with satellite images.
A range of applications is wide — the library can be used by journalists and everyone who needs to represent geographical data.
Google Maps API
The Maps JavaScript API provided by Google Maps is a standard of web services for building maps inside web applications.
The entire process of configuring is simple: to embed a map on the page you need to add a container to hold the map, define a function that renders the map and load the Maps JavaScript API. Note that it’s necessary to declare your app as HTML5 and specify API key to send requests to the API.
You can make use of four basic map types: roadmap, terrain, satellite, and hybrid.
Working with data
You can load geospatial data from local and remote sources. This can be done via the Google Maps Data layer.
Integrations
You can use React and Angular components for Google Maps.
The library is adopted by multiple platforms: car riding, hotel bookings, retail shopping, logistics, fitness, and other services.
You can also empower your app with reliable and highly performant maps. Simply follow these guidelines.
It should be noted that the pricing models depend on your monthly usage of the API. However, if the number of queries you send doesn’t exceed a certain amount, you can use Google Maps for free.
Simple BI dashboard examples
Here are several demos to help you develop an understanding of how these libraries can be combined:
Key takeaways
Today we:
- identified the core challenges entrepreneurs and developers may face when building embedded analytics.
- presented a detailed overview of free JavaScript libraries that are aimed at the small business segment and tackle diverse data visualization tasks.
Rather than reinventing the wheel and implementing custom visualization components, you can use the above-listed libraries to build embedded analytics.
The resulting solution has all the chances to increase the productivity of all the employees involved in the data analysis process.
As a bonus, you’ll save resources for getting your project off the ground.
More libraries
Of course, I’ve scratched only the surface of the existing tools. This list can be supplemented with other first-rate libraries. You are free to mention them in the comments.
Thanks for reading!
📝 Read this story later in Journal.
👩💻 Wake up every Sunday morning to the week’s most noteworthy stories in Tech waiting in your inbox. Read the Noteworthy in Tech newsletter.