Easily Build Powerful Interactive Data Visualizations Using D3 And JavaScript
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 (Data Driven Components) is an open-source JavaScript library. It enables you to create interactive data visualizations in web browsers using SVG, HTML5, and CSS. 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. D3 Pack 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: Ext.define(‘KitchenSink.view.d3.Pack’, { extend: ‘Ext.panel.Panel’, xtype: ‘d3-view-pack’, controller: ‘pack’, requires: [ ‘KitchenSink.view.d3.TreeViewModel’, ‘Ext.d3.hierarchy.Pack’ ], width: 930, height: 900, layout: ‘fit’, viewModel: { type: ‘tree’ }, items: { xtype: ‘d3-pack’, padding: 20, bind: { store: ‘{store}’ }, tooltip: { renderer: ‘onTooltip’ } } }); Here, you are defining the height and width of the visualization. Also, you are binding the data to store. 2. Next, you have to create the Controller. Simply add these codes:Ext.define(‘KitchenSink.view.d3.PackController’, { extend: ‘Ext.app.ViewController’, alias: ‘controller.pack’, requires: [ ‘Ext.util.Format’ ], onTooltip: function (component, tooltip, node, element, event) { var size = node.get(‘size’), n = node.childNodes.length; if (size) { tooltip.setHtml(Ext.util.Format.fileSize(size)); } else { tooltip.setHtml(n + ‘ file’ + (n === 1 ? ” : ‘s’) + ‘ inside.’); } } }); Here, you are defining the function for specifying the size of the nodes. You can find the demo here. D3 Words With the D3 Words component, you can visualize the frequently used words through a customized word cloud where a parent circles contain the child ones. Here is an example: The visualization reveals the most used words of a novel, called “Treasure Island.” You can create it quickly by simply following these steps: 1. Create the View with these codes: Ext.define(‘KitchenSink.view.d3.Words’, { extend: ‘Ext.panel.Panel’, xtype: ‘d3-view-words’, controller: ‘words’, requires: [ ‘KitchenSink.view.d3.TreeViewModel’, ‘Ext.d3.hierarchy.Pack’ ], width: 930, height: 900, layout: ‘fit’, title: ‘”Treasure Island”‘s most used words’, items: { xtype: ‘d3-pack’, reference: ‘pack’, padding: 0, nodeText: ‘word’, nodeValue: function (node) { // Instead of using `nodeValue: ‘count’` as a config, // take a qubic root of the ‘count’ to downplay // differences in the relative size of nodes. return Math.pow(node.data.count, 1/3); }, colorAxis: { // For this example, we want all nodes to have […]
