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 »


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

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
Edit the application code to include the TreeMap just as any other standard Custom Element using the d-treemap tag.
<script src="bower_components/requirejs/require.js"></script>
  require.config({ baseUrl: "bower_components "});
  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" }
  <d-treemap style="width:640px;height:640px" store="dataStore" 
    areaAttr="sales" colorAttr="profit" tooltipAttr="label" 
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