Word Tree

A word tree using a dendrogram based on the text of State of the Union speeches.

<!DOCTYPE html>

svg {
  height: 500px;
  width: 500px;
}

</style>
<body>
<div id="viz">
<svg></svg>
</div>
</body>

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>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js