block by PatMartin b8e26f473b2e023a06db8c8ed1136317

Treemap Barchart

Full Screen

Treemap Bar Chart

This is a reusable dex.js bar chart composed of treemaps based upon Chris Givens example.

References

index.html

<!DOCTYPE html>
<head>
    <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">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    <script src="https://dexjs.net/js/dex-jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://dexjs.net/js/dex-bootstrap.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
    <script src="https://dexjs.net/js/dex-libs.js"></script>
    <script src="https://dexjs.net/js/dex.js"></script>
    <style>
        html, body, #CrimeTreemapBarChart {
            height: 100%;
            min-height: 100%;
            width: 100%;
            min-width: 100%;
        }

        .hover-active rect {
            opacity: .75;
        }

        .hover-active rect.hover {
            opacity: 1;
        }
    </style>
</head>
<div id="CrimeTreemapBarChart"></div>
<body>
<script>
  d3.csv("crime2000.csv", function (error, data) {
    var crime = new dex.csv(data);

    var crimeTreemapBarChart = dex.charts.d3.TreemapBarChart({
      'parent': '#CrimeTreemapBarChart',
      'csv': crime.columnSlice([0, 1, 2, 3, 4]),
      'manualSizing': true
    }).render();
  });
</script>
</body>