e.g. of treemap

by Nivaldo

HTML

<div id="chart"></div>

CSS

#chart {
  width: 960px;
  height: 500px;
  background: #ddd;
}

text {
  pointer-events: none;
}

.grandparent text {
  font-weight: bold;
}

rect {
  fill: none;
  stroke: #fff;
}

rect.parent,
.grandparent rect {
  stroke-width: 2px;
}

.grandparent rect {
  fill: orange;
}

.grandparent:hover rect {
  fill: #ee9700;
}

.children rect.parent,
.grandparent rect {
  cursor: pointer;
}

.children rect.parent {
  fill: #bbb;
  fill-opacity: .5;
}

.children:hover rect.child {
  fill: #bbb;
}

JavaScript

var root = {
 "name": "Sitemap",
 "children": [
  {
   "name": "International Relations",
   "children": [
    {
     "name": "Systemic Theory",
     "children": [
      {"name": "Great Powers", "amount": 3938, "url": "http://polisci.osu.edu"},
      {"name": "Systemic Politics", "amount": 743, "url": "http://polisci.osu.edu"}
     ]
    },
    {
     "name": "International Conflict",
     "children": [
      {"name": "Systemic Politics", "amount": 3416, "url": "http://google.com"},
      {"name": "Causal Complexity", "amount": 3416, "url": "http://bing.com"},
      {"name": "Deadly Doves", "amount": 3416, "url": "http://polisci.osu.edu"},
      {"name": "Politcal Irrelevance", "amount": 3416, "url": "http://polisci.osu.edu"},
      {"name": "The Fog of Peace: Uncertainty, War, and the Resumption of International Crises, <i>manuscript</i>", "amount": 3416, "url": "http://polisci.osu.edu"},
      {"name": "Greed or Opportunity? Refining our Understanding of the Origins of Civil Wars, <i>manuscript</i>", "amount": 3416, "url": "http://polisci.osu.edu"}
     ]
    },
    {
     "name": "Foreign Policy",
     "children": [
      {"name": "The Myth of American Isolationism", "amount": 3416, "url": "http://polisci.osu.edu"}
     ]
    },
    {
     "name": "Courses",
     "children": [
      {"name": "IS 201", "amount": 3416, "url": "http://polisci.osu.edu"},
      {"name": "PS 544", "amount": 3416, "url": "http://polisci.osu.edu"},
      {"name": "PS 848", "amount": 3416, "url": "http://polisci.osu.edu"}      
     ]
    },
    {
     "name": "Dataverse",
     "children": [
      {"name": "Dataverse", "amount": 3416, "url": "http://polisci.osu.edu"}
     ]
    }
   ]
  },
  {
   "name": "Political Methodology",
   "children": [
    {
     "name": "Theory and Methdology",
     "children": [
      {"name": "Interactions and Causal Complexity", "amount": 3938, "url": "http://polisci.osu.edu"},
      {"name": "Theory and Methodology", "amount": 743, "url":...