Changing Data of Word Cloud

A word cloud with live data: every five seconds each language gets a new weight, and the words grow, shrink and move to new places. It starts from the share of developers using each language in the 2021 Stack Overflow survey.

Try it:
Watch: new data every 5 seconds
Click, then scroll to zoom

Get the code JavaScript React, Vue, Angular, Svelte JSON

About this chart

When the cloud should move

A cloud that redraws itself suits values that change while people watch: trending topics, votes coming in, the busiest product pages. The words glide to their new places, so a word that suddenly grows catches the eye.

Good for

Trending topics and live polls
Wall screens and event displays
Keywords from a live feed

Think twice when

Comparing values: the layout changes too often to read them
Fast updates: give each layout a few seconds
Values that barely change: a still cloud is calmer

For developers

Get the code.

Built with amCharts 5, a JavaScript library. The JavaScript includes your theme and renderer (canvas or SVG); the JSON also follows the changes you make with the controls.

Docs:Word cloud Word cloud layout Data

For projects that use npm: npm install @amcharts/amcharts5. See Getting started. The same chart as a JSON config. Chart Maker reads and writes this format, the library's JSON parser turns it into a chart, and the <am5-chart> element puts it on a page with no code.
How it reads: "type" is the class to create and "settings" what you would pass to its new() in code; "properties" fill in its parts, lists such as series and axes or templates such as columns.template; "refs" holds objects used in more than one place ("#series-0" stands for the one named series-0); a string starting with "@" takes a value from another object, such as "@series.get('fill')".

// Create root element
// https://docs.amcharts.com/v5/getting-started/#root-element
var root = am5.Root.new("chartdiv");

// Set themes
// https://docs.amcharts.com/v5/concepts/themes/
root.setThemes([
  am5themes_Animated.new(root),
  am5themes_Responsive.new(root)
]);

// Create a container for the series
// https://docs.amcharts.com/v5/charts/word-cloud/
// holds the word cloud and zooms it
var chart = root.container.children.push(am5.SerialChartContainer.new(root, {}));

// Zoom with the mouse wheel or by pinching, and with the zoom buttons
chart.zoomableContainer.setAll({
  wheelable: true,
  pinchZoom: true
});

var zoomTools = chart.set("zoomTools", am5.ZoomTools.new(root, {}));

// Add series
var series = chart.series.push(am5wc.WordCloud.new(root, {
  categoryField: "tag",
  valueField: "weight",
  maxFontSize: am5.percent(15) // the biggest word's size, 15% of the chart's smaller side
}));

// Configure labels
series.labels.template.setAll({
  fontFamily: "Courier New" // a monospaced font for every word
});

// every 5 seconds each word gets a random weight; font sizes follow valueWorking, so both are set
setInterval(function() {
  am5.array.each(series.dataItems, function(dataItem) {
    var value = Math.random() * 65;        // a random weight up to 65...
    value = value - Math.random() * value; // ...more often a small one
    dataItem.set("value", value);
    dataItem.set("valueWorking", value);
  })
}, 5000)

// Data from:
// https://insights.stackoverflow.com/survey/2021#section-most-popular-technologies-programming-scripting-and-markup-languages
series.data.setAll([
  { tag: "JavaScript", weight: 64.96 },
  { tag: "HTML/CSS", weight: 56.07 },
  { tag: "Python", weight: 48.24 },
  { tag: "SQL", weight: 47.08 },
  { tag: "Java", weight: 35.35 },
  { tag: "Node.js", weight: 33.91 },
  { tag: "TypeScript", weight: 30.19 },
  { tag: "C#", weight: 27.86 },
  { tag: "Bash/Shell", weight: 27.13 },
  { tag: "C++", weight: 24.31 },
  { tag: "PHP", weight: 21.98 },
  { tag: "C", weight: 21.01 },
  { tag: "PowerShell", weight: 10.75 },
  { tag: "Go", weight: 9.55 },
  { tag: "Kotlin", weight: 8.32 },
  { tag: "Rust", weight: 7.03 },
  { tag: "Ruby", weight: 6.75 },
  { tag: "Dart", weight: 6.02 },
  { tag: "Assembly", weight: 5.61 },
  { tag: "Swift", weight: 5.1 },
  { tag: "R", weight: 5.07 },
  { tag: "VBA", weight: 4.66 },
  { tag: "Matlab", weight: 4.66 },
  { tag: "Groovy", weight: 3.01 },
  { tag: "Objective-C", weight: 2.8 },
  { tag: "Scala", weight: 2.6 },
  { tag: "Perl", weight: 2.46 },
  { tag: "Haskell", weight: 2.12 },
  { tag: "Delphi", weight: 2.1 },
  { tag: "Clojure", weight: 1.88 },
  { tag: "Elixir", weight: 1.74 },
  { tag: "LISP", weight: 1.33 },
  { tag: "Julia", weight: 1.29 },
  { tag: "F#", weight: 0.97 },
  { tag: "Erlang", weight: 0.79 },
  { tag: "APL", weight: 0.65 },
  { tag: "Crystal", weight: 0.56 },
  { tag: "COBOL", weight: 0.53 },
]);

