> ## Documentation Index
> Fetch the complete documentation index at: https://docs.omni.co/llms.txt
> Use this file to discover all available pages before exploring further.

<AgentInstructions>

## Submitting Feedback

If you encounter incorrect, outdated, or confusing documentation on this page, submit feedback:

POST https://docs.omni.co/feedback

```json
{
  "path": "/showcase/visualizations/word-cloud",
  "feedback": "Description of the issue"
}
```

Only submit feedback when you have something specific and actionable to report.

</AgentInstructions>

# Word cloud

> The code for these examples can be used in the Markdown visualization to create word cloud. In this example, text is horizontal and loosely spaced.

The presentation is more "festival poster lineup" when sorted by the sizing value, and more "cloudy" when sorted by a different value.

|                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Sorted by sizing value**                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | **Sorted by a different value**                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    |
| <img src="https://mintcdn.com/omni-e7402367/NPCbSR0hOlCzzT5f/images/docs/visualization-and-dashboards/visualization-types/markdown/examples/assets/images/wordcloudA-115a6d68d0ae79868aff53a747aa793f.png?fit=max&auto=format&n=NPCbSR0hOlCzzT5f&q=85&s=4eafe9f4fc7b4425a1b69cbee369935f" alt="" width="1062" height="620" data-path="images/docs/visualization-and-dashboards/visualization-types/markdown/examples/assets/images/wordcloudA-115a6d68d0ae79868aff53a747aa793f.png" /> | <img src="https://mintcdn.com/omni-e7402367/NPCbSR0hOlCzzT5f/images/docs/visualization-and-dashboards/visualization-types/markdown/examples/assets/images/wordcloudB-694ee9abd0344b17a7b06a6e7190e38b.png?fit=max&auto=format&n=NPCbSR0hOlCzzT5f&q=85&s=e1700abf99eb78c636959741a83789eb" alt="" width="1062" height="620" data-path="images/docs/visualization-and-dashboards/visualization-types/markdown/examples/assets/images/wordcloudB-694ee9abd0344b17a7b06a6e7190e38b.png" /> |

## Example code

Fonts are clamped between `--min-font-size` and `--max-font-size`. If you use container query units (cqw) for the max font size, the type will adjust to the width of the dashboard tile. Note that the max font size is a bit of a "magic number" meaning you'll have to adjust it based on the length of the words in your data set, the number of words in the results, and the desired size of the tile. The values in the example below were selected for this particular data set.

Example query showing calculation for percentage sizing and an example calculation for determining text color:

<img src="https://mintcdn.com/omni-e7402367/NPCbSR0hOlCzzT5f/images/docs/visualization-and-dashboards/visualization-types/markdown/examples/assets/images/wordcloud-results-f65807d3d8960bd0e2ceb61eac52f747.png?fit=max&auto=format&n=NPCbSR0hOlCzzT5f&q=85&s=fdf374d97871ccb8adc3fb1f4bcc837f" alt="" width="1286" height="648" data-path="images/docs/visualization-and-dashboards/visualization-types/markdown/examples/assets/images/wordcloud-results-f65807d3d8960bd0e2ceb61eac52f747.png" />

```html expandable theme={null}
<style>
.sky {
  --min-font-size: 10px; /* smallest text size */
  --max-font-size: 17cqw; /* biggest text sizes based on tile width */
  container-type: size;
  container-name: sky;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.clouds {
  text-align: center;
  display: flex;
  gap: 0;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  font-size: var(--max-font-size);
}
.cloud {
  display: inline-block;
  padding-inline: 0.25em;
  padding-block: 0;
  margin: 0;
  vertical-align: center;
  white-space: nowrap;
}
.cloud.yes { color: darkmagenta; }
.cloud.no { color: magenta; }

</style>
<article class="sky">
  <div class="clouds">
  {{#result}}
    <p class="cloud {{calc_2.value_static}}" style="font-size: clamp(var(--min-font-size), calc(1em * {{calc_3.value_static}}), 1em); line-height: 1;">{{users.state.value}}</p>
  {{/result}}
  </div>
</article>
```