<!DOCTYPE html>
<html lang="en">

  <head>

  <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
  <script>
       (adsbygoogle = window.adsbygoogle || []).push({
            google_ad_client: "ca-pub-3523953066677938",
            enable_page_level_ads: true
       });
  </script>

    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-79254642-6"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', 'UA-79254642-6');
    </script>

    <meta charset="utf-8">
    <title>Treemap &#124; the D3 Graph Gallery</title>

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="How to build a treemap with Javascript and D3.js: from the most basic example to highly customized examples.">
    <meta name="keywords" content="Data,Dataviz,Datavisualization,Javascript,D3,D3.js,area chart">
    <meta name="author" content="Yan Holtz">
  <link rel="icon" href="img/logo/D3_single_small.png">

    <meta property="og:title" content="Treemap &#124; the D3 Graph Gallery">
    <meta property="og:image" content="img/overview_RGG.png">
    <meta property="og:description" content="How to build a treemap with Javascript and D3.js: from the most basic example to highly customized examples.">

    <!-- Bootstrap core CSS -->
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom fonts for this template -->
    <link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
    <link href='https://fonts.googleapis.com/css?family=Kaushan+Script' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Roboto+Slab:400,100,300,700' rel='stylesheet' type='text/css'>

    <!-- Custom styles for this template -->
    <link href="css/agency.css" rel="stylesheet">

    <!-- JQUERY -->
    <script src="vendor/jquery/jquery.min.js"></script>

</head>



<body id="page-top">


<!-- THIS ALLOWS TO INSERT THE MENU THAT IS STORED IN A MENU.HTML FILE-->
<nav class="navbar navbar-expand-lg fixed-top" id="mainNav"></nav>
<script>
$(function(){
  $("#mainNav").load("html_chunk/menu.html");
});
</script>

<!-- THIS ALLOWS TO INSERT THE MODAL OF THE MENU THAT IS STORED IN A MENU_MODAL.HTML FILE-->
<div id="modal_menu_insertion"> </div>
<script>
$(function(){
  $("#modal_menu_insertion").load("html_chunk/menu_modal.html");
});
</script>

  <!-- Header -->
  <header class="masthead" style="padding-top: 150px; padding-bottom: 80px">
    <div class="textlanding">
      <h1>Treemap</h1>
      <hr class="short_hr">
      <br>
      <ul class="list-inline social-buttons">
        <li class="list-inline-item">
          <a href="https://twitter.com/R_Graph_Gallery">
            <i class="fa fa-twitter"></i>
          </a>
        </li>
        <li class="list-inline-item social-buttons">
          <a href="https://github.com/holtzy">
            <i class="fa fa-github" style="color: white"></i>
          </a>
        </li>
        <li class="list-inline-item social-buttons">
          <a href="https://www.linkedin.com/in/yan-holtz-2477534a/">
            <i class="fa fa-linkedin"></i>
          </a>
        </li>
        <li class="list-inline-item social-buttons">
          <a href="https://www.yan-holtz.com">
            <i class="fa fa-home"></i>
          </a>
        </li>
      </ul>
      <br><br>
      <p style="max-width: 700px; margin: auto">A <a href="https://www.data-to-viz.com/graph/treemap.html">Treemap</a> displays <u>hierarchical</u> data as a set of nested rectangles. Each group is represented by a rectangle, which area is proportional to its value. Visit <a href="https://www.data-to-viz.com/graph/area.html">data-to-viz.com</a> for more theoretical explanation about what it is. If you're looking for a simple way to implement it in d3.js, pick an example below.</p>
  </div>
</header>



<!-- THIS ALLOWS TO INSERT THE ADVERTISEMENT BANNER THAT IS STORED IN A BANNER.HTML FILE-->
<div id="position_for_images"> </div>
<script>
$(function(){
  $("#position_for_images").load("html_chunk/images.html");
});
</script>










