• 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}}
    <ul id='wordcloud-values' style='display:none;'>
    {{each Values}}

    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() {

    var values = [];
    $("#wordcloud-values li").each(function() {

    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])
    .rotate(function() { return ~~(Math.random() * 5) * 30 - 60; })
    .fontSize(function(d) { return d.size; })
    .on("end", draw)

    function draw(words) {
    .attr("width", width)
    .attr("height", height)
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
    .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
    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
    Erez Goren


    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
    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,

Please sign in to leave a comment.