{
  "type": "SerialChartContainer",
  "settings": {
    "zoomTools": {
      "type": "ZoomTools"
    }
  },
  "properties": {
    "series": [
      "#series-0"
    ],
    "zoomableContainer": {
      "settings": {
        "wheelable": true,
        "pinchZoom": true
      }
    }
  },
  "refs": [
    {
      "data-0": [
        {
          "tag": "JavaScript",
          "weight": 64.96
        },
        {
          "tag": "HTML/CSS",
          "weight": 56.07
        },
        {
          "tag": "Python",
          "weight": 48.24
        },
        {
          "tag": "SQL",
          "weight": 47.08
        },
        {
          "tag": "Java",
          "weight": 35.35
        },
        {
          "tag": "Node.js",
          "weight": 33.91
        },
        {
          "tag": "TypeScript",
          "weight": 30.19
        },
        {
          "tag": "C#",
          "weight": 27.86
        },
        {
          "tag": "Bash/Shell",
          "weight": 27.13
        },
        {
          "tag": "C++",
          "weight": 24.31
        },
        {
          "tag": "PHP",
          "weight": 21.98
        },
        {
          "tag": "C",
          "weight": 21.01
        },
        {
          "tag": "PowerShell",
          "weight": 10.75
        },
        {
          "tag": "Go",
          "weight": 9.55
        },
        {
          "tag": "Kotlin",
          "weight": 8.32
        },
        {
          "tag": "Rust",
          "weight": 7.03
        },
        {
          "tag": "Ruby",
          "weight": 6.75
        },
        {
          "tag": "Dart",
          "weight": 6.02
        },
        {
          "tag": "Assembly",
          "weight": 5.61
        },
        {
          "tag": "Swift",
          "weight": 5.1
        },
        {
          "tag": "R",
          "weight": 5.07
        },
        {
          "tag": "VBA",
          "weight": 4.66
        },
        {
          "tag": "Matlab",
          "weight": 4.66
        },
        {
          "tag": "Groovy",
          "weight": 3.01
        },
        {
          "tag": "Objective-C",
          "weight": 2.8
        },
        {
          "tag": "Scala",
          "weight": 2.6
        },
        {
          "tag": "Perl",
          "weight": 2.46
        },
        {
          "tag": "Haskell",
          "weight": 2.12
        },
        {
          "tag": "Delphi",
          "weight": 2.1
        },
        {
          "tag": "Clojure",
          "weight": 1.88
        },
        {
          "tag": "Elixir",
          "weight": 1.74
        },
        {
          "tag": "LISP",
          "weight": 1.33
        },
        {
          "tag": "Julia",
          "weight": 1.29
        },
        {
          "tag": "F#",
          "weight": 0.97
        },
        {
          "tag": "Erlang",
          "weight": 0.79
        },
        {
          "tag": "APL",
          "weight": 0.65
        },
        {
          "tag": "Crystal",
          "weight": 0.56
        },
        {
          "tag": "COBOL",
          "weight": 0.53
        }
      ]
    },
    {
      "series-0": {
        "type": "WordCloud",
        "settings": {
          "categoryField": "tag",
          "valueField": "weight",
          "maxFontSize": {
            "type": "Percent",
            "value": 15
          }
        },
        "properties": {
          "data": "#data-0",
          "labels": {
            "properties": {
              "template": {
                "settings": {
                  "fontFamily": "Courier New"
                }
              }
            }
          }
        }
      }
    }
  ]
}

More Miscellaneous demos.

All Miscellaneous demos All demos

Word Cloud