How To Visualize Data With D3 And JavaScript Using Treemaps, Heatmaps, And Pivot Heatmaps
The D3 package in Sencha Ext JS boasts several powerful components. By utilizing them, you can create amazing data visualizations that can help your business uncover valuable insights both easily and conveniently. In this post, we will discuss three of the most useful Ext JS native components: Treemap, Heatmap, and Pivot Heatmap. Let’s dive in. What is D3? D3 (Data Driven Components) is a powerful JavaScript library. It enables you to produce dynamic and interactive data visualizations in the web browser, utilizing modern web standards. These standards include SVG, HTML, and CSS. Best of all, D3 is open-source, so you can use it without spending a single penny. How to Visualize Data Using D3 and JavaScript Because the Sencha D3 JavaScript package is fully integrated with Ext JS, you can create powerful data visualizations and implement them into your Ext JS web applications with ease. Although there are many different component types in the D3 package, in this post, we will discuss only Treemaps, Heatmaps, and Pivot Heatmaps. D3 Treemap The D3-treemap is a powerful component that recursively subdivides areas into rectangles, where the area of any node in a tree corresponds to its comparative value. Let’s take a look at this example: To create the visualization shown above, simply follow these steps: 1. First, you have to create the model: Ext.define(‘KitchenSink.model.Stock’, { extend: ‘Ext.data.TreeModel’, fields: [ ‘name’, ‘description’, ‘cap’, { name: ‘leaf’, calculate: function(data) { return data.root ? false : !data.children; } }, { name: ‘change’, calculate: function() { return (-5 + Math.random() * 10).toFixed(2); // percentages } }, { name: ‘expanded’, type: ‘boolean’, defaultValue: true } ], proxy: { type: ‘ajax’, url: ‘data/tree/stocks.json’ } }); Here, you are adding different fields, including name, field, description, leaf, and change. 2. Next, you have to create the View. To do so, add the following code: Ext.define(‘KitchenSink.view.d3.TreeMap’, { extend: ‘Ext.panel.Panel’, xtype: ‘d3-view-treemap’, controller: ‘treemap’, requires: [ ‘KitchenSink.view.d3.StocksViewModel’, ‘Ext.d3.hierarchy.TreeMap’ ], width: 930, height: 600, profiles: { classic: { width: 930, companyPanelWidth: 215 }, neptune: { width: 930, companyPanelWidth: 215 }, graphite: { width: 1000, companyPanelWidth: 300 }, ‘classic-material’: { width: 1000, companyPanelWidth: 300 } }, layout: ‘border’, viewModel: { type: ‘stocks’ }, items: [ { xtype: ‘treepanel’, region: ‘west’, title: ‘Companies’, split: true, splitterResize: false, collapsible: true, minWidth: 100, width: 215, useArrows: true, displayField: ‘name’, rootVisible: false, bind: { store: ‘{store}’, selection: ‘{selection}’, focused: ‘{selection}’ }, tbar: { xtype: ‘segmentedbutton’, width: ‘100%’, items: [ { text: ‘Market Cap’, pressed: true }, { text: ‘Uniform’ } ], listeners: { toggle: ‘onNodeValueToggle’ } } }, { xtype: ‘panel’, region: ‘center’, layout: ‘fit’, items: { xtype: ‘d3-treemap’, reference: ‘treemap’, rootVisible: false, interactions: { type: ‘panzoom’, zoom: { doubleTap: false } }, bind: { store: ‘{store}’, selection: ‘{selection}’ }, nodeValue: ‘cap’, noParentValue: true, scaleLabels: true, colorAxis: { scale: { type: ‘linear’, domain: [-5, 0, 5], range: [‘#E45649’, ‘#ECECEC’, ‘#50A14F’] }, field: ‘change’, processor: function(axis, scale, node, field) { var record = node.data; return record.isLeaf() ? scale(record.get(field)) : ‘#ececec’; } } } } ] }); 3. Once you are don there, you have to create the View Model: Ext.define(‘KitchenSink.view.d3.StocksViewModel’, { extend: ‘Ext.app.ViewModel’, requires: [ ‘KitchenSink.model.Tree’, ‘Ext.data.TreeStore’ ], alias: ‘viewmodel.stocks’, stores: { store: { type: ‘tree’, model: ‘KitchenSink.model.Stock’, autoLoad: true } }, data: […]
