Appearance

On this page

Charts > Word cloud ​

Visual representation of text data where words are displayed in varying sizes based on their frequency or importance, typically used to highlight key themes or concepts within the text.

The Chart ​

Actual answers from respondents
Download example CSV
Copy HTML

Playground ​

Style

The range of font size to use
Text color
Highlight color
The space between words

Usage Example (with tooltip built into the component) ​

vue
<template>
  <div class="my-3">
    <WordCloudContext :data="processedWords" />
  </div>
</template>

<script setup>
const data = ref([])
const csvData = ref([])

processedData() {
     return data.value
       .filter((e) => e.keyword)
       .map((e) => ({
         ...e,
         id: +e.id,
         keyword: e.keyword.split(",").map((e) => e.trim()),
         task: (e.task || e.role).trim()[0].toUpperCase() + (e.task || e.role).trim().slice(1),
       }));
   },
</script>

Component API ​

The word cloud is built with SVG and d3. The words are placed using a layout function from the d3-cloud library.

Data ​

js
[
  { name: "hello", value: 1 },
  { name: "world", value: 3 },
  ...
]

Props ​

NameDefaultDescriptionType
data[]The wordsArray
fontSize[14, 48]The min and max font size to useArray
colorblackThe text colorString
highlightColorsalmonThe color to use for the highlighted wordString
highlightednullThe word to highlightString
padding6The space between wordsNumber

Events ​

NameArgumentDescription
@select{ target, data }Emitted when word is clicked
@hover{ target, data } | nullEmitted when word is hovered

Dependencies ​

  • d3
  • d3-cloud