<!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>Dendrogram | the D3 Graph Gallery</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Dendrogram with Javascript and D3.js: A set of examples with reproducible code.">
<meta name="keywords" content="Data,Dataviz,Datavisualization,Javascript,D3,D3.js,sankey, flow chart">
<meta name="author" content="Yan Holtz">
<link rel="icon" href="img/logo/D3_single_small.png">
<meta property="og:title" content="Area Chart | the D3 Graph Gallery">
<meta property="og:image" content="img/overview_RGG.png">
<meta property="og:description" content="Dendrogram with Javascript and D3.js: A set of examples with reproducible code.">
<!-- 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>
<!-- PRISM -->
<script src="LIB/prism.js"></script>
<link href="LIB/prism.css" rel="stylesheet" />
</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>Dendrogram</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/dendrogram.html">dendrogram</a> shows a <u>hierarchical</u> structure. It is constituted of a <u>root</u> node that gives birth to several nodes connected by <u>edges</u> or branches. Last nodes of the hierarchy are called <u>leaves</u>. Learn more about its theory on <a href="https://www.data-to-viz.com/graph/dendrogram.html">data-to-viz.com</a>, or visit the examples below to learn how to implement it in d3.js</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">
<p class="mySeryTitle">A note on input data format</p>
<hr>
<p>Building dendrogram with <code>d3.js</code> requires to have an input at the <code>Json</code> format, like <a href="https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/data_dendrogram.json">here</a>. The <a href="https://github.com/timelyportfolio/d3r">d3r package</a> makes it a breeze to get this format from a <code>R</code> data frame.</p>
<div id="summary">
<div class="collapse" id="collapseSummary">
<pre class="language-js"><code id="codejs" contenteditable="false"><xmp># This is R code
# create a simple hierarchy
data <- data.frame(
level1="CEO",
level2=c( rep("boss1",4), rep("boss2",4)),
level3=paste0("mister_", letters[1:8])
)
# transform it to json format
library(d3r)
data_json <- d3_nest(data)
# Save in a json file
write(data_json, "data_ready.json")
</xmp></code></pre>
<p>You're now ready to use the file called <code>data_ready.json</code> in your d3.js chart</p>
</div>
<a class="collapsed" data-toggle="collapse" href="#collapseSummary" aria-expanded="false" aria-controls="collapseSummary"></a>
<br><br><br><br>
<div class="mySeryTitle">Step by step</div>
<hr>
<p>Building a dendrogram with d3.js always follows the same steps. <u>First</u>, a cluster layout must be defined with <code>d3.cluster()</code>. <u>Second</u>, data is provided to this layout thanks to <code>d3.hierarchy()</code>. We now have an object with nodes coordinates. <u>Lastly</u>, we can use it to add nodes with <code>append('circle')</code> and links with <code>append('path')</code>.</p>
<div id="portfolio-items" class="row">
<div class="col-md-4 col-sm-6 portfolio-item">
<a class="portfolio-link" href="graph/dendrogram_basic.html">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<p>Most basic dendrogram</p>
<hr>
<p class="explanation_portfolio">Most basic dendrogram. Built from a Json file.</p>
</div>
</div>
<img class="img-fluid" src="img/graph/dendrogram_basic.png" alt="">
</a>
</div>
<div class="col-md-4 col-sm-6 portfolio-item">
<a class="portfolio-link" href="graph/dendrogram_radial_basic.html">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<p>Basic radial dendrogram</p>
<hr>
<p class="explanation_portfolio">Very basic as well, but uses a radial layout instead of the linear</p>
</div>
</div>
<img class="img-fluid" src="img/graph/dendrogram_radial_basic.png" alt="">
</a>
</div>
</div>
<br><br><br><br>
<div class="mySeryTitle">Selection of blocks</div>
<hr>
<p>A few blocks with more complicated codes to showcase what's possible to do with hierarchical edge bundling.</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/e9ba78a2c1070980d1b530800ce7fa2b">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<p>Transition tree / dendrogram</p>
<hr>
<p class="explanation_portfolio">A block illustrating the difference between tree and dendrogram, with smooth transition between both.</p>
</div>
</div>
<img class="img-fluid showBlock" src="img/block/block_dendrogramTransition.png" alt="Hierarchical edge bundling">
</a>
</div>
<div class="col-md-4 col-sm-6 portfolio-item">
<a class="portfolio-link" href="https://bl.ocks.org/lorenzopub/dfd90f8a3a8c76de939f857de24e7d89">
<div class="portfolio-hover">
<div class="portfolio-hover-content">
<p>Dendrogram and barplot</p>
<hr>
<p class="explanation_portfolio">A block showing how to add a barplot next to dendrogram leaves.</p>
</div>
</div>
<img class="img-fluid showBlock" src="img/block/block_dendrogramBarplot.png" alt="Dendrogram and barplot">
</a>
</div>
</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="chord.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/Chord150.png" alt="">
</a>
<div class="captionPortfolio">Chord diagram</div>
</div>
<div class="col-md-2 col-sm-4 portfolio-item">
<a class="portfolio-link" href="network.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/Network150.png" alt="">
</a>
<div class="captionPortfolio">Network</div>
</div>
<div class="col-md-2 col-sm-4 portfolio-item">
<a class="portfolio-link" href="sankey.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/Sankey150.png" alt="">
</a>
<div class="captionPortfolio">Sankey</div>
</div>
<div class="col-md-2 col-sm-4 portfolio-item">
<a class="portfolio-link" href="arc.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/Arc150.png" alt="">
</a>
<div class="captionPortfolio">Arc diagram</div>
</div>
<div class="col-md-2 col-sm-4 portfolio-item">
<a class="portfolio-link" href="bundle.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/Bundle150.png" alt="">
</a>
<div class="captionPortfolio">Edge bundling</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>
<!-- Custom scripts for this template -->
<script src="js/agency.min.js"></script>
<!--============================== -->
</body>
</html>