chart.js.html

<!-- This is the word cloud javascript -->

<script>
// initial function to create the bar chart
var drawChart = function (data) {

//    var color = d3.scale.category20c();
      var color = d3.scale.linear()
            .domain([0,1,2,3,4,5,6,10,15,20,100])
              .range(["#77BC1F", "#E58D17", "#513628", "#5C0549", "#3A7600", "#445B41", "#1F4C6C", "#0090BE", "#513628", "#513628", "#513628", "#513628"]);
//            .range(["#455", "#089", "#567", "#455", "#8c9", "#e65", "#577", "#089", "#567", "#455", "#033", "#e65"]);

    d3.layout.cloud().size([800, 300])
            .words(data)
            .rotate(0)
            .fontSize(function(d) { return d.size; })
            .on("end", draw)
            .start();

    function draw(words) {
        d3.select("body").append("svg")
                .attr("width", 850)
                .attr("height", 350)
                .attr("class", "wordcloud")
                .append("g")
                // without the transform, words words would get cutoff to the left and top, they would
                // appear outside of the SVG area
                .attr("transform", "translate(320,200)")
                .selectAll("text")
                .data(words)
                .enter().append("text")
                .style("font-size", function(d) { return d.size + "px"; })
                .style("fill", function(d, i) { return color(i); })
                .attr("transform", function(d) {
                    return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
                })
                .text(function(d) { return d.text; });
    }
}
      
</script>