Word cloud

The code for this example 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

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:

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