Word Cloud

Write and render word clouds.

This component is using D3 and d3-cloud to render these.

Table of contents

Showcase

How the Word Cloud Generator Works The layout algorithm for positioning words without overlap is available on GitHub under an open source license as d3-cloud. Note that this is the only the layout algorithm and any code for converting text into words and rendering the final output requires additional development.

Installation

This component could be added to your web application using the following methods.

Using from a CDN

It's recommended to use unpkg to use the DeckDeckGo word cloud component from a CDN. To do so, add the following include script in the main HTML file of your project:

<script type="module" src="https://unpkg.com/@deckdeckgo/word-cloud@latest/dist/deckdeckgo-word-cloud/deckdeckgo-word-cloud.esm.js"></script>

Install from NPM

Install it in your project from npm using the following command:

npm install @deckdeckgo/word-cloud

Framework integration

The Stencil documentation provide examples of framework integration for Angular, React, Vue and Ember.

That being said, commonly, you might either import or load it:

Import

import '@deckdeckgo/word-cloud';

Loader

import { defineCustomElements as deckDeckGoElement } from '@deckdeckgo/word-cloud/dist/loader'; deckDeckGoElement();

Usage

The "Word Cloud" Web Component could be integrated using the tag <deckgo-word-cloud/>.

<deckgo-word-cloud> <code slot="words"> Each Word entered it will become part of the cloud </code> </deckgo-word-cloud>

Becomes editable by setting the "editable" property to "true".

<deckgo-word-cloud editable="true"> <code slot="words"></code> </deckgo-word-cloud>

Slots

The words have to be provided using the slot words.

Attributes

This component offers the following options which could be set using attributes:

AttributeTypeDefaultDescription
editablebooleanfalseTo set the component has being editable (contenteditable will be applied on the slot on click)
marginTopnumber32Margin top in pixels
marginBottomnumber32Margin bottom in pixels
marginLeftnumber32Margin left in pixels
marginRightnumber32Margin right in pixels

Events

The <deckgo-word-cloud/> component triggers the following event.

EventDescriptionType
wordCloudDidChangeEmit the host element when modified.CustomEvent<HTMLElement>

Theming

The following theming options will affect this component if set on its host or parent.

CSS4 variableDefaultNote
--deckgo-word-cloud-empty-text"Click to add your words"Place holder in case editable is set to true