Skip to main content
SimilarExport ZIP
100%

Word cloud comparison

✓ Published0🌍 Public
KKcnarf
Last edited Dec 3, 2018
Created on Apr 24, 2017

This example compares two word clouds of hotel reviews for Amsterdam and London, using animation to transition between them while keeping word positions stable. The layout is computed once with the d3.layout.cloud plugin, using each word’s maximum weight, then per-city font size and opacity are applied, making absent words fade out. A dropdown menu triggers the update, and the SVG text elements can be panned and zoomed via mouse, with color indicating sentiment polarity. Data comes from the Tour-Pedia API via the OpeNER sentiment pipeline.

AI-generated description

This block experiments a way to compare two word clouds dealing of the same subject area.

In this experiment, comparison emerge from animation. The chalenge is to preserve the location of each word, in order to make the animation not disruptive. To do so, the overall placement is done thanks to the d3.layout.cloud plugin (by Jason Davies), where each word's weight is the maximum possible weight. Then, word cloud specificities (here, depending on the selected city) come by applying the adequate font size and opacity (if a word is not defined for a city, it disappears).

This technique works fine, but:

  • it can lead to some overlapping (cf. around Good word),
  • it can produce some sparsed word cloud when many words disappear;

Cloud storm is another technique to compare word clouds.

This experimentation is highly inspired from Nitaku's blocks:

** original README **

This word cloud shows polarized words from reviews of accommodations. Bigger words were identified more often by sentiment analyzers. Color represents polarity (green is positive, red is negative). Use the mouse to pan and zoom.

Data is obtained from the Tour-Pedia APIs, that in turn get their input from the sentiment analysis pipeline of the OpeNER project.

The implementation makes use of d3.layout.cloud by Jason Davies.

mit Licensed

Similar vizzes

Loading thumbnail…

OpeNER - Opinion targets (Amsterdam)

This interactive word cloud visualizes opinion targets extracted from Amsterdam accommodation reviews. Word size indicates frequency of mention, while color encodes aggregated sentiment, ranging from green (positive) to red (negative) with yellow as neutral. Users can pan and zoom with the mouse. The data comes from the Tour-Pedia APIs, processed by the OpeNER sentiment analysis pipeline. The visualization uses d3.v3 with Jason Davies's d3.layout.cloud for the word layout, rendering text via SVG and canvas with animation.

MMatteoTomassetti
76% match
Loading thumbnail…

Word Cloud-3

This example displays a word cloud visualization using the d3.layout.cloud plugin, which arranges words from a TSV data file based on their frequency values. The code filters the dataset, maps each entry to a text-size pair, and uses the cloud layout with custom rotation, padding, and the Impact font. Words are rendered as SVG text elements with colors from a category20c scale, appearing animated as the layout algorithm places them across a 500×500 canvas area.

0007ebey
73% match
Loading thumbnail…

Test

This example demonstrates a word cloud layout algorithm that arranges words at varying font sizes and orientations without overlap. The visualization uses the d3-cloud library with d3-dispatch to place words in a spiral pattern, while d3-selection renders the resulting text elements as SVG. The code includes both browser-based and Node.js implementations, with the Node version using the canvas package to compute word placements. The layout is animated through a step timer that processes words incrementally, and the rendering displays words in the Impact font with random sizes between 10 and 100 pixels.

TTasapornV
71% match
Loading thumbnail…

Word Cloud

A word cloud visualizes a hardcoded list of words (e.g., “Hello,” “Coding,” “Van”) from `words.js` and `data.csv`. The layout uses the `d3.layout.cloud` library, which employs an Archimedean spiral and collision detection to position words. Rendered as SVG and canvas, the words appear in steelblue with a text-anchor, and the animation (via `timeInterval` and `dispatch`) progressively places each term. The `index.js` code uses canvas `getImageData` for font metrics and a bitmask board for collision checks.

BBaraneedharan N M
71% match
Loading thumbnail…

Word Cloud

This word cloud uses D3’s `d3.layout.cloud` to position words by frequency, with font size scaled by each term’s count. The layout runs inside a force simulation, and the rendering draws the words onto an SVG canvas using `d3.select` and `text` elements. The visualization reads a local JSON dataset of words and counts, then animates the cloud’s appearance with a smooth rotation and fade-in transition. Colors are applied from a categorical palette to differentiate word groups, while the overall layout adapts to the container’s size.

SSree Likhith
70% match
Loading thumbnail…

Word Cloud Example

This example presents a word cloud visualization that arranges text tags by frequency, with larger words representing higher values in the input data. The layout algorithm, based on Jason Davies’s implementation, places words using an Archimedean spiral to avoid collisions. The code uses the `d3.layout.cloud` API with `.size()`, `.padding()`, `.rotate()`, and `.font()` configurations. After layout, the `d3.select("body").append("svg")` chain renders the results, applying font size and family via inline styles, with animated placement driven by the `setInterval` timer in the cloud layout process.

Kkaviya-ds
70% match
Loading thumbnail…

Word Cloud Example

This example shows a word cloud visualization that displays frequency-weighted terms from JSON datasets, with buttons to toggle between family names and first names. The code uses D3 v3’s `d3.layout.cloud` plugin to arrange words in a spiral layout, scaling font size with `d3.scale.linear` based on each term’s count. Rendering occurs as SVG text elements styled with Impact font and a categorical color scale, while a setTimeout-driven animation progressively places words until the layout completes.

Yyili222
69% match
Loading thumbnail…

Word Cloud

This example shows a static word cloud built from a small set of predefined words, including "Hello," "Coding," and "Lovely Day." It uses the d3.layout.cloud API to compute word positions and angles, applying a fixed -45-degree rotation to every word. The words are rendered as SVG text elements, with a font size of 60 pixels and a steelblue fill. The data comes from a local `words.js` module, and the layout runs once, drawing all text at the center of the canvas.

BBaraneedharan N M
69% match