Bind and visualize data

The bind and visualize of large amounts of data and complex structures is becoming increasingly important, especially in companies. This increases the need to integrate them into web applications in order to present them to partners or customers in an uncomplicated way. D3 is a powerful JavaScript library that can help developers do just that. The following tutorial shows how to get started quickly.

D3 is one of the most powerful of the variety of currently available JavaScript libraries for data visualization. Already the D3 Gallery reveals that from simple data tables over elaborately styled and animated charts up to highly complex and also interactive diagrams seemingly only the abilities of the developer limits are set. Not least the fact that the library is released under the BSD license makes a closer look at this library very worthwhile.

Data-Driven Documents

D3 stands for “Data-Driven Documents” and has been published, extended and optimized by Mike Bostock since 2011 as an open-source data visualization library on Github . The library allows the manipulation of the DOM of HTML documents based on records. For this it uses the possibilities of modern browsers like Chrome, Safari, Firefox, Opera or IE9 + as well as the current web standards CSS3, HTML5 and SVG.

If older browsers also have to be supported, the counterpart R2D3 is more appropriate . This is an adapted D3, which is able to run until IE7 due to the combination with the library Raphaël. However, here are the development cycles much longer and far behind the current D3 version, which is why a use is not really recommended. In the development of D3 special emphasis is placed on maximum flexibility. High performance in the processing of large amounts of data and the possibility of dynamic manipulation of animations and interactions are further features of the framework.
In addition to the core, this consists of the components Scales, SVG, Time, Layouts, Geography, Geometry and Behaviors. Core features include features for selecting DOM elements, creating animations, processing data, and manipulating colors. The names of the other components already indicate their functions. A detailed explanation can be found in the D3 API reference . In addition, you can extend the functionality as with jQuery plugins, the integrated possibilities should not be enough. Another similarity to jQuery is the practical chaining, that is, the concatenation of functions.

The entry in D3

Based on a simple example, based on Swizec Tellers “Data Visualization with D3.js” , the basics of D3 can be understood. The data base should be the t3n facts published under the t3n media data. The goal is to compare the current ranges of the various t3n channels as a visualization in a bar chart. You can try and see many examples by visiting this link D3JS Tuts

Conclusion

In addition to classical diagram types such as bar graphs or bar charts, more complex types such as treemaps or chord diagrams can also be realized with D3. If you are looking for a tool to quickly integrate a few charts on a website, D3 would not be the right tool of choice due to its complexity and its granular control options. Also, the time required for the training is not to be underestimated. But once you’ve decided on D3, you have a powerful tool for visualizing data at your disposal.