---
layout: default
title: "Dendrogram Visualization in D3"
description: "Dendrogram in D3"
---
<script src="//d3js.org/d3.v4.min.js"></script>
<style>

.link {
  fill: none;
  stroke: #555;
  stroke-opacity: 0.4;
  stroke-width: 1.5px;
}

.vis {
  padding-left:25px;
  margin-left:25px;
}

.centered {
  text-align: center;
}

#infoBottom {
  max-height:500px;
  overflow:scroll;
}

.card {
  padding: 20px;
}

</style>
<h1 class = "centered" >CDS Social Tribes - Dendrograms Visualization Using D3</h1>
<div class = "row">
  <div class = "vis" width = "900">
  <div class = "card centered">
    Select a Visualization Method, Click Node to View Details
    <form class = "centered" name = "selectType">
      <input type="radio" name="mode" id="tree" checked="true">
      <label for="tree">Dendrogram</label>
      <input type="radio" name="mode" id="tidytree">
      <label for="tidytree">Tidy Dendrogram</label>
      <input type="radio" name="mode" id="tidyradial">
      <label for="tidyradial">Radial Dendrogram</label>
    </form>
  </div>
  <br>
  <svg width="900" height="900"></svg>
  </div>
  <div class = "col-md-3 col-md-offset-9">
    <div class = "card" height = "900">
      <p id = "infoTop"></p>
      <p id = "infoBottom"></p>
    </div>
  </div>
</div>
<script src = "dendrogram.js"></script>