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.
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.
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.
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."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')".
A complete page. Save it as an .html file and open it in a browser.
Paste this into an AI coding assistant to build the chart from scratch. More in amCharts & AI.
// Create root element
// https://www.amcharts.com/docs/v5/getting-started/#Root_element
var root = am5.Root.new("chartdiv");
// Set themes
// https://www.amcharts.com/docs/v5/concepts/themes/
root.setThemes([
am5themes_Animated.new(root),
am5themes_Responsive.new(root)
]);
// Create a container for the series
// https://www.amcharts.com/docs/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"
}
}
}
}
}
}
}
]
}
