This is the code for Chapter 5, Figure 30 from D3.js in Action used to create a word cloud with semantically meaningfully word color and rotation using d3.layout.cloud() (a layout created by Jason Davies that does not come in core D3).
forked from emeeks's block: Ch. 5, Fig. 30 - D3.js in Action
xxxxxxxxxx
<html>
<head>
<title>D3 in Action Chapter 5 - Example 13</title>
<meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="colorbrewer.js" type="text/JavaScript"></script>
<script src="d3.layout.cloud.js" type="text/JavaScript"></script>
</head>
<style>
svg {
height: 500px;
width: 500px;
border: 1px solid gray;
}
</style>
<body>
<div id="viz">
<svg>
</svg>
</div>
<div id="controls" />
</body>
<footer>
<script>
d3.csv("worddata.csv", function(data) {dataViz(data)});
wordScale=d3.scale.linear().domain([0,100]).range([10,160]).clamp(true);
var keywords = ["layout", "zoom", "circle", "style", "append", "attr"]
function dataViz(data) {
d3.layout.cloud().size([500, 500])
.words(data)
.rotate(function(d) { return d.text.length > 5 ? 0 : 90; })
.fontSize(function(d) { return wordScale(d.frequency); })
.on("end", draw)
.start();
function draw(words) {
var wordG = d3.select("svg").append("g").attr("id", "wordCloudG").attr("transform","translate(250,250)");
wordG.selectAll("text")
.data(words)
.enter()
.append("text")
.style("font-size", function(d) { return d.size + "px"; })
.style("fill", function(d) { return (keywords.indexOf(d.text) > -1 ? "red" : "black"); })
.style("opacity", .75)
.attr("text-anchor", "middle")
.attr("transform", function(d) {
return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
})
.text(function(d) { return d.text; });
}
}
</script>
</footer>
</html>
https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js