# Vega not rendering Word Cloud

**URL:** <https://discuss.elastic.co/t/vega-not-rendering-word-cloud/192793>\
**Category:** Kibana\
**Created:** [July 29, 2019, 11:52pm UTC](https://discuss.elastic.co/t/vega-not-rendering-word-cloud/192793 "2019-07-29T23:52:34Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![crazyphil](https://avatars.discourse-cdn.com/v4/letter/c/9f8e36/32.png) [@crazyphil](https://discuss.elastic.co/u/crazyphil)\
**Post date:** [July 29, 2019, 11:52pm UTC](https://discuss.elastic.co/t/vega-not-rendering-word-cloud/192793/1 "2019-07-29T23:52:35Z")

</div>

I'm trying to build a word cloud using Vega and running into an issue where I can't seem to get at the data that I know is loaded. I'm not sure what value I use for the "field" references, I may also need a transform in my data section. Any suggestions would be greatly welcomed.

EDIT: I played around with my data using a bar chart and got data to display - so I've adjusted my field names accordingly, and updated my config. However, I still get nothing to display on the word cloud.

I've attached a screenshot of the javascript console showing data is in VEGA\_DEBUG.

Vega Word Cloud example: [https://vega.github.io/vega/examples/word-cloud/](https://vega.github.io/vega/examples/word-cloud/)

Config:

```
{
  "$schema": "https://vega.github.io/schema/vega/v4.json",
  "title": "Twitter Word Cloud",
  data: [
  {
    "name": "table",
    url: 
      {
        "%context%": true,
        "%timefield%": "@timestamp",
        "index": "twitter-cleaned-reporters-*",
        "body": {
          "size":0,
          "aggs": {
             "wordcloud": {
               "terms": {
                 "field": "text",
                 "size": 50,
                 "exclude": ["https","the","a","t.co","of","in","and","is","on","for","that","this","it","with","i","at","was","to","be","he","his","as","but","from","are","about","has","you","have","by","an","who","what","me","says","had","our","or","no","so","if","not","new","one","we","out","just","my","said","will","up","would","news","more","they","amp","after","than","there","their","been","when","say","people","him","some","her","how","like","think","did","get","do","most","were","could","can","going","last","all","first","back","it's","here","via","also","year","your","which","because","into","next","wide","over","years","asked","she","only","rep","them","robert","story","know","it’s","other","day","make","way","being","read","great","want","should","very","those","any","still","may"]
              }
            }
          }
        }
    },
      "transform": [
        {
          "type": "formula", "as": "angle",
          "expr": "[-45, 0, 45][~~(random() * 3)]"
        },
        {
          "type": "formula", "as": "weight",
          "expr": "if(datum.text=='VEGA', 600, 300)"
        }
      ]

  }
  ],
    "scales": [
    {
      "name": "color",
      "type": "ordinal",
      "domain": {"data": "table", "field": "doc_count"},
      "range": ["#d5a928", "#652c90", "#939597"]
    }
  ],

  "marks": [
    {
      "type": "text",
      "from": {"data": "table"},
      "encode": {
        "enter": {
          "text": {"field": "key"},
          "align": {"value": "center"},
          "baseline": {"value": "alphabetic"},
          "fill": {"scale": "color", "field": "key"}
        },
        "update": {
          "fillOpacity": {"value": 1}
        },
        "hover": {
          "fillOpacity": {"value": 0.5}
        }
      },
      "transform": [
        {
          "type": "wordcloud",
          "size": [800, 400],
          "text": {"field": "key"},
          "rotate": {"field": "datum.angle"},
          "font": "Helvetica Neue, Arial",
          "fontSize": {"field": "doc_count"},
          "fontWeight": {"field": "datum.weight"},
          "fontSizeRange": [12, 56],
          "padding": 2
        }
      ]
    }
  ]
}

```

![vega1](https://us1.discourse-cdn.com/elastic/original/3X/c/8/c86e5ef7d5672f256d9b268d477fed6b91eff739.jpeg)

---

<div class="post-metadata">

**Author:** ![jen-huang](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/jen-huang/32/74327_2.png) [@jen-huang](https://discuss.elastic.co/u/jen-huang)\
**Post date:** [July 30, 2019, 8:52pm UTC](https://discuss.elastic.co/t/vega-not-rendering-word-cloud/192793/2 "2019-07-30T20:52:59Z")

</div>

Hi, can you please follow the steps here so that we have some more information about your data? [https://gist.github.com/nyurik/736c34970ba3c32f3fe3d45d66719b3e](https://gist.github.com/nyurik/736c34970ba3c32f3fe3d45d66719b3e)

---

<div class="post-metadata">

**Author:** ![jen-huang](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/jen-huang/32/74327_2.png) [@jen-huang](https://discuss.elastic.co/u/jen-huang)\
**Post date:** [July 30, 2019, 9:10pm UTC](https://discuss.elastic.co/t/vega-not-rendering-word-cloud/192793/3 "2019-07-30T21:10:52Z")

</div>

Looking at this closer, I have a couple of suggestions:

- Add `format: {property: "aggregations.wordcloud.buckets"}`, similar to [this example](https://github.com/nyurik/kibana-vega-vis/blob/master/examples/logstash/logstash-geosrc-map-with-destinations.hjson#L69)

- Change or remove the transform that includes `if(datum.text=='VEGA', 600, 300)`. Your result only has `key` and `doc_count`, so the expression should be `datum.key` not `datum.text`.

- In these two expressions: `"rotate": {"field": "datum.angle"}` and `"fontWeight": {"field": "datum.weight"}`, field automatically prepends `datum`, so it's not necessary to add that. You can just change these values to `"field": "angle"` for example. **Or** you can use signal notation, but that only makes sense if you were creating an expression with those fields, such as `"rotate": {"signal": "datum.angle * 2"}`.

---

<div class="post-metadata">

**Author:** ![crazyphil](https://avatars.discourse-cdn.com/v4/letter/c/9f8e36/32.png) [@crazyphil](https://discuss.elastic.co/u/crazyphil)\
**Post date:** [July 31, 2019, 12:08pm UTC](https://discuss.elastic.co/t/vega-not-rendering-word-cloud/192793/4 "2019-07-31T12:08:02Z")

</div>

Ok - after reviewing your suggestions here's what I figured out:

1. Adding a "title" field can completely destroy the word cloud's ability to function (may have something to do with autosize/fit)
2. In the transform section I needed "datum.angle", "datum.weight" AND "datum.doc\_count" to make it work
3. The best number of buckets seems to be between 50 and 75, otherwise the word cloud becomes stacked on top of itself
4. The format property is required to make the data show (I think I finally understand what format does - for others having similar issues - format "points" Vega at the table of data it needs to work - so from a json perspective the "aggs" field does not tell Vega enough to print the data)

Thanks for your help Jen!

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [August 28, 2019, 12:08pm UTC](https://discuss.elastic.co/t/vega-not-rendering-word-cloud/192793/5 "2019-08-28T12:08:06Z")

</div>

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.