11/29/2019 04:51:00 pm
D3.js Library Overview, Best D3.js Use Cases — XenonStack
What is D3.js?
D3.js stands for Data-Driven Documents is a front-end visualization library in javascript for creating interactive and dynamic web-based data visualizations, it also has an active community behind it for which it is very famous. It uses HTML, CSS a, and SVG to bring data to life and mainly it is for manipulating DOM objects, focusing on objects and concepts, not just the pre-built charts and graphs. It is mostly compatible with popular web browsers, like Chrome or Firefox.
It can even create different shapes arcs, lines, arcs, rectangles, and points. The essential feature of d3.js that it provides the beautiful fully customized visualizations. It is a suite of small modules for data visualization and analysis. These modules work well together, but we should pick and choose the parts that we only need. D3's most complex concept is selections and if we are using a virtual DOM framework like React (and don’t need transitions), so don’t need selections at all.
A basic Introduction how to use d3.js?
So, we need to create a visualization with d3, set up workspace inside a container, create x and y-axes, process data and draw graphs and charts using functions. We can also add different attributes and styles for datapoints or lines. When creating basic charts and graphs, D3 is not complicated, for customization need to add more code. More complex visualizations need lots of logic, layouts, and data formatting as these are the keys that we want our visualization to speak for.
D3 also can be paired with a WebGL library, which makes more standard capabilities regarding dynamic and interactiveness. We can even animate one element, based on transitions similar to those done in CSS.
Why we use D3.js?
Today different kind of charting libraries and BI tools are available for creating visualizations, so the question arises why to use d3.js for creating visualizations, because of its key features versatility, full customization, and interactive visualization, even the exactly the data visualization that can be made by graphic designers.
Data visualization is very hard then we think. It is easy to draw shapes, but sometimes visualizations require full customization such as a need to bring subtle ticks and different smooth curves between data points. That is where d3.js comes in that allows us to explore the design space quickly. It is also not only a charting library but acts as a versatile coding environment that can be best used for making complex visualizations.
When to use D3.js?
As d3.js becomes complicated sometimes, programming in d3 should
be done from scratch and requires a steep learning curve, but due to its significant advantages, we need to use it and get to decide when to use that library. We should use D3.js when our web application is interacting with data. We can explore D3.js for its graphing capabilities and make it more usable. It can be added to the front end of our web application as the backend server will generate the data and front-end part of the application where the user interacts with data use D3.js.
Some of the use cases of D3.js
We above discussed about data visualization basics, d3.js front-end visualization library concepts, where and when to approach d3.js library, now go through some of the use cases of d3 as d3 with complex code also provide reusable code that can be used again in other visualizations, d3 also can be used to react, storytelling with customized and visualizations the most crucial use case can also be achieved with d3. Some of the use cases of the d3 library are discussed below:
Reusable charts with D3.js
During creating visualizations, we also need to take care of reusability of the charts or anything that made in visualization. Let’s discuss how D3.js library provide the reusable charts, and firstly we should know what can be a reusable chart, some of the characteristics that a reusable chart has -
Built charts in an independent way -
We need to make all chart elements associated with data points of the dataset independently. This has to do with the way D3 associates data instances with DOM elements.
- Repeatable — Instantiate the chart more than one time, as chart visualizing chart with different datasets.
- Modifiable — Source code of charts can be easily be refactored by other developers according to different needs.
Configurable
We need to modify only the appearance and behavior of the graph without changing the code.
Some of the best practices to make reusable charts with d3.js
Built charts in an independent way
To make the chart reusable with d3.js, it should be repeatable, modifiable, configurable and extensible.
To make chart repeatable in d3.js we can use the object-oriented property and approach chart.prototype.render and also use this property during a call the functions.
To make the modifiable chart make source code with simple transformations with d3.js built-in functions, so that path to modification in the system becomes clear and easy to be modified by the other developers.
Easy modification path can be achieved by using various selection functions .enter(), .exit() and .transition().
enter() selection — When a dataset contains more items than the DOM elements, data items stored in entering the selection.
For example -
We need to make some modification to our dataset. We add one more data item to the array, as our bar chart contains still only four bars of data, that time choose data element from entering the selection.
A room visualization, with several chairs that are DOM elements and guests that are data items, sit on the chairs which are data joined with DOM elements. The enter selection in the waiting area for data items that enter the room but cannot be seated, as there are not enough chairs. As to arrange more chairs, where to create new bar div and add it to DOM is what done by d3 selector enter.
exit() selection — As we discuss how we could add new items to a data set dynamically and update the visualization. In the same way, we can remove items from the data set and allow D3 deal with the corresponding DOM elements or, following our room/chair method, take away those chairs that are not needed anymore because some guests decided to leave. The exit selection does this. It contains only those data items that are about to leave the data set.
Configurable -
Consider the visualization of the bubble chart, to make it reusable, only the size of the chart and input dataset needs to be customized.
Define Size of the chart
1 var bubbleChart = function () { 2 var width = 500, 3 height = 500; 4 function bubblechart(select){ 5 } 6 return chart; 7 }
We want to create charts of different sizes without the need to change the code. Create the charts as follows
1 bubble.html 1 var chart = bubbleChart().width(500).height(500);
Now we will define accessors for the width and height variables in the bubble_chart.js file -
1 // bubble_chart.js 2 var bubbleChart = function () { 3 var width = 500 4 height = 500; 5 function chart(select){ 6 } 7 chart.width = function(val) { 8 if (!argu.len) { return width; } 9 width = val; 10 return chart; 11 } 12 chart.height = function(val) { 13 if (!argu.len) { return height; } 14 height = val; 15 return chart; 16 } 17 return chart; 18 }
Role of Data Visualization in D3.js
Over the last few years, data visualization growing more and more in a day to day experience. We see data visualization daily in our social media, news articles and every day at work. Data visualization is that it translates quantitative data into graphic representations using libraries i.e D3.js Library. Data visualization includes tasks of designing, creating and deploying is not just a single profession at all but shows a combination of work of designers, analysts, engineers, and journalists. As for data visualization tasks engineers use different javascript libraries, and analysts use various business intelligence tools.
Nowadays we able to collect and analyze more and more data than ever before. Big data is a hot topic even now and a major to study. But to be able to understand and digest all these kind of numbers, we need visualization and a platform or framework that makes all kinds of visualizations possible, no matter how much data there is need to process, that’s where d3.js and other visualizations tools come in.
Only plotting the charts with visualization libraries and tools is not enough; we need storytelling art here also. As most of the libraries and tools exist here not provides the effective display of quantitative information, where D3.js most successful library comes in that already tells half of the story when we start developing the code for it.
Data Visualization using D3.js with React
As D3 enter, exit and update pattern provides full control to the developer for managing the DOM. We can manage when should element is added to the screen and when it is removed and how to update the element. It is working fine when the updates of data elements are simple, but it gets complex when there exists a lot of data elements to keep track of, and the data elements to update vary from one user action to another. One solution to manage the DOM data elements is manually counted which elements require updates, but it also becomes complex we could not keep the count in our heads, as that is manually defining the DOM tree which is not recommended, so there is need to integrate react and D3 together for complex visualizations.
As react that updates virtual DOM are exactly like D3 enter, exit and update pattern. So let’s use d3 with react, react for what to enter and exit operations and d3 for update patterns. Discuss react with d3 implementation in a few steps -
Enter and Exit pattern with React
React follows the concept of dynamic children (reuse code between components and inheritance) that is similar to D3 data binding property. It allows passing in a key per children to track order of children as like vital function pass into d3.data and uses that to calculate what should be added and removed when data changes.
Consider the example here as we need to render two rectangles, and a text element with D3, code for it in D3 looks like below -
1 var graph = d3.select('svg').append('g') 2 .class('graph', true); 3 var expenses_graph = graph.selectAll('g.expense'); 4 var enter_ele = expenses_graph 5 .data(expensesData, (expense_graph) => expense_graph.id) 6 .enter().append('g') 7 .class('expense_graph', true); 8 enter_ele.append('rect') 9 .class('expenseRect', true); 10 enter_ele.append('text'); 11 expenses.exit().remove();
Now, integrate the d3 code with react components, that is like -
1 class ExpenseComponent extends React.Component { 2 render() { 3 return ( 4 ); 5 } 6 } 7 class GraphComponent extends React.Component { 8 render() { 9 var expenses_graph = expensesData && expensesData.map((expense) => { 10 return (); 11 }); 12 return ( 13 {expenses_graph} 14 ); 15 }
Firstly when we see the react code, it looks complicated, but it also provides some great things such as -
It allows us to make components for elements, so it becomes easier to reuse code, that kind of reusability code also done in old D3 code, but react makes it explicit.
It allows us to keep track of what components looks like and reflect the structure of the DOM.
Another thing that can be achieved with it is we do not need to think about entering and exiting again. When we show and hide parts of component depend on data, with react will only draw only the elements that we need, when we need it accordingly in a straight manner, the below code in react will show -
1 class ExpComponent extends React.Component { 2 render() { 3 return ( 4 {this.props.data.name && ()} 5 {this.props.data.name && ()} 6 ); 7 } 8 }
Updating and transitioning with D3
With entering and exit selections we have a structure of the components, need to fill in the attributes.D3 also manage to update the attributes.In React component, call the enter code from component(), and update code from update(). In this way, as soon as the elements are inserted into the DOM, we can use D3 to set the starting attributes, when data changes, we will use D3 transition patterns the element to next set of attributes. We should also keep in mind whatever the react keep tracking of d3 cannot manipulate it.
So the update and transition pattern help to keep make ownership between these two, where React manages the structure and D3 helps in maintains the attributes. In that way, D3 will transition elements update its positions, its fill color and update its size all things without conflicting with react workflow.
Storytelling with d3.js interactive visualizations
We will discuss the d3.js library, its features, why we need it and reusability. As we need to keep in mind the target audience when made any visualization, because our task is not only to rendered visualization, but it should be fully explainable, our approached audience can understand it wisely, so how the audience can understand it, that can be only achieved with storytelling. D3.js interactive and beautiful visualizations help in the fantastic narration of data. Let’s discuss the chord diagrams complex visualization in a different interactive way and see how it helps in storytelling -
Consider the problem here, as all people in India are using phones, many will switch to a new phone after some time, a question arises how do users change and how this differs per brand, these kinds of different problems can be answered by visualizing the dataset by using chord diagrams visualization in d3.js.
The below chord diagram shows the relationship in terms of switching behavior between different phone brands. The circle is divided into eight brands — the arc length of every group shows brand market share. The outer side rim of the chord diagram shows a percentage per brand. It indicates that Samsung shares 38%, Apple on second with share 19% and Nokia on third with a 16% share. The chords are directed in a diagram as 8.7% of users who now have Samsung, used to have Nokia, only 1.2% opposite. The chords placed between the arcs visualizes users switching behavior between all brands in both directions.
For example, the blue chord that connecting Samsung and Nokia in the left section shows the users that moved from Samsung to Nokia and from Nokia to Samsung. The visualization shows that Nokia lost its share to Samsung, as 8.7% of all users that used Nokia now own Samsung.
Insights from a mobile consumer survey chord diagram visualization
When we made the customized visualization visualizing the flow of brands, come to more conclusions and insights that are discussed below -
- Both Apple and Samsung brands are capturing users from Nokia and Other Brands.
- Only a few users losing by Apple, the number of users gained is twice the number of users lost.
- HTC brand is acquiring users from Nokia, LG brand and losing users to Samsung and Huawei brand.
- Nokia brand acquiring more users than it loses the users.
Approaches to Data Visualization
Data visualization helps users to translate quantitative data into graphic representations using leading Data Visualization Techniques. To know more about Data Visualization we recommend taking the following steps -
- Overview and Importance of ” Data Visualization “
- Understanding How ” 3D Data Visualization “Works
- Learn more about XenonStack “ Data Visualization “Solutions