<!-- ======================== PORTFOLIO SECTION ============================ -->
<!-- Images must be 480 x 480, resize them with ./script_reformat_img.sh output_name.png -->
<section class="bg" id="portfolio" style="padding-top: 10px">
  <div class="container">


    <div class="mySeryTitle">Step by step</div>
    <hr>
    <p>It is important to note that 2 different <u>input formats</u> can be used to build a treemap:
      <ul>
        <li>A <code>.csv</code> file with one line per connection in the hierarchy. See <a href="graph/treemap_basic.html">here</a>.</li>
        <li>A <code>.json</code> file. See <a href="graph/treemap_json.html">here</a></li>
      </ul>
    </p>
    <div id="portfolio-items" class="row">
      <div class="col-md-4 col-sm-6 portfolio-item">
        <a class="portfolio-link" href="graph/treemap_basic.html">
          <div class="portfolio-hover">
            <div class="portfolio-hover-content">
              <p>Basic: from <u>Csv</u></p>
              <hr>
              <p class="explanation_portfolio">The most basic treemap you can do in d3.js. Only one level of a hierarchy is represented.<br><br>Input: <u>csv</u> format</p>
            </div>
          </div>
          <img class="img-fluid" src="img/graph/treemap_basic.png" alt="">
        </a>
      </div>
      <div class="col-md-4 col-sm-6 portfolio-item">
        <a class="portfolio-link" href="graph/treemap_json.html">
          <div class="portfolio-hover">
            <div class="portfolio-hover-content">
              <p>Basic: from <u>Json</u></p>
              <hr>
              <p class="explanation_portfolio">The most basic treemap you can do in d3.js.<br><br>Input: <u>Json</u> format. R code to go from csv to json is provided.</p>
            </div>
          </div>
          <img class="img-fluid" src="img/graph/treemap_json.png" alt="">
        </a>
      </div>
      <div class="col-md-4 col-sm-6 portfolio-item">
        <a class="portfolio-link" href="graph/treemap_custom.html">
          <div class="portfolio-hover">
            <div class="portfolio-hover-content">
              <p>Customization</p>
              <hr>
              <p class="explanation_portfolio">Custom your treemap: color, title, padding, value labels, opacity and more.<br><br>Input: Json</p>
            </div>
          </div>
          <img class="img-fluid" src="img/graph/treemap_custom.png" alt="">
        </a>
      </div>
    </div>



    <br><br><br><br>
    <div class="mySeryTitle">Interactivity</div>
    <hr>
    <p>Two main reasons for using interactivity in treemaps. i/ Switching from one dataset to the other. ii/ building a zoomable treemap that allows to declutter the figure when several levels of hierarchy exist.</p>




    <br><br><br><br>
    <div class="mySeryTitle">Selection of blocks</div>
    <hr>
    <p>A few blocks with more complicated codes to showcase the possibility of d3 for treemaps</p>
    <div id="portfolio-items" class="row">
      <div class="col-md-4 col-sm-6 portfolio-item">
        <a class="portfolio-link" href="https://bl.ocks.org/mbostock/6bbb0a7ff7686b124d80">
          <div class="portfolio-hover">
            <div class="portfolio-hover-content">
              <p>Clean static treemap</p>
              <hr>
              <p class="explanation_portfolio">A clean layout for this static treemap by Mike Bostock. Always good to read d3.js creator's code.</p>
            </div>
          </div>
          <img class="img-fluid showBlock" src="img/block/block_treemapMike.png" alt="Treemap mike d3">
        </a>
      </div>
      <div class="col-md-4 col-sm-6 portfolio-item">
        <a class="portfolio-link" href="https://bl.ocks.org/ganezasan/52fced34d2182483995f0ca3960fe228">
          <div class="portfolio-hover">
            <div class="portfolio-hover-content">
              <p>Button and smooth transition</p>
              <hr>
              <p class="explanation_portfolio">A treemap with a button allowing to switch from size to count for rectangle size. Good to learn how to perform a smooth transition.</p>
            </div>
          </div>
          <img class="img-fluid showBlock" src="img/block/block_treemapTransitionData.png" alt="circular barchart">
        </a>
      </div>
    </div>


 </div>
</section>


