var fill = d3.scale.category20();

d3.csv("data.csv", function(data) {
    data.forEach(function(d) {
        d.size = +d.size;
    });

    d3.layout.cloud().size([800, 400])
        .words(data)
        .padding(5)
        .rotate(function() {
            return~~ (Math.random() * 2) * 90;
        })
        .font("Impact")
        .fontSize(function(d) {
            return Math.max(8, Math.min(d.size, 24));
        })
        .on("end", draw)
        .start();

    function draw(words) {
        d3.select("body").append("svg")
            .attr("width", 850)
            .attr("height", 450)
            .append("g")
            .attr("transform", "translate(400,230)")
            .selectAll("text")
            .data(data)
            .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;
            });
    }
});