require.config({
baseUrl: "http://ibm-js.github.io/libraries/master/"
});
require(["dtreemap-build/layer"], function () {
require([
"delite/register",
"dtreemap/TreeMap",
"dtreemap/GroupLabel",
"dstore/Memory",
"dcolor/MeanColorModel",
"dcolor/Color",
"requirejs-domready/domReady!"
], function(register, TreeMap, GroupLabel, Memory, MeanColorModel, Color) {
var dataStore = new Memory({idProperty: "label", data:
[
{ label: "France", sales: 500, profit: 50, region: "EU" },
{ label: "Germany", sales: 450, profit: 48, region: "EU" },
{ label: "UK", sales: 700, profit: 60, region: "EU" },
{ label: "USA", sales: 2000, profit: 250, region: "America" },
{ label: "Canada", sales: 600, profit: 30, region: "America" },
{ label: "Brazil", sales: 450, profit: 30, region: "America" },
{ label: "China", sales: 500, profit: 40, region: "Asia" },
{ label: "Japan", sales: 900, profit: 100, region: "Asia" }
]});
var colorModel = new MeanColorModel(new Color(Color.named.red), new Color(Color.named.green));
register("c-treemap", [TreeMap, GroupLabel]);
treeMap.store = dataStore;
treeMap.areaAttr = "sales";
treeMap.colorAttr = "profit";
treeMap.tooltipAttr = "label";
treeMap.groupAttrs = ["region"];
treeMap.colorModel = colorModel;
});
});
<div>
<c-treemap id="treeMap" style="width:320px;height:320px"></c-treemap>
</div>
External resources loaded into this fiddle: