JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.1.17/require.min.js"></script>
<div id="sky">
</div>
CSS
#sky {
width: 200;
height: 200;
}
JavaScript
require.config({
waitSeconds: 10,
baseUrl: 'https://cdnjs.cloudflare.com/ajax/libs',
paths: {
d3: 'd3/3.5.17/d3',
jquery: 'jquery/3.2.1/jquery.min',
cloud: 'd3-cloud/1.2.4/d3.layout.cloud'
},
shim: {
cloud: { deps:['jquery', 'd3'] }
}
});
function wordCloud(d3, d3cloud, $, selector) {
var width = $(selector).width() || 100;
var height = $(selector).height() ||Â 100;
//Construct the word cloud's SVG element
var svg = d3.select(selector).append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate("+ width/2 +","+ height/2 +")")
var fill = d3.scale.category20();
//Draw the word cloud
function draw(words) {
var cloud = svg.selectAll("g text")
.data(words, function(d) { return d.text; })
//Entering words
cloud.enter()
.append("text")
.style("font-family", "Impact")
.style("fill", function(d, i) { return fill(i); })
.attr("text-anchor", "middle")
.attr('font-size', 1)
.style("cursor", "hand")
.text(function(d) { return d.text; })
.on("click", function (d, i){
window.open("http://www.google.com/?q=" + d.text, "_blank");
});
//Entering and existing words
cloud
.transition()
.duration(600)
.style("font-size", function(d) { return d.size + "px"; })
.attr("transform", function(d) {
return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
})
.style("fill-opacity", 1);
//Exiting words
cloud.exit()
.transition()
.duration(200)
.style('fill-opacity', 1e-6)
.attr('font-size', 1)
.remove();
}
//Use the module pattern to encapsulate the visualisation code. We'll
//...