Treemap

This demonstrates how to create a Treemap from csv data using dex.js.

This treemap is based upon Mike Bostocks excellent example.

Features

Auto-sizing text
Unlimited levels
Dynamic / Manual sizing of partitions
- manualSizing : (true|false)
Top level summation
Partition auto-shading
- shader : { type : (lighten|darken), increment : 0..1 }

References

dex.js The main site

<!DOCTYPE html>
<meta charset="utf-8">
<style>
    html, body, #TreemapParent {
        height: 100%;
        min-height: 100%;
        width: 100%;
        min-width: 100%;
    }

</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.theme.min.css">
<link rel="stylesheet" href="https://dexjs.net/js/dex-jquery.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css"/>
<link rel="stylesheet" href="https://dexjs.net/js/dex-bootstrap.css">
<link rel="stylesheet" href="https://dexjs.net/js/dex.css">

var treemap = new dex.charts.d3.Treemap({
        'parent': '#TreemapParent',
        'csv': crime
      }
    ).render();
  });
</script>

Updated missing url https://cdnjs.cloudflare.com/ajax/libs/Faker/3.1.0/faker.min.js to https://cdnjs.cloudflare.com/ajax/libs/faker/3.1.0/faker.min.js

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js

https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js

https://dexjs.net/js/dex-jquery.js

https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js

https://dexjs.net/js/dex-bootstrap.js

https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js

https://dexjs.net/js/dex-libs.js

https://dexjs.net/js/dex.js

https://cdnjs.cloudflare.com/ajax/libs/Faker/3.1.0/faker.min.js