How can we help?

New post
Date Votes

4 comments

  • Avatar
    Keely Davison Official comment

    Thanks for the idea. Support for a wordcloud component may be implemented in the future. In the meantime you can use the html component to set up a word cloud as follows:

    In the HTML Template put:
    <div id='wordcloud'>
    <ul id='wordcloud-words' style='display:none;'>
    {{each Words}}
    <li>${$value}</li>
    {{/each}}
    </ul>
    <ul id='wordcloud-values' style='display:none;'>
    {{each Values}}
    <li>${$value}</li>
    {{/each}}
    </ul>
    </div>

    Click on "Use JavaScript with this HTML Template" and add the following JavaScript

    require( ["https://cdnjs.cloudflare.com/ajax/libs/d3/3.0.8/d3.min.js"] , function(ok){
    require( ["https://raw.github.com/jasondavies/d3-cloud/master/d3.layout.cloud.js"] , function(ok){

    var fill = d3.scale.category20();
    var width = $("#wordcloud").width();
    var height = 300;
    var minSize = 15;
    var maxSize = 50;

    var words = [];
    $("#wordcloud-words li").each(function() {
    words.push($(this).text());
    });

    var values = [];
    $("#wordcloud-values li").each(function() {
    values.push(FMT.convertToNumber($(this).text()));
    });

    var minVal = _.min(values);
    var maxVal = _.max(values);

    var wordObjs = [];
    for (var i = 0; i < words.length; i++) {
    if (i < values.length) {
    var size = ((values[i] - minVal) / (maxVal - minVal)) * (maxSize - minSize) + minSize;
    wordObjs.push({text:words[i], size:size});
    }
    }

    d3.layout.cloud().size([ width, height])
    .words(wordObjs)
    .rotate(function() { return ~~(Math.random() * 5) * 30 - 60; })
    .font("Impact")
    .fontSize(function(d) { return d.size; })
    .on("end", draw)
    .start();

    function draw(words) {
    d3.select("#wordcloud").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
    .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; });
    }

    })
    })

    Change the "Data Model:" to be "Use array model"

    Set up 2 series in the Klip. One called "Words" and one called "Values". Populate them with your word cloud data.

    In the JavaScript you can adjust the "height", "minSize" and "maxSize" as appropriate for your word cloud.

  • 0
    Avatar
    Meggan King
    Creating a wordcloud has been updated! Please see this document for how to do it: https://static.klipfolio.com/images/saas/nl_wordcloud.pdf Found in the Tips & Techniques list http://klipfolio.uservoice.com/knowledgebase/articles/360783-tips-and-techniques-function-examples
  • 0
    Avatar
    Erez Goren

    Hello,

    Are you aware of any elegant way to generate the "Values" values based on and matching the amount of times a certain word appears in the "Words" array?

    Any input would be greatly appreciated,

    Thanks in advance,

  • 0
    Avatar
    Josh Cohen-Collier

    Hi Erez,

    Great question!

    Absolutely this can be done, via the GROUP and COUNTDISTINCT function.
    So if you have your array of nonunique values cloud, here is what you would do:
    Words: GROUP(cloud)
    Values: COUNTDISTINCT(cloud)

    Hope this helps!

    Warm regards,
    Joshua

Please sign in to leave a comment.