Old school D3 from simpler times

All examples By author By category About

calvinmetcalf

Full window Github gist

Words I use on twitter

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: auto;
  position: relative;
  width: 100%;
}

form{
	visibility:hidden;
}
.node {
  border: solid 1px white;
  font: 10px sans-serif;
  line-height: 12px;
  overflow: hidden;
  position: absolute;
  text-indent: 2px;
}

</style>
<form>
  <label><input type="radio" name="mode" value="size" checked> Size</label>
  <label><input type="radio" name="mode" value="count"> Count</label>
</form>
<script src="https://d3js.org/d3.v3.js"></script>
<script src="https://cdn.jsdelivr.net/npm/d3@12.10.3/colorbrewer.js"></script>
<script>

var margin = {top: 0, right: 0, bottom: 10, left: 0},
    width = document.width - margin.left - margin.right-20,
    height = document.height - margin.top - margin.bottom-25;
var stopWords = ["out","up","mt","one","via","a","rt","able","about","across","after","all","almost","also","am","among","an","and","any","are","as","at","be","because","been","but","by","can","cannot","could","dear","did","do","does","either","else","ever","every","for","from","get","got","had","has","have","he","her","hers","him","his","how","however","i","if","in","into","is","it","its","just","least","let","like","likely","may","me","might","most","must","my","neither","no","nor","not","of","off","often","on","only","or","other","our","own","rather","said","say","says","she","should","since","so","some","than","that","the","their","them","then","there","these","they","this","tis","to","too","twas","us","wants","was","we","were","what","when","where","which","while","who","whom","why","will","with","would","yet","you","your"];
var color = function(v){
	return colorbrewer.Spectral[11][10-q(v)];
}
var q = d3.scale.quantile();
var _tree;
var treemap = d3.layout.treemap()
    .size([width, height]).sort(function(a,b){return a.value-b.value;})
    .sticky(true)
    .value(function(d) { return d.size; });

var div = d3.select("body").append("div")
    .style("position", "relative")
    .style("width", (width + margin.left + margin.right) + "px")
    .style("height", (height + margin.top + margin.bottom) + "px")
    .style("left", margin.left + "px")
    .style("top", margin.top + "px");
var filt = function(v){
	return v.size>4 && stopWords.indexOf(v.name.replace("'","").toLowerCase()) === -1 && v.name.trim().length > 0  &&  !v.name.match(/\W/) &&  v.name.match(/\D/)
	
	}
d3.json("tree.json", function(error, root) {
	q.domain(root.children.filter(filt).map(function(v){return v.size;})).range(d3.range(0,11));
  var node = div.datum({name:"words",children:root.children.filter(filt).sort(function(a,b){return a.size-b.size;})}).selectAll(".node")
      .data(treemap.nodes)
    .enter().append("div")
      .attr("class", "node")
      .call(position)
      .style("background", function(d) { return d.children ? null : color(d.value); })
      .text(function(d) { return d.children ? null : d.name; });

});

function position() {
  this.style("left", function(d) { return d.x + "px"; })
      .style("top", function(d) { return d.y + "px"; })
      .style("width", function(d) { return Math.max(0, d.dx - 1) + "px"; })
      .style("height", function(d) { return Math.max(0, d.dy - 1) + "px"; });
}

</script>

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

Updated missing url https://raw.github.com/mbostock/d3/master/lib/colorbrewer/colorbrewer.js to https://cdn.jsdelivr.net/npm/d3@12.10.3/colorbrewer.js

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

https://raw.github.com/mbostock/d3/master/lib/colorbrewer/colorbrewer.js