D3: What is Data-Driven Documents?
What is D3?
In the information age we live in today, it’s really important for people to quickly grasp the essence of the data we deal with at a glance, and charts are a great way to visualize it. Taking into account libraries such as Data-Driven Documents (D3) is extremely important for the development of the last instance of data processing: its visualization.
Therefore, knowing how the data works in this last instance is essential for the current world of Big Data.
D3.js, is a Javascript library that treats documents based on data, it is a tool that allows you to visualize data on a web page in a really easy way. Data-Driven Documents (D3 or D3.js) is a library specialized in the drawing and design of graphs in data visualization.
But, it is not only a library that allows us to make visualizations but also allows us to carry out any type of mapping, mathematical operations, or data analysis. Also in charge of carrying out dynamic and interactive web development, allowing all kinds of visualizations and interaction with them.
The learning curve can be quite ascending, but once we have learned it, it is a tool with which to develop advanced data visualizations, in a very simple way.
In addition, if we access its web page, we can see and learn a long list of different visualizations, some more and others less dynamic.
Past, present, and future of D3
Data-Driven Documents is an open-source project that started 11 years ago, in 2011, after a decade on the market, D3 is currently the most popular tool.
This means that it is very unlikely that it will be replaced in the short term, due to its stability and that it is fully tested, guaranteeing that it is “bug-free”, and as of today, it only has 3 open issues, not like other libraries of this same guy who have hundreds of unresolved issues.
The library is actively maintained, this implies that the idea is to continue in the long term with new developments and updates, such as new versions of Javascript, and being able to use it with React, Vue, or Angular.
What data formats can we find in D3?
Thanks to this visual design library, you will be able to work with four different data formats, each of them with its advantages and disadvantages. Some are simpler than others, but in turn, this variety of formats allows us to save time since we do not have to transform them.
CSV
Its distribution is based on showing the fields above and, from there, organizing the processed data.
JSON
One of the most common formats. Its registration begins by designating the field and its operation is to select the file and the D3 returns a promise, that is, what the data collection.
TSV (Tab-Separated Values)
This data format is not widely used, but it works simply, as its name indicates, it exposes the values separated by tabs.
XML
One of the most complicated formats. Although it is based on HTML, its development is much more extensive and detailed than the others.
How to start using D3?
Starting to use the Javascript D3 library in a basic way is not a very complicated task since we have many examples and documentation that show us what code we should use to make the graphics.
But before starting to use it, it is advisable to know a minimum about web design since the tool makes use of technologies such as SVG (vector graphics), HTML5, and CSS, that is, to start using this tool, we must know how to the Document Object Model (DOM) works.
What tools does D3 offer?
Data-Driven Documents (D3) has a wide variety of tools that enhance the development of data visualization and that, in addition, allow optimal development from different aspects.
Next, we analyze some of the most important tools of D3 to carry out our visual design:
SVG (Scalable Vector Graphics)
It consists of designating the data under two dimensions (width and length). Its function is to establish the data entered in some vectors according to their properties.
Scale
With this tool, we can generate a reliable analysis of the data in the visualization. It consists of the realization of the graphs according to the scale that is established and not to real size.
Axes and margins
A fundamental factor for the development of a graphic schematization of the data. As a general rule, two axes are usually found in a graph, the vertical and horizontal (X and Y), and the establishment of some margins through the ruler or grid of the platform will designate the size of the graph.
Animation and interactivity
This tool refers to the dynamism that you decide to attribute to the data visualization. The platforms that take care of it offer various options to add things, such as color, shape, fill, curve, etc.
What is the modular configuration in D3?
As we have seen during the article, D3 is a fairly heavy library since it has many dependencies, so starting with version 4.0, they introduced one of the most important changes to the library, its modularity.
D3 became a collection of modules, allowing each module to be used completely independently, except for minimal dependencies on other modules.
The advantages of this new model are clear, this update encourages the development of smaller modules, allowing the community to contribute many new visualizations, plugins, and functionalities that did not exist before. Being in turn easier for the community to contribute to the main functions or other levels of abstraction.
Do we recommend the use of D3?
Increasingly, the D3 community is sharing code architecture and all kinds of modules in Data-Driven Documents, so we can say that D3 can provide our company with a very important diversity of graphics libraries and complements to the existing ones.
Therefore, if our company needs to create simple or more complicated graphics, it can be expensive to learn how to use D3, but if we want total freedom when it comes to visualization and interaction, Data-Driven Documents is the best option.