JSFiddle - React, Tailwind, and code Playground

by Gajus Kuizinas

HTML

<div id="foo"></div>

JavaScript

var calculateCloud,
    drawCloud;

calculateCloud = function(textInput, draw) {
    d3.layout
        .cloud()
        .size([300, 300])
        .words(textInput.split(' ').map(function(d) {
            return {
                text: d,
                size: 10 + Math.random() * 50
            };
        }))
        .rotate(function() {
            return ~~(Math.random() * 2) * 90;
        })
        .font("Impact")
        .fontSize(function(d) {
            return d.size;
        })
        .on("end", draw)
        .start();
};

drawCloud = function(domElement) {
    var fill = d3.scale.category20();

    return function(words) {
        d3
            .select(domElement)
            .append("svg")
            .attr("width", 300)
            .attr("height", 300)
            .append("g")
            .attr("transform", "translate(150,150)")
            .selectAll("text")
            .data(words)
            .enter()
            .append("text")
            .style("font-size", function(d) {
                return d.size + "px";
            })
            .style("font-family", "Impact")
            .style("fill", function(d, i) {
                return fill(i);
            })
            .attr("text-anchor", "middle")
            .attr("transform", function(d) {
                return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
            })
            .text(function(d) {
                return d.text;
            });
    };
};

calculateCloud('foo bar', drawCloud(document.querySelector('#foo')));