Tag Cloud for RAWGraphs

This custom chart is intended to be used inside the RAWGraphs app.

What are Tag Clouds

Tag (or word) clouds visualize how prominent each term is by scaling labels according to a numeric value and, optionally, coloring them. This implementation lets you organize terms into series (shown as a grid, vertical stack, or horizontal row), control sizing and padding, and color by an additional dimension.

Installation

• Download the latest release asset (index.umd.js) from the side panel on this page or from the Releases tab.
• In RAWGraphs load a dataset. You can try the sample tags file.
• In section 2. Choose a chart, scroll down and click Load your chart.
• Select the Load from file tab, then drag and drop the downloaded file.
• Click Load your chart, acknowledge the pop-up about external code, and continue.
• The Tag Cloud chart will now be available in your chart list.

Tutorial

Build a multi-series tag cloud using the sample animals dataset.

Dataset

Load the dataset at example/datasets/animals.tsv. Columns: name, size, category, color.

Chart Selection

Choose Tag Cloud. If you do not see it, follow the steps in Installation.

Mapping

Drag and drop dimensions as follows:

• name → tag
• size → size
• category → Series
• (optional) color → Color if you want to assign a color per each single value in color column

Customize

Key visual options you can tune in RAWGraphs:

• Chart: adjust Max tag size, Min tag size, and Padding between tags to control sizing; set Sort tags by to organize labels by value or name.
• Series: pick Series disposition (Grid, Vertical, or Horizontal), toggle Use same scale to keep font sizes consistent across series, and Show series titles for headers.
• Color: choose a palette in Color scale to color tags by the mapped dimension.
• Labels: switch between label styles for tag names and values.

Contribute

If you'd like to contribute, follow the RAWGraphs custom template guide.

Edit the code

Install dependencies

npm install

Run Sandbox

Modify the chart locally with live reload.

npm run sandbox

Open http://localhost:9000 to view the sandbox.

Build

Create the bundle to load in RAWGraphs.

npm run build

The lib/index.umd.js file is the bundle you can load into RAWGraphs.

Credits

Original code by Michele Mauri