How To Build Powerful Data Visualizations Using D3 In JavaScript
D3 is a powerful JavaScript library for creating amazing data visualizations. It helps you to visualize the data on the web easily using HTML tables or SVG. On the other hand, Ext JS is a JavaScript framework for building interactive cross-platform applications. By using D3 with the Ext JS apps, you can build powerful data visualizations, helping organizations and individuals uncover valuable insights effectively. In this article, you will find all the details.
What is D3?
D3 stands for Data-Driven Documents. It is an open-source JavaScript library for producing dynamic, readable, and interactive data visualizations in web browsers. It utilizes modern web standards, including SVG, HTML, and CSS.
D3 can bind any arbitrary data to Document Object Model (DOM) and apply data transformation. For example, it can generate an HTML table from an array of numbers. It can use the same data to produce an interactive SVG bar chart.
D3 enables you to present information in a visually appealing way. Also, it gives you full control over the data selection process.
Why should you use D3 for data visualization?
- You should use D3 because it helps you to build any kind of visualization that you want easily. It’s a tool that enables you to present the numbers in a readable form. Also, it helps you to generate reports easily, make comparisons effectively, and understand the pattern deeply.
- D3 is a JavaScript library, which utilizes a functional style. So, you can reuse codes and add specific functions easily. As a result, you can create powerful data visualizations conveniently.
- D3 helps you to create memorable presentations with amazing data visualization. If you are working at a startup, you can convince investors effectively by using properly transformed data that uncover valuable insights.
How to Build Powerful Data Visualizations with D3 and Ext JS
D3 can be easily integrated with Ext JS apps to produce amazing data visualizations. It supports different component types, including Hierarchical Components, Heatmap Components, and Custom Components. In this post, you will find the details of integrating the “Sunburst” and “Zoomable Sunburst” components, which fall under “Hierarchical Components,” in the Ext JS apps.
Sunburst
The D3 sunburst component provides a dynamically compelling rendering of hierarchical data. It visualizes tree nodes as concentric wedge sectors, with the root circle in the center. It opens outward for every level of depth in the hierarchy.
To produce the visualization shown above, you have to create the Model by using the following codes:
Ext.define('KitchenSink.model.Tree', {
extend: 'Ext.data.TreeModel',
fields: [
'name',
'path',
'size',
{
name: 'leaf',
calculate: function(data) {
return data.root ? false : !data.children;
}
},
{
name: 'text',
calculate: function(data) {
return data.name;
}
}
],
proxy: {
type: 'ajax',
url: 'data/tree/tree.json'
},
idProperty: 'path'
});
Next, you have to create the Controller.
Ext.define('KitchenSink.view.d3.SunburstController', {
extend: 'Ext.app.ViewController',
alias: 'controller.sunburst',
requires: [
'Ext.util.Format'
],
onTooltip: function(component, tooltip, node, element, event) {
var record = node.data,
size = record.get('size'),
n = record.childNodes.length;
tooltip.setTitle(record.get('text'));
if (size) {
tooltip.setHtml(Ext.util.Format.fileSize(size));
}
else {
tooltip.setHtml(n + ' file' + (n === 1 ? '' : 's') + ' inside.');
}
}
});
Add the following codes to create the View.
Ext.define('KitchenSink.view.d3.Sunburst', {
extend: 'Ext.panel.Panel',
xtype: 'd3-view-sunburst',
controller: 'sunburst',
requires: [
'KitchenSink.view.d3.TreeViewModel',
'Ext.d3.hierarchy.partition.Sunburst'
],
width: 930,
height: 600,
layout: 'border',
viewModel: {
type: 'tree'
},
items: [
{
xtype: 'treepanel',
region: 'west',
split: true,
splitterResize: false,
collapsible: true,
minWidth: 100,
width: 230,
title: 'Folders',
useArrows: true,
displayField: 'name',
bind: {
store: '{store}',
selection: '{selection}',
focused: '{selection}'
}
},
{
region: 'center',
xtype: 'panel',
layout: 'fit',
items: {
xtype: 'd3-sunburst',
reference: 'd3',
padding: 20,
bind: {
store: '{store}',
selection: '{selection}'
},
tooltip: {
renderer: 'onTooltip'
}
}
}
]
});
Keep in mind that the angle and area of each section of the above visualization correspond to this node value:
viewModel: {
type: 'tree'
}
Finally, you have to add the View Model.
Ext.define('KitchenSink.view.d3.TreeViewModel', {
extend: 'Ext.app.ViewModel',
requires: [
'KitchenSink.model.Tree',
'Ext.data.TreeStore'
],
alias: 'viewmodel.tree',
stores: {
store: {
type: 'tree',
defaultRootText: 'd3',
model: 'KitchenSink.model.Tree',
autoLoad: true
}
},
data: {
selection: undefined
}
});
By default, the same node value mentioned in the View, which is type: ‘tree’, is returned for each node. So, the siblings will optionally span an equal amount of angles.
You can view the demo here.
Zoomable Sunburst
Zoomable Sunburst component enables you to zoom in on the subtree or selected node with transitions in the D3 Sunburst component. For example, let’s take a look at this data visualization:
Clicking on the “bin” node will zoom in and reveal more data.
To produce the visualization shown above, you have to create the Model:
Ext.define('KitchenSink.model.Tree', {
extend: 'Ext.data.TreeModel',
fields: [
'name',
'path',
'size',
{
name: 'leaf',
calculate: function(data) {
return data.root ? false : !data.children;
}
},
{
name: 'text',
calculate: function(data) {
return data.name;
}
}
],
proxy: {
type: 'ajax',
url: 'data/tree/tree.json'
},
idProperty: 'path'
});
Now, you have to create the View.
Ext.define('KitchenSink.view.d3.SunburstZoom', {
extend: 'Ext.panel.Panel',
xtype: 'd3-view-sunburst-zoom',
controller: 'sunburst-zoom',
requires: [
'KitchenSink.view.d3.TreeViewModel',
'Ext.d3.hierarchy.partition.Sunburst'
],
width: 1200,
height: 700,
layout: 'border',
viewModel: {
type: 'tree'
},
items: [
{
xtype: 'breadcrumb',
region: 'north',
bind: {
store: '{store}',
selection: '{selection}'
},
publishes: 'selection'
},
{
region: 'center',
xtype: 'panel',
layout: 'fit',
items: {
xtype: 'd3-sunburst',
reference: 'd3',
padding: 20,
bind: {
store: '{store}',
selection: '{selection}'
},
transitions: {
select: false
},
listeners: {
selectionchange: 'onSelectionChange'
},
expandEventName: false
}
}
]
});
Then, you have to create the Controller.
Ext.define('KitchenSink.view.d3.SunburstZoomController', {
extend: 'Ext.app.ViewController',
alias: 'controller.sunburst-zoom',
onSelectionChange: function(sunburst, node) {
sunburst.zoomInNode(node);
}
});
Finally, you have to create the View Model.
Ext.define('KitchenSink.view.d3.TreeViewModel', {
extend: 'Ext.app.ViewModel',
requires: [
'KitchenSink.model.Tree',
'Ext.data.TreeStore'
],
alias: 'viewmodel.tree',
stores: {
store: {
type: 'tree',
defaultRootText: 'd3',
model: 'KitchenSink.model.Tree',
autoLoad: true
}
},
data: {
selection: undefined
}
});
You can see the demo here.
Wrapping Up
That’s it! Now, you have learned the way of visualizing the data with D3. Keep in touch with us to find more methods of creating interactive data visualizations using JavaScript.