Old school D3 from simpler times

All examples By author By category About

me1er

Full window Github gist

Treemap

forked from bansaghi's block: Interactive and reusable d3.treemap

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>d3.chart.layout.hierarchy.treemap</title>
    <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="https://cdn.jsdelivr.net/gh/misoproject/d3.chart/d3.chart.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/bansaghi/d3.chart.layout.hierarchy/d3.chart.layout.hierarchy.js"></script>
    <style>
      html {
        display: table;
        margin: auto; }

#vis {
        width: 960px;
        height: 500px; }

.cell text {
        cursor: move;
        font: 10px sans-serif;
        text-anchor: middle; }

.cell rect {  
        stroke: #fff; }
    </style>
  </head>
  <body>

<div id="vis"></div>

<script>
      (function() {
        d3.json("https://rawgit.com/bansaghi/d3.chart.layout.hierarchy/master/example/data/flare.json", function(error, json) {

var treemap = d3.select("#vis").append("svg")

.chart("treemap")

.value("size")
              .sortable("_DESC_")
              //.zoomable()
              .collapsible()
              //.duration()
              //.colors(['#FF0000', '#00FF00', '#0000FF'])
              ;

treemap.draw(json);

});
      }());
    </script>
  </body>
</html>

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>d3.chart.layout.hierarchy.treemap</title>
    <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="https://cdn.jsdelivr.net/gh/misoproject/d3.chart/d3.chart.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/bansaghi/d3.chart.layout.hierarchy/d3.chart.layout.hierarchy.js"></script>
    <style>
      html {
        display: table;
        margin: auto; }
​
      #vis {
        width: 960px;
        height: 500px; }
​
      .cell text {
        cursor: move;
        font: 10px sans-serif;
        text-anchor: middle; }
​
      .cell rect {  
        stroke: #fff; }
    </style>
  </head>
  <body>
​
    <div id="vis"></div>
​
    <script>
      (function() {
        d3.json("https://rawgit.com/bansaghi/d3.chart.layout.hierarchy/master/example/data/flare.json", function(error, json) {
​
          var treemap = d3.select("#vis").append("svg")
​
            .chart("treemap")
​
              .value("size")
              .sortable("_DESC_")
              //.zoomable()
              .collapsible()
              //.duration()
              //.colors(['#FF0000', '#00FF00', '#0000FF'])
              ;
​
          treemap.draw(json);
​
        });
      }());
    </script>
  </body>
</html>
​
    

Modified http://d3js.org/d3.v3.min.js to a secure url

Updated missing url https://rawgit.com/misoproject/d3.chart/master/d3.chart.min.js to https://cdn.jsdelivr.net/gh/misoproject/d3.chart/d3.chart.min.js

Updated missing url https://rawgit.com/bansaghi/d3.chart.layout.hierarchy/master/d3.chart.layout.hierarchy.js to https://cdn.jsdelivr.net/gh/bansaghi/d3.chart.layout.hierarchy/d3.chart.layout.hierarchy.js

https://d3js.org/d3.v3.min.js

https://rawgit.com/misoproject/d3.chart/master/d3.chart.min.js

https://rawgit.com/bansaghi/d3.chart.layout.hierarchy/master/d3.chart.layout.hierarchy.js