BBox Word Cloud

A simple word cloud using bounding-box style collision detection for d3V4 forceSimulation. Bounding box is a rule that produces a top-left and bottom right corner with coordinates local to the center of the node. So, in this case the size of the bounding box roughly matches the size and orientation of the text.

Source code here

<html>
<head>
  <title>d3v4 Simple Word Cloud</title>
  <meta charset="utf-8" />
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="d3-force.js"></script>
</head>
<style>
  svg {
    height: 500px;
    width: 500px;
    border: 1px solid gray;
  }
</style>
<body>

d3.csv("words.csv",function(error,data) {createWordcloud(data)});

function createWordcloud(data) {

var networkCenter = d3.forceCenter().x(250).y(250);

var textScale = d3.scaleLinear().domain([10,70]).range([2,10])

var forceX = d3.forceX(function (d) {return 250})
    .strength(function (d) {return textScale(d.frequency) / 5})

var forceY = d3.forceY(function (d) {return 250})
    .strength(function (d) {return textScale(d.frequency) / 5})

var collide = d3.forceRectCollide(function (d,i) {
    return i%2 === 0 ? [[-(d.text.length * textScale(d.frequency)),-15],[(d.text.length * textScale(d.frequency)),10]] : [[-10,-(d.text.length * textScale(d.frequency))],[10,(d.text.length * textScale(d.frequency))]]
  })

var color = d3.scaleOrdinal(d3.schemeCategory10)

var force = d3.forceSimulation(data)
    .force("center", networkCenter)
    .force("x", forceX)
    .force("y", forceY)
    .force("collide", collide)
    .on("tick", updateNetwork);

var nodeEnter = d3.select("svg.main").selectAll("g.node")
  .data(data)
  .enter()
  .append("g")
  .attr("class", "node")

nodeEnter.append("text")
  .attr("y", 3)
  .style("text-anchor", "middle")
  .style("font-size", function (d) {return textScale(d.frequency) * 4.8 + "px"})
  .text(function (d) {return d.text})
  .attr("transform", function (d,i) {return i%2 === 0 ? "rotate(0)" : "rotate(90)"})
  .style("pointer-events", "none")
  .style("fill", function (d,i) {return color(i)})

function updateNetwork(e) {

d3.select("svg.main").selectAll("g.node")
      .attr("transform", function (d) {return "translate(" + d.x + "," + d.y + ")"});

}

}
</script>
  </footer>

</html>

https://d3js.org/d3.v4.min.js