A word tree using a dendrogram based on the text of State of the Union speeches.
<!DOCTYPE html>
<head>
<title>Word Tree</title>
</head>
<meta charset="utf-8">
<style>
svg {
height: 500px;
width: 500px;
}
</style>
<body>
<div id="viz">
<svg></svg>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js" charset="utf-8" type="text/javascript"></script>
<script>
d3.json("sotu.json", dendrogram);
function dendrogram(data) {
data = data.values[0];
treeChart = d3.layout.tree();
treeChart.size([500,500])
.children(function(d) {return d["values"]})
/* .separation(function (a, b) {
return 1
}); */
var linkGenerator = d3.svg.diagonal()
.projection(function (d) {return [d.y, d.x]});
var chartG = d3.select("svg")
.append("g")
.attr("class", "dendrogram")
.attr("transform", "translate(0,0)");
chartG
.selectAll("path.links")
.data(treeChart.links(treeChart(data)))
.enter().append("path")
.attr("d", linkGenerator)
.style("fill", "none")
.style("stroke", "black")
.style("stroke-width", "0.5px")
.style("stroke-opacity", 0.75);
chartG
.selectAll("circle")
.data(treeChart(data))
.enter().append("circle")
.attr("r", 2)
.style("stroke-width", "0.5px")
.style("stroke-opacity", 0.75)
.attr("cx", function (d) {return d.y})
.attr("cy", function (d) {return d.x})
.style("fill", function (d) {return d.leafColor ? d.leafColor : "grey"})
.style("fill-opacity", function (d) {return d.leafColor ? 1 : .1})
.style("stroke", function (d) {return d.leafColor ? "none" : "black"})
chartG
.selectAll("text")
.data(treeChart(data))
.enter().append("text")
.text(function (d) {return d["key"]})
.attr("x", function (d) {return d.y})
.attr("y", function (d) {return d.x})
.style("font-size", "10px")
}
</script>