Tiling Algorithms

$(function(){ var algorithms = ["sliceAndDice", "squarified", "strip", "custom"], currentAlgorithm = algorithms[2]; var treeMap = $("#treemap").dxTreeMap({ dataSource: populationByAge, layoutAlgorithm: currentAlgorithm, colorizer: { type: "discrete", colorizeGroups: true }, title: "Population by Age Groups", tooltip: { enabled: true, format: "thousands", customizeTooltip: function (arg) { var data = arg.node.data, parentData = arg.node.getParent().data, result = ""; if (arg.node.isLeaf()) { result = "<span class='country'>" + parentData.name + "</span><br />" + data.name + "<br />" + arg.valueText + " (" + (100 * data.value/parentData.total).toFixed(1) + "%)"; } else { result = "<span class='country'>" + data.name + "</span>"; } return { text: result }; } }, size: { height: 460 } }).dxTreeMap("instance"); $("#algorithm").dxSelectBox({ items: algorithms, width: 200, value: currentAlgorithm, onValueChanged: function(data) { if(data.value == "custom") { currentAlgorithm = customAlgorithm; } else { currentAlgorithm = data.value; } treeMap.option("layoutAlgorithm", currentAlgorithm); } }); function customAlgorithm(arg) { var side = 0, totalRect = arg.rect.slice(), totalSum = arg.sum; arg.items.forEach(function (item) { var size = Math.round((totalRect[side + 2] - totalRect[side]) * item.value / totalSum), rect = totalRect.slice(); totalSum -= item.value; rect[side + 2] = totalRect[side] = totalRect[side] + size; item.rect = rect; side = 1 - side; }); } });

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.4/cldr.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.4/cldr/event.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.4/cldr/supplemental.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/cldrjs/0.4.4/cldr/unresolved.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.1.1/globalize.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.1.1/globalize/message.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.1.1/globalize/number.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.1.1/globalize/currency.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/globalize/1.1.1/globalize/date.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.2.3/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/19.2.3/css/dx.light.css" /> <script src="https://cdn3.devexpress.com/jslib/19.2.3/js/dx.all.js"></script> <script src="data.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="treemap"></div> <div class="options"> <div class="caption">Options</div> <div class="option"> <span>Tiling Algorithm</span> <div id="algorithm" class="selectbox"></div> </div> </div> </div> </body> </html>

.country { font-weight: 500; } .options { padding: 20px; background-color: rgba(191, 191, 191, 0.15); margin-top: 20px; } .option { margin-top: 10px; } .caption { font-size: 18px; font-weight: 500; } .option > span { margin-right: 10px; } .option > .dx-widget { display: inline-block; vertical-align: middle; }

var populationByAge = [{ "name": "Brazil", "total": 200050486, "items": [{ "name": "Age 0-14", "value": 48058462 }, { "name": "Age 15-44", "value": 96036995 }, { "name": "Age 45-64", "value": 40715296 }, { "name": "Age 65+", "value": 15239733 }] }, { "name": "Japan", "total": 126345237, "items": [{ "name": "Age 0-14", "value": 16593766 }, { "name": "Age 15-44", "value": 45455276 }, { "name": "Age 45-64", "value": 32845790 }, { "name": "Age 65+", "value": 31450405 }] }, { "name": "United States", "total": 318497627, "items": [{ "name": "Age 0-14", "value": 63968935 }, { "name": "Age 15-44", "value": 127217843 }, { "name": "Age 45-64", "value": 83145484 }, { "name": "Age 65+", "value": 44165365 }] }];

jQuery

Angular

Vue

React

AngularJS

ASP.NET Core

ASP.NET MVC