Data Visualization Frameworks: D3.js vs. Flot vs. Highcharts by Igor Zalutsky, JavaScript Developer at Altoros

Transcription

1 Data Visualization Frameworks: D3.js vs. Flot vs. Highcharts by Igor Zalutsky, JavaScript Developer at Altoros 2013 Altoros, Any unauthorized republishing, rewriting or use of this material is prohibited. No part of this resource may be reproduced or transmitted in any form or by any means without written permission from the author.

2 Contents 1. Executive Summary Flot: a Lightweight Open-source Library with Basic Diagrams Support for various platforms Capability to work with big data Real-time visualization Visualization options (graphs, diagrams, points, etc.) General impressions Required code size Conclusions Highcharts: a Popular Proprietary Library for Drawing Diagrams Support for various platforms Capability to work with big data Real-time visualization Visualization options (graphs, diagrams, points, etc.) General impressions Required code size Conclusions D3.js: a Massive Data Visualization Framework Support for various platforms Capability to work with big data Real-time visualization Visualization options (graphs, diagrams, points, etc.) General impressions Required code size Conclusions General Conclusions About the Authors... 15

3 1. Executive Summary 3 Today s Web applications deal with massive data sets that require high-performance systems for processing and analysis. However, information becomes even more valuable, if you can efficiently visualize it. Currently, most data is presented in the form of graphs and diagrams; in case of non-standard relations between data instances, infographics are used. Most diagrams (and infographics) you can find on Web pages are static images drawn based on data taken from databases or spreadsheets. Infographics are usually manually created with specialized graphic editors. Unfortunately, this limited use of data visualization does not meet the requirements of today s Web applications, where information may be very dynamic or generated in real time. In this case, static images are of no use. There is a whole class of tasks that require high-performance visualization of data without a fixed structure for instance, in financial software, Web pages with various types of statistics, and, finally, dynamic infographics, which are, no doubt, more useful than static ones. This research compares three popular but significantly different JavaScript libraries that draw graphs and diagrams. The main criteria we used to select the libraries are as follows: Popularity: The library had to be popular and have a large number of users. Relevance: These had to be long-running projects that are being developed consistently. Performance: One of the goals was to detect performance bottlenecks that become visible in the process of drawing diagrams based on massive data sets. Various approaches to implementation: The comparison was to include libraries that use different engines, such as SVG, VML, and Canvas. After the initial stage of analysis, we selected the following three solutions that meet most of our criteria: 1. Flot, an open source jquery plug-in designed for drawing diagrams on Canvas 2. Highcharts, one of the most popular proprietary libraries 3. D3.js, a large open-source framework for data visualization Let s review them in detail.

4 2. Flot: a Lightweight Open-source Library with Basic Diagrams 4 Flot is an easy-to-use jquery plug-in designed for plotting diagrams on Canvas. Product version under consideration: 0.8 License type: MIT URL: Support for various platforms Desktop: MS Windows, OS X, Linux. Browsers: Internet Explorer 6 or later, Chrome, Safari, and Mozilla Firefox 2 or later. Mobile: There is no information on the official Web site, but the library does support Android and Chrome, at least. We have detected no performance issues, which was not surprising since Flot uses Canvas as a drawing engine. 2.2 Capability to work with big data Thanks to Canvas, there were no performance issues when the library was drawing a diagram based on a large data set. Still, the process may take up a lot of time (about one second on a MacBook Pro 2010). Throughout all this time, the Web page does not respond. There are no built-in tools for downsampling. However, Flot has an API for plug-ins, which makes it very easy to write a filter for input data that can reduce the number of points to a reasonable level suitable for visualization. 2.3 Real-time visualization The library provides no specialized solutions for real-time data visualization. At the same time, it can draw images based on massive data sets very fast. All you need to do is update your data and parameters and re-draw the diagram. 2.4 Visualization options (graphs, diagrams, points, etc.) Flot only provides several standard types of diagrams (lines, points, and columns) that can be combined together. It is possible to display axes and a grid. The library also has some interactive features, for instance, there are pop-up prompts for each point and you can select a particular range.

5 2.5 General impressions 5 In most cases, Flot can build a simple diagram fast. It also provides great performance if you optimize the data beforehand for instance, by decreasing the number of points. A significant number of points (10,000 or more) can cause a noticeable slow-down. The library is very easy to learn and has a decent amount of documentation. It can be extended with plug-ins, but in reality few ready-to-use extensions are available and most of them are designed for very specific visualization tasks. Figure 1. A sample Flot diagram: Oil prices vs. USD/EUR exchange rates 2.6 Required code size (Source: The Flot project) The required code size is minimal. All you need to do in order to build a basic diagram is enable the library, indicate a container (where your diagram will be displayed), choose the type of a diagram, and connect your data. Additional parameters increase the amount of code in proportion to the degree of customization. If you only need a standard diagram, there is no need to write anything you can simply draw it by providing several parameters

