DEV Community

Cover image for Nobel Laureates’ Countries, or Creating a Word Cloud with JS
AnyChart profile image andreykh
andreykh for AnyChart

Posted on • Edited on • Originally published at anychart.com

Nobel Laureates’ Countries, or Creating a Word Cloud with JS

#datascience #javascript #webdev #beginners

The Nobel Prize 2023 announcements are just around the corner, scheduled from October 2 to 9. Recently, I stumbled upon this news, sparking my interest in Nobel laureates and their countries of origin.

This curiosity led me to the comprehensive list of Nobel Prize winners on Britannica, which I transformed into an interactive tag cloud (or word cloud) using JavaScript, providing an elegant means to explore and uncover the countries with the highest number of Nobel laureates throughout history.

During this process, it dawned on me that this visualization could serve as an excellent illustrative example for a tutorial on creating interactive JS-based tag clouds. So, if you share my curiosity about Nobel laureates by country, you're in for a treat right below! and if you're eager to learn how I brought this tag cloud to life — and, therefore, how you can create your own — read on!

Tag Cloud of Nobel Laureates by Country

Nobel Laureates by Country in a Tag Cloud Explore the interactive version on CodePen [or on Playground].

A. Creating a Basic JS Tag Cloud

At first, I coded a basic JavaScript tag cloud. If you have experience creating JS charts, you already have an understanding of how it works. But in case this is your first time, let’s start with the basics. The process could be divided into four fundamental steps:

  1. Creating a web container
  2. Including JavaScript files
  3. Adding data
  4. Writing some JS charting code

1. Creating a Web Container

I built a basic web page in HTML. There, I added a <div> element and gave it a unique ID — it’s the place for the tag cloud to be drawn. I wanted the chart to fill the entire page, so I added the appropriate CSS code using the <style> tag; of course, you can set that to your liking.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>JavaScript Tag Cloud</title>
    <style type="text/css">      
      html, body, #container { 
        width: 100%; 
        height: 100%; 
        margin: 0; 
        padding: 0; 
      } 
    </style>
  </head>
  <body>
    <div id="container"></div>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

2. Including JavaScript Files

Once I completed a basic HTML page layout, I included the necessary JavaScript files in the <head> section. There are many JavaScript charting libraries out there that can help visualize data with fewer efforts than would be needed otherwise. I opted for AnyChart, which supports tag clouds out of the box, provides detailed docs, and is free for not-for-profit use; anyway, it’s just an example and the basics remain the same with other libraries. So, I added the required scripts.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>JavaScript Tag Cloud</title>
    <script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-core.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-tag-cloud.min.js"></script>
    <style type="text/css">      
      html, body, #container { 
        width: 100%; 
        height: 100%; 
        margin: 0; 
        padding: 0; 
      } 
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script>
      // All the code for the tag cloud will come here.
    </script>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

3. Adding Data

For this tag cloud, I took data from Britannica. Four people won the Nobel Prize several times: Frederick Sanger, Linus Pauling, John Bardeen, and Marie Curie; I counted them only once. Some laureates belong to two countries; I counted them for both. The data needed some modifications before I could feed it into the word cloud. I converted it into an array of objects with four properties:

  • x — for the name of the country
  • value — for the number of Nobel laureates from that country
  • category — for the continent
  • URL — containing a link to Wikipedia for further information. (Note: Some countries that existed in the early 20th century are now other countries; Britannica stores the original country names, which is not always the case on Wikipedia, so total counts by country are a little different.) 
