Treemap Web Component

Treemap reveals data patterns and trends easily by relying on data clustering, using areas and color information to represent the data you want to explore.

Learn more »

deliteful

Learn how to add Treemap Custom Element to your Web or Mobile Hybrid Application!

Install the TreeMap Custom Element

Start with installing Node.js, then you are ready to install bower and using bower the dtreemap custom element. 
$ npm install -g bower
$ mkdir -p my-app
$ cd my-app
$ bower install dtreemap

Use it in your application

Edit the application code to include the TreeMap just as any other standard Custom Element using the d-treemap tag. 
<head>
<script src="bower_components/requirejs/require.js"></script>
<script>
  require.config({ baseUrl: "bower_components "});
</script>
<script>
  var dataStore;
  require(["delite/register", "dstore/Memory", 
    "dtreemap/TreeMap", "requirejs-domready/domReady!"], 
  function(register, Memory){
    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: "Japan", sales: 900, profit: 100, region: "Asia" }
	  ]});
	register.parse();	
  });
</script>
</head>
<body>
  <d-treemap style="width:640px;height:640px" store="dataStore" 
    areaAttr="sales" colorAttr="profit" tooltipAttr="label" 
    groupAttrs="region">
  </d-treemap>		
</body>

Go further

Don't hesitate to checkout the documentation to go further. You might want to leverage other Web Component from deliteful and build your application from there. 
$ npm install -g yo
$ npm install -g delite-element-generator
$ npm install generator-deliteful-app
$ yo deliteful-app