# Vega kibana tag cloud

**URL:** <https://discuss.elastic.co/t/vega-kibana-tag-cloud/326265>\
**Category:** Kibana\
**Tags:** vega\
**Created:** [February 23, 2023, 6:43am UTC](https://discuss.elastic.co/t/vega-kibana-tag-cloud/326265 "2023-02-23T06:43:09Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![uae\_user](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/uae_user/32/100629_2.png) [@uae\_user](https://discuss.elastic.co/u/uae_user)\
**Post date:** [February 23, 2023, 6:43am UTC](https://discuss.elastic.co/t/vega-kibana-tag-cloud/326265/1 "2023-02-23T06:43:09Z")

</div>

Hi,

I'm trying to build a tag cloud using custom visualization, I tried to follow Vega tag cloud format and replaced the value part with url , I'm sure about the query as I tried it on the dev tool and it worked. '  
I'm getting the following error : \*\*\* Cannot read properties of undefined (reading 'toUpperCase')\*\*  
I'm using this code

```auto
{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "description": "A word cloud visualization depicting Vega research paper abstracts.",
  "width": 800,
  "height": 400,
  "padding": 0,

  "data": [
    {
      "name": "table",
      "url": {
        %context%: true,
         %timefield%: "time",
         index: test_index,
         body: {
             "size": 0,
              "aggs": {
                "messages": {
                  "terms": {
                    "field": "text"
                  }
                }
              }
         }

      }
      
      ,
      "transform": [
        {
          "type": "countpattern",
          "field": "data",
          "case": "upper",
          "pattern": "[\\w']{3,}",
          "stopwords": "(i|me|my|myself)"
        },
        {
          "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": "text"},
      "range": ["#d5a928", "#652c90", "#939597"]
    }
  ],

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

```

I couldn't find any example using elastiscearch index for vega custom visualization.  
Appreciate your help

---

<div class="post-metadata">

**Author:** ![Marco\_Liberati](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/marco_liberati/32/82953_2.png) [@Marco\_Liberati](https://discuss.elastic.co/u/Marco_Liberati)\
**Post date:** [February 23, 2023, 1:50pm UTC](https://discuss.elastic.co/t/vega-kibana-tag-cloud/326265/2 "2023-02-23T13:50:24Z")

</div>

I think what is missing in the spec above is to instruct Vega where to look for the data with the right path:

```auto
{
  "$schema": "https://vega.github.io/schema/vega/v5.json",
  "description": "A word cloud visualization depicting Vega research paper abstracts.",
  "width": 800,
  "height": 400,
  "padding": 0,

  "data": [
    {
      "name": "table",
      "url": {
        %context%: true,
         %timefield%: "time",
         index: test_index,
         body: {
             "size": 0,
              "aggs": {
                "messages": {
                  "terms": {
                    "field": "text"
                  }
                }
              }
         }
      }
      format: {
        property: hits.hits // tell Vega to navigate the response to this path
      }
      ,
      "transform": [
        {
          "type": "countpattern",
          "field": "_source.data", // the field can be found in the _source object
          "case": "upper",
          "pattern": "[\\w']{3,}",
          "stopwords": "(i|me|my|myself)"
        },
        {
          "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": "text"},
      "range": ["#d5a928", "#652c90", "#939597"]
    }
  ],

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

```

---

<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:** [March 23, 2023, 1:50pm UTC](https://discuss.elastic.co/t/vega-kibana-tag-cloud/326265/3 "2023-03-23T13:50:26Z")

</div>

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