var data = [
  { "x": "Alsace", "value": 1, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Germany"},
  { "x": "Austria", "value": 12, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Austria"},
  { "x": "Austria-Hungary", "value": 3, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Austria"},
  { "x": "Australia", "value": 8, "category": "Australia", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Australia"},
  { "x": "Argentina", "value": 5, "category": "South America", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Argentina"},
  { "x": "Bangladesh", "value": 1, "category": "Asia", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Bangladesh"},
  { "x": "Belarus", "value": 2, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Belarus"},
  { "x": "Belgium", "value": 9, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Belgium"},
  { "x": "Bulgaria", "value": 1, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Bulgaria"},
  { "x": "Canada", "value": 15, "category": "North America", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Canada"},
  { "x": "Chile", "value": 2, "category": "South America", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Chile"},
  { "x": "China", "value": 5, "category": "Asia", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#China,_(People's_Republic_of_China)"},
  { "x": "Colombia", "value": 2, "category": "South America", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Colombia"},
  { "x": "Costa Rica", "value": 1, "category": "North America", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Costa_Rica"},
  { "x": "Cyprus", "value": 1, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Cyprus"},
  { "x": "Czechoslovakia", "value": 2, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Czech_Republic"},
  { "x": "Democratic Republic of the Congo", "value": 1, "category": "Africa", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Congo,_Democratic_Republic"},
  { "x": "Denmark", "value": 13, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Denmark"},
  { "x": "Egypt", "value": 4, "category": "Africa", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Egypt"},
  { "x": "Ethiopia", "value": 1, "category": "Africa", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Ethiopia"},
  { "x": "Finland", "value": 4, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Finland"},
  { "x": "France", "value": 60, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#France"},
  { "x": "Germany", "value": 61, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Germany"},
  { "x": "Ghana", "value": 1, "category": "Africa", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Ghana"},
  { "x": "Greece", "value": 2, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Greece"},
  { "x": "Guatemala", "value": 2, "category": "North America", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Guatemala"},
  { "x": "Hungary", "value": 3, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Hungary"},
  { "x": "Iceland", "value": 1, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Iceland"},
  { "x": "India", "value": 5, "category": "Asia", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#India"},
  { "x": "Iran", "value": 1, "category": "Asia", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Iran"},
  { "x": "Iraq", "value": 1, "category": "Asia", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Iraq"},
  { "x": "Ireland", "value": 7, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Ireland"},
  { "x": "Israel", "value": 13, "category": "Asia", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Israel"},
  { "x": "Italy", "value": 15, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Italy"},
  { "x": "Japan", "value": 25, "category": "Asia", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Japan"},
  { "x": "Kenya", "value": 1, "category": "Africa", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Kenya"},
  { "x": "Liberia", "value": 2, "category": "Africa", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Liberia"},
  { "x": "Luxembourg", "value": 1, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Luxembourg"},
  { "x": "Mexico", "value": 2, "category": "North America", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Mexico"},
  { "x": "Myanmar", "value": 1, "category": "Asia", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Myanmar"},
  { "x": "Netherlands", "value": 19, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Netherlands"},
  { "x": "Nigeria", "value": 1, "category": "Africa", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Nigeria"},
  { "x": "Norway", "value": 11, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Norway"},
  { "x": "Northern Ireland", "value": 4, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Ireland"},
  { "x": "Pakistan", "value": 2, "category": "Asia", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Pakistan"},    
  { "x": "Peru", "value": 1, "category": "South America", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Peru"},
  { "x": "Philippines", "value": 1, "category": "Asia", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Philippines"},
  { "x": "Poland", "value": 5, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Poland"},
  { "x": "Portugal", "value": 2, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Portugal"},
  { "x": "Russia", "value": 7, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Russia_and_Soviet_Union"},
  { "x": "Spain", "value": 6, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Spain"},
  { "x": "South Africa", "value": 7, "category": "Africa", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#South_Africa"},
  { "x": "South Korea", "value": 1, "category": "Asia", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#South_Korea"},
  { "x": "St. Lucia", "value": 1, "category": "North America", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Saint_Lucia"},
  { "x": "Sweden", "value": 34, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Sweden"},
  { "x": "Switzerland", "value": 24, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Switzerland"},
  { "x": "Tanzania", "value": 1, "category": "Africa", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Tanzania"},
  { "x": "Tibet", "value": 1, "category": "Asia", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Tibet"},
  { "x": "Timorese", "value": 2, "category": "Asia", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#East_Timor"},
  { "x": "Trinidad", "value": 1, "category": "North America", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Trinidad_and_Tobago"},
  { "x": "Turkey", "value": 2, "category": "Asia", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Turkey"},
  { "x": "Ukraine", "value": 1, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Ukraine"},
  { "x": "United Kingdom", "value": 119, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#United_Kingdom"},
  { "x": "United States", "value": 393, "category": "North America", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#United_States"},
  { "x": "U.S.S.R.", "value": 15, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Russia_and_Soviet_Union"},
  { "x": "Vietnam", "value": 1, "category": "Asia", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Vietnam"},
  { "x": "West Germany", "value": 23, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Germany"},
  { "x": "Yemen", "value": 1, "category": "Asia", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Yemen"},
  { "x": "Yugoslavia", "value": 1, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Yugoslavia"}
];
Enter fullscreen mode Exit fullscreen mode

Yup, that’s a lot of countries!

4. Writing Some JS Charting Code

Finally, I added a few lines of JavaScript code to draw the tag cloud itself. It was fairly straightforward. I started writing the anychart.onDocumentReady() function.

<script>
  anychart.onDocumentReady(function () {
    // The tag cloud data and code will be in this section.
  });
</script>
Enter fullscreen mode Exit fullscreen mode

Inside it, I added the data from the previous step, created a tag cloud instance, set the chart title, referenced the container element ID, and drew the resulting tag cloud.

anychart.onDocumentReady(function () {

  // add data (copying from step 3)
  ...

  // create a tag cloud with the added data
  var chart = anychart.tagCloud(data);

  // set the chart title
  chart.title("Nobel Laureates by Country");

  // set the container element id
  chart.container("container");

  // initiate the drawing of the chart
  chart.draw();

});
Enter fullscreen mode Exit fullscreen mode

Here is how the initial tag cloud looked — the interactive version can be found on CodePen [and on Playground]. Also, I have put the entire code below.

initial tag cloud

<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>JavaScript Tag Cloud</title>
    <script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-core.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-tag-cloud.min.js"></script>
    <style type="text/css">      
      html, body, #container { 
        width: 100%; 
        height: 100%; 
        margin: 0; 
        padding: 0; 
      } 
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script>
      anychart.onDocumentReady(function () {
        // add data
        var data = [
          { "x": "Alsace", "value": 1, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Germany"},
          { "x": "Austria", "value": 12, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Austria"},
          { "x": "Austria-Hungary", "value": 3, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Austria"},
          { "x": "Australia", "value": 8, "category": "Australia", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Australia"},
          { "x": "Argentina", "value": 5, "category": "South America", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Argentina"},
          { "x": "Bangladesh", "value": 1, "category": "Asia", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Bangladesh"},
          { "x": "Belarus", "value": 2, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Belarus"},
          { "x": "Belgium", "value": 9, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Belgium"},
          { "x": "Bulgaria", "value": 1, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Bulgaria"},
          { "x": "Canada", "value": 15, "category": "North America", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Canada"},
          { "x": "Chile", "value": 2, "category": "South America", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Chile"},
          { "x": "China", "value": 5, "category": "Asia", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#China,_(People's_Republic_of_China)"},
          { "x": "Colombia", "value": 2, "category": "South America", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Colombia"},
          { "x": "Costa Rica", "value": 1, "category": "North America", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Costa_Rica"},
          { "x": "Cyprus", "value": 1, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Cyprus"},
          { "x": "Czechoslovakia", "value": 2, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Czech_Republic"},
          { "x": "Democratic Republic of the Congo", "value": 1, "category": "Africa", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Congo,_Democratic_Republic"},
          { "x": "Denmark", "value": 13, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Denmark"},
          { "x": "Egypt", "value": 4, "category": "Africa", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Egypt"},
          { "x": "Ethiopia", "value": 1, "category": "Africa", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Ethiopia"},
          { "x": "Finland", "value": 4, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Finland"},
          { "x": "France", "value": 60, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#France"},
          { "x": "Germany", "value": 61, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Germany"},
          { "x": "Ghana", "value": 1, "category": "Africa", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Ghana"},
          { "x": "Greece", "value": 2, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Greece"},
          { "x": "Guatemala", "value": 2, "category": "North America", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Guatemala"},
          { "x": "Hungary", "value": 3, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Hungary"},
          { "x": "Iceland", "value": 1, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Iceland"},
          { "x": "India", "value": 5, "category": "Asia", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#India"},
          { "x": "Iran", "value": 1, "category": "Asia", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Iran"},
          { "x": "Iraq", "value": 1, "category": "Asia", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Iraq"},
          { "x": "Ireland", "value": 7, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Ireland"},
          { "x": "Israel", "value": 13, "category": "Asia", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Israel"},
          { "x": "Italy", "value": 15, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Italy"},
          { "x": "Japan", "value": 25, "category": "Asia", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Japan"},
          { "x": "Kenya", "value": 1, "category": "Africa", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Kenya"},
          { "x": "Liberia", "value": 2, "category": "Africa", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Liberia"},
          { "x": "Luxembourg", "value": 1, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Luxembourg"},
          { "x": "Mexico", "value": 2, "category": "North America", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Mexico"},
          { "x": "Myanmar", "value": 1, "category": "Asia", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Myanmar"},
          { "x": "Netherlands", "value": 19, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Netherlands"},
          { "x": "Nigeria", "value": 1, "category": "Africa", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Nigeria"},
          { "x": "Norway", "value": 11, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Norway"},
          { "x": "Northern Ireland", "value": 4, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Ireland"},
          { "x": "Pakistan", "value": 2, "category": "Asia", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Pakistan"},    
          { "x": "Peru", "value": 1, "category": "South America", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Peru"},
          { "x": "Philippines", "value": 1, "category": "Asia", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Philippines"},
          { "x": "Poland", "value": 5, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Poland"},
          { "x": "Portugal", "value": 2, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Portugal"},
          { "x": "Russia", "value": 7, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Russia_and_Soviet_Union"},
          { "x": "Spain", "value": 6, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Spain"},
          { "x": "South Africa", "value": 7, "category": "Africa", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#South_Africa"},
          { "x": "South Korea", "value": 1, "category": "Asia", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#South_Korea"},
          { "x": "St. Lucia", "value": 1, "category": "North America", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Saint_Lucia"},
          { "x": "Sweden", "value": 34, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Sweden"},
          { "x": "Switzerland", "value": 24, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Switzerland"},
          { "x": "Tanzania", "value": 1, "category": "Africa", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Tanzania"},
          { "x": "Tibet", "value": 1, "category": "Asia", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Tibet"},
          { "x": "Timorese", "value": 2, "category": "Asia", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#East_Timor"},
          { "x": "Trinidad", "value": 1, "category": "North America", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Trinidad_and_Tobago"},
          { "x": "Turkey", "value": 2, "category": "Asia", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Turkey"},
          { "x": "Ukraine", "value": 1, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Ukraine"},
          { "x": "United Kingdom", "value": 119, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#United_Kingdom"},
          { "x": "United States", "value": 393, "category": "North America", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#United_States"},
          { "x": "U.S.S.R.", "value": 15, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Russia_and_Soviet_Union"},
          { "x": "Vietnam", "value": 1, "category": "Asia", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Vietnam"},
          { "x": "West Germany", "value": 23, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Germany"},
          { "x": "Yemen", "value": 1, "category": "Asia", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Yemen"},
          { "x": "Yugoslavia", "value": 1, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Yugoslavia"}
        ];
        // create a tag cloud with the added data
        var chart = anychart.tagCloud(data);
        // set the chart title
        chart.title("Nobel Laureates by Country");
        // set the container element id
        chart.container("container");
        // initiate the drawing of the chart
        chart.draw();
      });
    </script>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

B. Customizing JS Tag Cloud

After getting that basic JavaScript tag cloud, I decided to add some customizations to improve the chart’s view.

1. Modifying the Font

First, I changed the font. For the title customization, I used HTML.

chart
  .title()
  .enabled(true)
  .useHtml(true)
  .text(
    '<span style="font-size: 20px;">Nobel Laureates by Country</span>'
  );
Enter fullscreen mode Exit fullscreen mode

I also adjusted the tags.

chart
  .normal()
  .fontWeight(600)
  .fontVariant('small-caps');
Enter fullscreen mode Exit fullscreen mode

2. Changing the Angle

Second, I changed the way the tags are oriented by setting the angle to zero to make them all displayed horizontally.

chart.angles([0]);
Enter fullscreen mode Exit fullscreen mode

3. Improving the Visual Appearance

Third, I changed the colors and added a color range. I created a color scale using the anychart.scales.ordinalColor() function and passed an array of colors to it. Then I set the color scale to the tag cloud chart and added a color range.

// create and configure a color scale
let customColorScale = anychart.scales.ordinalColor();
customColorScale.colors(['#077fe8', '#1c9447', '#970fff',  '#c47900', '#e80707','#323238']);

// set the color scale as the color scale of the chart
chart.colorScale(customColorScale);

// get the color range
let colorRange = chart.colorRange();
// enable the color range
colorRange
  .enabled(true)
  .colorLineSize(15);
Enter fullscreen mode Exit fullscreen mode

4. Enhancing the Tooltip

Fourth, I improved the tooltip, a hint that shows up when you hover over the words in an interactive tag cloud. I accessed the tooltip() function and used the format() function to change the tooltip content.

chart
  .tooltip()
  .format('Total Nobel Laureates: {%value}\n Continent: {%category}');
Enter fullscreen mode Exit fullscreen mode

5. Adding interactivity With Link Opening

Finally, I decided to add an event listener so that a new page opens up to provide more information when a country is clicked. I used the listen() function to "listen" when one clicks on a country’s tag. When I could access the URL property in the data array and add the window.open() function to open the web page with that URL. I also passed the _blank property to make the URL open in a new tab.

chart.listen("pointClick", function(e){
  var url = e.point.get("url").toString();
  window.open(url, "_blank");
});
Enter fullscreen mode Exit fullscreen mode

After all these customizations, I ended up getting a cool, interactive, JavaScript-based tag cloud demonstrated below.

interactive, JavaScript-based tag cloud

It's the final version of the tag cloud I was satisfied with. Check it out with the full source code on CodePen [and on Playground] and feel free to play around with colors, interactivity, and so on — use all your creativity, and I am sure you will enjoy the process. For your convenience, I am also putting the final JS tag cloud code below.

<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>JavaScript Tag Cloud</title>
    <script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-core.min.js"></script>
    <script src="https://cdn.anychart.com/releases/8.11.1/js/anychart-tag-cloud.min.js"></script>
    <style type="text/css">      
      html, body, #container { 
        width: 100%; 
        height: 100%; 
        margin: 0; 
        padding: 0; 
      } 
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script>
      anychart.onDocumentReady(function () {
        // add data
        var data = [
          { "x": "Alsace", "value": 1, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Germany"},
          { "x": "Austria", "value": 12, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Austria"},
          { "x": "Austria-Hungary", "value": 3, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Austria"},
          { "x": "Australia", "value": 8, "category": "Australia", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Australia"},
          { "x": "Argentina", "value": 5, "category": "South America", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Argentina"},
          { "x": "Bangladesh", "value": 1, "category": "Asia", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Bangladesh"},
          { "x": "Belarus", "value": 2, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Belarus"},
          { "x": "Belgium", "value": 9, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Belgium"},
          { "x": "Bulgaria", "value": 1, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Bulgaria"},
          { "x": "Canada", "value": 15, "category": "North America", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Canada"},
          { "x": "Chile", "value": 2, "category": "South America", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Chile"},
          { "x": "China", "value": 5, "category": "Asia", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#China,_(People's_Republic_of_China)"},
          { "x": "Colombia", "value": 2, "category": "South America", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Colombia"},
          { "x": "Costa Rica", "value": 1, "category": "North America", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Costa_Rica"},
          { "x": "Cyprus", "value": 1, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Cyprus"},
          { "x": "Czechoslovakia", "value": 2, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Czech_Republic"},
          { "x": "Democratic Republic of the Congo", "value": 1, "category": "Africa", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Congo,_Democratic_Republic"},
          { "x": "Denmark", "value": 13, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Denmark"},
          { "x": "Egypt", "value": 4, "category": "Africa", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Egypt"},
          { "x": "Ethiopia", "value": 1, "category": "Africa", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Ethiopia"},
          { "x": "Finland", "value": 4, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Finland"},
          { "x": "France", "value": 60, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#France"},
          { "x": "Germany", "value": 61, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Germany"},
          { "x": "Ghana", "value": 1, "category": "Africa", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Ghana"},
          { "x": "Greece", "value": 2, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Greece"},
          { "x": "Guatemala", "value": 2, "category": "North America", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Guatemala"},
          { "x": "Hungary", "value": 3, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Hungary"},
          { "x": "Iceland", "value": 1, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Iceland"},
          { "x": "India", "value": 5, "category": "Asia", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#India"},
          { "x": "Iran", "value": 1, "category": "Asia", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Iran"},
          { "x": "Iraq", "value": 1, "category": "Asia", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Iraq"},
          { "x": "Ireland", "value": 7, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Ireland"},
          { "x": "Israel", "value": 13, "category": "Asia", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Israel"},
          { "x": "Italy", "value": 15, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Italy"},
          { "x": "Japan", "value": 25, "category": "Asia", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Japan"},
          { "x": "Kenya", "value": 1, "category": "Africa", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Kenya"},
          { "x": "Liberia", "value": 2, "category": "Africa", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Liberia"},
          { "x": "Luxembourg", "value": 1, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Luxembourg"},
          { "x": "Mexico", "value": 2, "category": "North America", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Mexico"},
          { "x": "Myanmar", "value": 1, "category": "Asia", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Myanmar"},
          { "x": "Netherlands", "value": 19, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Netherlands"},
          { "x": "Nigeria", "value": 1, "category": "Africa", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Nigeria"},
          { "x": "Norway", "value": 11, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Norway"},
          { "x": "Northern Ireland", "value": 4, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Ireland"},
          { "x": "Pakistan", "value": 2, "category": "Asia", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Pakistan"},    
          { "x": "Peru", "value": 1, "category": "South America", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Peru"},
          { "x": "Philippines", "value": 1, "category": "Asia", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Philippines"},
          { "x": "Poland", "value": 5, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Poland"},
          { "x": "Portugal", "value": 2, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Portugal"},
          { "x": "Russia", "value": 7, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Russia_and_Soviet_Union"},
          { "x": "Spain", "value": 6, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Spain"},
          { "x": "South Africa", "value": 7, "category": "Africa", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#South_Africa"},
          { "x": "South Korea", "value": 1, "category": "Asia", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#South_Korea"},
          { "x": "St. Lucia", "value": 1, "category": "North America", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Saint_Lucia"},
          { "x": "Sweden", "value": 34, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Sweden"},
          { "x": "Switzerland", "value": 24, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Switzerland"},
          { "x": "Tanzania", "value": 1, "category": "Africa", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Tanzania"},
          { "x": "Tibet", "value": 1, "category": "Asia", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Tibet"},
          { "x": "Timorese", "value": 2, "category": "Asia", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#East_Timor"},
          { "x": "Trinidad", "value": 1, "category": "North America", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Trinidad_and_Tobago"},
          { "x": "Turkey", "value": 2, "category": "Asia", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Turkey"},
          { "x": "Ukraine", "value": 1, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Ukraine"},
          { "x": "United Kingdom", "value": 119, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#United_Kingdom"},
          { "x": "United States", "value": 393, "category": "North America", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#United_States"},
          { "x": "U.S.S.R.", "value": 15, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Russia_and_Soviet_Union"},
          { "x": "Vietnam", "value": 1, "category": "Asia", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Vietnam"},
          { "x": "West Germany", "value": 23, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Germany"},
          { "x": "Yemen", "value": 1, "category": "Asia", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Yemen"},
          { "x": "Yugoslavia", "value": 1, "category": "Europe", "url": "https://en.wikipedia.org/wiki/List_of_Nobel_laureates_by_country#Yugoslavia"}
        ];
        // create a tag cloud with the added data
        var chart = anychart.tagCloud(data);
        // set the chart title
        chart.title("Nobel Laureates by Country");
        // set the container element id
        chart.container("container");
        // initiate the drawing of the chart
        chart.draw();
      });
    </script>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Conclusion

Well, this is how I created my tag cloud using JavaScript (HTML5), displaying the statistics of the Nobel laureates by country. I hope my stepwise tutorial will help you quickly get your own charts of this type up and running. Leave your questions in the comments, if any, and I would love to check out your tag clouds.

Published with the permission of Awan Shrestha. Originally appeared on HackerNoon with the title "Nobel Laureates by Country - Or Creating a Tag Cloud With JavaScript" on October 2, 2023.

You may also like to read the JavaScript World Cloud Tutorial originally published on the AnyChart blog earlier, visualizing the most popular languages worldwide.

Check out more JavaScript charting tutorials and continue mastering interactive data visualization.

Top comments (0)

Read next

maulikpaghdal profile image

Optimizing React Apps with useMemo and useCallback: A Complete Guide

Maulik Paghdal -

04anilr profile image

What is new feature of React version19

Anil -

andrew_mclean_09 profile image

anyone wanna join me building my first app?(I'm a beginner bare with me)

Andrew Mclean -

dev_girl profile image

Best Memes of Anime Girls Holding Programming Books

Dev Girl -