The D3 package in Sencha ExtJS enables you to create interactive data visualization easily. By utilizing it, you can present the data more effectively in your web application. As a result, individuals and companies can easily uncover valuable insights. In this post, you will know the details of creating powerful data visualizations using two components: D3 Pack and D3 Hierarchy.
What is D3?
D3 allows you to bind any kind of data to the Document Object Model (DOM) and make the data interactive by applying data-driven transformation effectively. It supports a plethora of APIs. As a result, you can create and implement beautiful data visualization to your web application easily.
How can I build Interactive Data Visualization with D3 and Ext JS?
The Sencha D3 package is completely integrated with Ext JS. So, you can build interactive data visualization conveniently. Also, you can implement it with your Ext JS web application quickly. There are various component types in the D3 package. But in this tutorial, we will focus on two types of components: D3 Pack and D3 Words.
As the name suggests, this component utilizes D3’s pack layout. It enables you to visualize hierarchical data as an enclosure diagram. Here is an example:
To create the visualization shown above, you have to follow these steps:
1. First, you have to create the View using these codes: