D3 Tag Cloud (WIP)

by Steve Thompson

HTML

<script src="https://jardindesconnaissances.googlecode.com/svn-history/r82/trunk/public/js/d3.layout.cloud.js"></script>
<script src="//rawgithub.com/Caged/d3-tip/v0.6.2/index.js"></script>
<div class="container">
  <div class="cont-box-shadow">
    <div class="info">
      <div class="var-icon">
        <div class="var-structure var-blue">
          (
        </div>
        <div class="var-type var-blue">
          A
        </div>
        <div class="var-structure var-blue">
          )
        </div>
      </div>
      <div class="var-name">Square Feet</div>
      <a href="#">
        <div class="info-icon"></div>
      </a>
      <a href="#">
        <div class="alert-icon"></div>
      </a>
    </div>
    <div class="chart-container">
      <div id="chart1">
        <svg xmlns="http://www.w3.org/2000/svg" id="chart2" width="100%" height="100%"></svg>
      </div>
    </div>
    <div class="menu-tools">
      <a href="#">
        <div class="nD-edit sm-icons" title="Edit"></div>
      </a>
      <a href="#">
        <div class="nD-trash sm-icons" title="Delete"></div>
      </a>
    </div>
  </div>
</div>

CSS

.container {
  width: 196px;
  height: 196px;
  background-color: #eceded;
  position: relative;
  padding: 2px;
  overflow: hidden;
}

.cont-box-shadow {
  width: 100%;
  height: 100%;
  background-color: white;
  -webkit-box-shadow: 0px 1px 1px 1px rgba(171, 172, 172, 1);
  -moz-box-shadow: 0px 1px 1px 1px rgba(171, 172, 172, 1);
  box-shadow: 0px 1px 1px 1px rgba(171, 172, 172, 1);
}

.info {
  width: 100%;
  height: 25px;
  background-color: #555555;
  margin: 0 auto;
}

.var-icon {
  position: relative;
  float: left;
  margin: 5px;
  width: 19px;
  height: 14px;
  font-size: 12px;
}

.var-blue {
  color: #42a5f5;
}

.var-structure {
  position: relative;
  float: left;
}

.var-type {
  position: relative;
  float: left;
}

.var-name {
  font-size: 12px;
  color: white;
  position: relative;
  float: left;
  margin-top: 5px;
}

.alert-icon {
  display: none;
  background: url(http://i.imgur.com/TcAIU77.png) no-repeat;
  position: relative;
  float: right;
  margin: 5px 3px;
  width: 16px;
  height: 14px;
}

.info-icon {
  background: url(http://i.imgur.com/NhumKdn.png) no-repeat;
  position: relative;
  float: right;
  margin: 5px 5px 5px 0;
  width: 14px;
  height: 14px;
}

.info-icon:hover {
  background: url(http://i.imgur.com/Y4NJcU5.png) no-repeat;
}

.chart-container {
  width: 100%;
  height: 77%;
}

#chart1 {
  cursor: pointer;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

.chart-container svg {
  width: 100%;
  height: 100%;
  transform-origin: 0;
}

.chart-container svg text:hover {
  opacity: 0.75;
}

.jqx-tag-cloud ul {
  margin: 0 !important;
}

.jqx-tag-cloud-item {
  padding: 2px !important;
}

.menu-tools {
  display: none;
  position: relative;
  float: right;
  margin-right: 5px;
}

.container:hover .menu-tools {
  display: block;
}

.sm-icons {
  width: 15px;
  height: 15px;
  position: relative;
  float: left;
  margin-right: 5px;
}

.nD-edit {
  background:...

JavaScript

var colors = d3.scale.linear()
  .domain([0, 1, 2, 3, 4, 5, 6, 10, 15, 20, 100])
  .range(["#ccc", "#bbb", "#aaa", "#999", "#888", "#777", "#666", "#555", "#444", "#333", "#222"]);

var svg = d3.select('#chart1').select('svg');

var bbox = d3.select('svg').node().getBoundingClientRect();
console.log(bbox);

var frequency_list = [{
  "text": "study",
  "size": 40
}, {
  "text": "motion",
  "size": 15
}, {
  "text": "forces",
  "size": 10
}, {
  "text": "electricity",
  "size": 15
}, {
  "text": "movement",
  "size": 10
}, {
  "text": "relation",
  "size": 5
}, {
  "text": "things",
  "size": 10
}, {
  "text": "force",
  "size": 5
}, {
  "text": "ad",
  "size": 5
}, {
  "text": "energy",
  "size": 85
}, {
  "text": "living",
  "size": 5
}, {
  "text": "nonliving",
  "size": 5
}, {
  "text": "laws",
  "size": 15
}, {
  "text": "speed",
  "size": 45
}, {
  "text": "velocity",
  "size": 30
}, {
  "text": "define",
  "size": 5
}, {
  "text": "constraints",
  "size": 5
}, {
  "text": "universe",
  "size": 10
}, {
  "text": "SQUIRRELLED",
  "size": 10
}, {
  "text": "describing",
  "size": 5
}, {
  "text": "matter",
  "size": 90
}, {
  "text": "physics-the",
  "size": 5
}, {
  "text": "world",
  "size": 10
}, {
  "text": "works",
  "size": 10
}, {
  "text": "science",
  "size": 70
}, {
  "text": "interactions",
  "size": 30
}, {
  "text": "studies",
  "size": 5
}, {
  "text": "properties",
  "size": 45
}, {
  "text": "nature",
  "size": 40
}, {
  "text": "branch",
  "size": 30
}, {
  "text": "concerned",
  "size": 25
}, {
  "text": "source",
  "size": 40
}, {
  "text": "google",
  "size": 10
}, {
  "text": "defintions",
  "size": 5
}, {
  "text": "two",
  "size": 15
}, {
  "text": "grouped",
  "size": 15
}, {
  "text": "traditional",
  "size": 15
}, {
  "text": "fields",
  "size": 15
}, {
  "text": "acoustics",
  "size": 15
}, {
  "text": "optics",
  "size": 15
}, {
  "text": "mechanics",
  "size": 20
}, {
  "text": "thermodynamics",
  "size": 15
}, {
  "text":...