<!-- ======================================================================= -->








<!-- ============================ RELATED SECTION ============================ -->
<section class="bg-light" id="portfolio_landing" style="padding-top: 30px; padding-bottom: 30px">

<div class="container">

  <p class="mySeryTitle">Related chart types</p>
  <hr>
  <div class="row">
    <div class="col-md-2 col-sm-4 portfolio-item">
      <a class="portfolio-link"  href="treemap.html">
        <div class="portfolio-hover">
          <div class="portfolio-hover-content">
            <i class="fa fa-plus fa-3x"></i>
          </div>
        </div>
        <img class="img-fluid" src="img/section/Tree150.png" alt="">
      </a>
      <div class="captionPortfolio">Treemap</div>
    </div>
    <div class="col-md-2 col-sm-4 portfolio-item">
      <a class="portfolio-link"  href="donut.html">
        <div class="portfolio-hover">
          <div class="portfolio-hover-content">
            <i class="fa fa-plus fa-3x"></i>
          </div>
        </div>
        <img class="img-fluid" src="img/section/Doughnut150.png" alt="">
      </a>
      <div class="captionPortfolio">Doughnut</div>
    </div>
    <div class="col-md-2 col-sm-4 portfolio-item">
      <a class="portfolio-link"  href="pie.html">
        <div class="portfolio-hover">
          <div class="portfolio-hover-content">
            <i class="fa fa-plus fa-3x"></i>
          </div>
        </div>
        <img class="img-fluid" src="img/section/Pie150.png" alt="">
      </a>
      <div class="captionPortfolio">Pie chart</div>
    </div>
    <div class="col-md-2 col-sm-4 portfolio-item">
      <a class="portfolio-link"  href="dendrogram.html">
        <div class="portfolio-hover">
          <div class="portfolio-hover-content">
            <i class="fa fa-plus fa-3x"></i>
          </div>
        </div>
        <img class="img-fluid" src="img/section/Dendrogram150.png" alt="">
      </a>
      <div class="captionPortfolio">Dendrogram</div>
    </div>
    <div class="col-md-2 col-sm-4 portfolio-item">
      <a class="portfolio-link"  href="circularpacking.html">
        <div class="portfolio-hover">
          <div class="portfolio-hover-content">
            <i class="fa fa-plus fa-3x"></i>
          </div>
        </div>
        <img class="img-fluid" src="img/section/CircularPacking150.png" alt="">
      </a>
      <div class="captionPortfolio">Circular packing</div>
    </div>
  </div>

</div>
</section>






<!-- ============================ CONTACT SECTION ============================ -->

<!-- ANCHOR -->
<a name="contactanchor"></a>

<section id="contact" class="bg" style="background-color: white"></section>

<!-- THIS ALLOWS TO INSERT THE CONTACT CHUNK THAT IS STORED IN A CONTACT.HTML FILE-->
<script>
$(function(){
  $("#contact").load("html_chunk/contact.html");
});
</script>





<!-- ============================ FOOTER SECTION ============================ -->
<footer class="bg-light" id="myFooter"></footer>

<!-- THIS ALLOWS TO INSERT THE FOOTER THAT IS STORED IN A FOOTER.HTML FILE-->
<script>
$(function(){
  $("#myFooter").load("html_chunk/footer.html");
});
</script>

<!-- ============================ -->














<!-- =============== JAVASCRIPT SECTION =============== -->

    <!-- Bootstrap core JavaScript -->
    <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

    <!-- Plugin JavaScript -->
    <script src="vendor/jquery-easing/jquery.easing.min.js"></script>

    <!-- Contact form JavaScript -->
    <script src="js/jqBootstrapValidation.js"></script>
    <script src="js/contact_me.js"></script>

    <!-- Custom scripts for this template -->
    <script src="js/agency.min.js"></script>

    <!-- Activate the bootstrap tooltip, must be after jQuery load -->
    <script>
      $(function () {
          $('[data-toggle="tooltip"]').tooltip()
      })
   </script>





<!--============================== -->



  </body>

</html>