6 6 Figure 2. Flot image: an evenly distributed sequence of random digits You can create such a diagram with a single line of code: $( #flot ).plot([dataarr]); 2.7 Conclusions Flot is a lightweight and easy-to-learn library for plotting standard diagrams. Unfortunately, it neither provides increased flexibility, nor does it offer a wide selection of ready-to-use components. Nevertheless, this is a high-performance tool for visualizing small to medium amounts of data thanks to Canvas. Although it supports plug-ins, we cannot call Flot a full-fledged visualization platform. For custom visualizations, developers will have to do most things manually. The best application for this library is drawing simple diagrams. It can also be good for high-performance data visualization (with downsampling on massive data sets). 3. Highcharts: a Popular Proprietary Library for Drawing Diagrams This is one of the most well-known libraries for building diagrams that provides a very impressive selection of functions. Highcharts is not a plug-in for jquery, but it does require a DOM-library (jquery, Protorype, or MooTools) to run.

7 Product version under consideration: License type: Creative Commons for non-commercial use, proprietary for deployment in commercial projects. Cost per license: $90. Developer license prices start from $590. URL: Support for various platforms Desktop: Mozilla Firefox, Chrome, Safari, Opera, and Internet Explorer 6+ Mobile: ios (Safari) and Android 2+ Performance issues are possible on Internet Explorer 8 and earlier versions, as well as on Android 2.x, since these platforms do not provide full support for SVG. 3.2 Capability to work with big data The library has tools for automatic downsampling and point sequence optimization. As a result, there are no performance issues when working with large data sets, despite the fact that Highcharts uses SVG/VML to draw vector graphics. You can take a look at this interactive visualization of 52,000 points as an example. 3.3 Real-time visualization All types of diagrams support dynamic data updates that can also be animated. The area that contains the diagram can be adjusted to the displayed data set automatically. There is no slowdown, even if data is added frequently over a prolonged period of time. 3.4 Visualization options (graphs, diagrams, points, etc.) There are around 20 in-built diagram types, including standard diagrams (linear charts, pie charts, etc.) and more specialized varieties (for example, funnel series). Additional types of diagrams are available in Highstock, the financial version of the library. 3.5 General impressions The library is easy to use and has extensive documentation. You can also find a lot of information on the Web. Thanks to the in-built optimization, out-of-the-box Highchart provides high performance when working with massive amounts of data. It only supports standard types of diagrams, but there are a great number of them. The appearance of the diagrams can also be customized.

8 3.6 Required code size 8 The required code size is either small or medium in proportion to the number of options used for customization. All parameters are available through a high-level API and do not require that you write any functions or install any plug-ins. Figure 3. A sample Highcharts diagram: Snow depth by year (non-regular intervals) (Source: Highsoft Solutions AS) To draw this diagram, the developers used 30 lines of code that changed the configuration of the standard components. 3.7 Conclusions This is a comprehensive solution for drawing diagrams. Highcharts can address most data visualization needs, including dynamic visualization of massive data sets, without the need to write a lot of code. The possibilities of diagram customization are limited to the built-in types of diagrams and sets of options. Although this library uses SVG, it boasts high performance thanks to automatic data optimization that is performed before drawing the actual diagram. 4. D3.js: a Massive Data Visualization Framework D3.js is not a library for building business diagrams, but a modular framework for dynamic data transformations in SVG with its own DOM tools. This gives D3.js a number of pros and cons, which are explained below. Product version under consideration: 3.2 License type: MIT-like URL:

9 4.1 Support for various platforms 9 Desktop: MS Windows, OS X, Linux. Browsers: Internet Explorer 9+, Chrome, Safari, and Mozilla Firefox. Fallbacks are available for Internet Explorer. Mobile: ios, Android 3+, Windows Phone, and Blackberry Data visualization in D3.js is based on SVG rather than Canvas. This gives the solution a number of pros and cons: Pros: SVG objects are injected into DOM and can be modified through the DOM API or high-level APIs of D3. Many graphic formats can be automatically transformed to SVG. Cons: SVG is not supported on Internet Explorer < 9 and Android < 3. SVG has a considerably slower performance than Canvas. There may be issues with dynamic transformation of large data sets, especially on mobile devices. 4.2 Capability to work with big data SVG is the main performance bottleneck of this library when working with massive data sets. Though processing and drawing are performed fast, page response times increase considerably as the size of DOM grows. For instance, it will take just 5 ms to generate 10,000 two-dimensional points with evenly distributed random ordinates, but the linear diagram based on this data will be drawn in 50 ms. You will also notice a considerable slowdown in scrolling speed. If you need to draw 100,000 points, the page may stop responding. 4.3 Real-time visualization This is the main task the framework was designed for. The major issues related to real-time visualization in D3.js are management of DOM nodes and memory leaks caused by the components that are no longer needed. This issue can be resolved by means of the enter() -> exit() pipeline. Thanks to this approach, the nodes only exist between enter() and exit() and are automatically deleted, once the latter is called. 4.4 Visualization options (graphs, diagrams, points, etc.) D3.js provides almost unlimited possibilities for visualizing data in all forms imaginable. It supports all the transformations available in SVG and CSS, you can draw virtually any vector-based objects. In addition, there is a variety of templates (according to the D3 terminology, these are called Layouts ):

10 Here are some examples of diagrams created in D3.js by the author of the framework: 10 Figure 4. A cluster chart drawn in D3.js (Source: The D3 project) Figure 5. A bundle chart drawn in D3.js (Source: The D3 project) Figure 6. A pack chart drawn in D3.js (Source: The D3 project)

11 11 Figure 7. A stack chart drawn in D3.js (Source: The D3 project) Figure 8. A column chart drawn in D3.js (Source: The D3 project) Figure 9. A pie chart drawn in D3.js (Source: The D3 project)

12 12 Figure 10. IPO of technology companies a sample chart drawn in D3.js (Source: The D3 project) Figure 11. A sample circular diagram that demonstrates relations between objects drawn in D3.js (Source: The D3 project)

13 4.5 General impressions 13 This is a very comprehensive, well-developed, and powerful framework. D3.js contains a large number of tools for manipulating data of various types and its representations. In our opinion, this framework is rather difficult to use due to its unconventional approach to DOM manipulations. Nonetheless, this approach is necessary to ensure high performance. 4.6 Required code size The required code size is large, even for standard diagrams. The framework is designed to provide maximum flexibility in data visualization. The level of abstraction when working with visual representations is rather low. This makes it harder to create basic charts. On the other hand, this means, we can visualize the data in virtually any way. Figure 12. A basic linear diagram created with D3.js while preparing this research 4.7 Conclusions To build this graph, we used 65 lines (without generating data). With D3, you can visualize data virtually in any way imaginable from basic diagrams to non-standard dynamic representations. Designed to provide maximum flexibility, the framework consists of modules that simplify low-level operations with data, graphics, and animations. However, these advantages come at a cost. First, D3 draws diagrams with SVG that has limitations in performance and the maximum amount of data that can be processed. Second, D3 is rather hard to use: you will need a lot of code even for the simplest visualization tasks.

14 5. General Conclusions 14 The goal of this research was to examine the tools for visualizing data on the client side using JavaScript. This is a very topical problem since the amount of data that needs to be processed and interpreted is growing all the time. There are quite a few frameworks for data visualization available today. However, their use cases are often limited, since they are built for particular solutions. Some of them draw basic static diagrams, while others are complex modular systems able to dynamically draw any data in any form. This is why this research focused on three very different libraries: 1. Flot, a lightweight open source library with a limited selection of standard diagrams 2. Highcharts, a well-known proprietary library for building diagrams 3. D3.js, a massive open-source framework for data visualization Comparison of data visualization frameworks Flot Highcharts D3.js Product version Licence type MIT Creative Commons/Proprietary MIT-like Cost free free/$90+ free Supported browsers: Internet Explorer 6 and later 6 and later 9 and later Chrome Safari Mozilla Firefox Opera + Rendering engines Canvas SVG/VML SVG Big data capabilities Real-time visualization Amount of code Little Small to medium A lot Types of diagrams Simple Standard Complex Learning curve Easy Easy Hard Figure 13. Flot vs. Highcharts vs. D3.js If you need to build a typical diagram based on a small amount of data without going into the details of implementation, you should probably opt for Flot. This library is very easy to learn and to use. To create more complex diagrams (with interactive features, flexible settings, or containing large amounts of information), it is better to use Highcharts. This framework has a long-standing reputation as a reliable tool for data visualization supplied with excellent documentation. In case you have specific requirements to the appearance of your diagram, or you need to create nontypical visualizations, or if you have to optimize performance to fit a particular data set, the only

15 solution that can help you is D3. This framework is designed for developers (and is rather difficult to learn). Still, it provides full control not only over the visual representations, but also over the process of data transformation. This is why D3 is not just another library for drawing diagrams, but a set of tools for visualizing anything and in any form. Each of the libraries under consideration has its advantages and it is hard to say which one of them is the best. All we can do is make a conclusion about how reasonable it would be to use each of them for particular use cases. 6. About the Authors Igor Zalutsky is a JavaScript developer with 4 years of experience in building rich client-side Web applications on top of MVC frameworks, such as Backbone, Spine, etc. Being interested in Node.js and functional programming, Igor is passionate about exploring visualization tools and methodologies. Most recently, he gave a session on his findings about Grunt.js at one of the conferences for front-end developers. Altoros provides big data expertise and Platform-as-a-Service enablement to software vendors, IaaS providers, and information-heavy enterprises. Headquartered in Silicon Valley (Sunnyvale, California), Altoros is a 250+ employee team across 8 locations (California, Massachusetts, Norway, Denmark, UK, Switzerland, Argentina, and Eastern Europe). The company has a proven track record serving technology leaders, such as RightScale, Couchbase, NuoDB, Joyent, Cisco, and other businesses across various industries. For more, please visit. 15