Old school D3 from simpler times

All examples By author By category About

PatMartin

Full window Github gist

Dendrogram

Dendrogram

A dendrogram, which is a fancified word for "Tree".

Features

TBD...

<!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, #PresidentDendrogram {
            height: 100%;
            min-height: 100%;
            width: 100%;
            min-width: 100%;
        }
    </style>
</head>
<div id="PresidentDendrogram"></div>
<body>
<script>
  d3.csv("presidents.csv", function (error, data) {
    var presidents = new dex.csv();
    presidents.header = Object.keys(data[0]);
    presidents.data = data.slice(1).map(function (row) {
      return presidents.header.map(function (h) {
        return row[h];
      });
    });

var dendrogram = dex.charts.d3.Dendrogram({
      'parent': '#PresidentDendrogram',
      'csv': presidents.include([2, 3, 1]),
      'root.name': 'Party -> State -> President'
    });
    dendrogram.render();
  });
</script>
</body>

xxxxxxxxxx
 
<!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, #PresidentDendrogram {
            height: 100%;
            min-height: 100%;
            width: 100%;
            min-width: 100%;
        }
    </style>
</head>
<div id="PresidentDendrogram"></div>
<body>
<script>
  d3.csv("presidents.csv", function (error, data) {
    var presidents = new dex.csv();
    presidents.header = Object.keys(data[0]);
    presidents.data = data.slice(1).map(function (row) {
      return presidents.header.map(function (h) {
        return row[h];
      });
    });
​
    var dendrogram = dex.charts.d3.Dendrogram({
      'parent': '#PresidentDendrogram',
      'csv': presidents.include([2, 3, 1]),
      'root.name': 'Party -> State -> President'
    });
    dendrogram.render();
  });
</script>
</body>
​
    

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js

https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js

https://dexjs.net/js/dex-jquery.js

https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js

https://dexjs.net/js/dex-bootstrap.js

https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js

https://dexjs.net/js/dex-libs.js

https://dexjs.net/js/dex.js