Hilbert treemap (area encoding)

This example combines a Hilbert jigsaw treemap with an area encoding: Each cell (a class of the flare software package) is scaled accordingly to its size property. This is different from the standard approach of treemaps, that either uses the leaves' size to affect the whole map, or chooses not to display size information at all (all leaves have a unit area).

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Hilbert treemap (area encoding)</title>
        <link type="text/css" href="index.css" rel="stylesheet"/>
        <script src="https://d3js.org/d3.v3.min.js"></script>
        <script src="https://jsclipper.sourceforge.net/6.1.3.1/clipper.js"></script>
        <script src="zip.js"></script>
        <script src="flare_reader.js"></script>
        <script src="tree_utils.js"></script>
        <script src="sfc_layout.js"></script>
        <script src="jigsaw.js"></script>
    </head>
    <body>
    </body>
    <script src="index.js"></script>
</html>
    

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://jsclipper.sourceforge.net/6.1.3.1/clipper.js to a secure url

https://d3js.org/d3.v3.min.js

https://jsclipper.sourceforge.net/6.1.3.1/clipper.js