{"id":16938,"date":"2023-10-03T13:48:49","date_gmt":"2023-10-03T13:48:49","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=16938"},"modified":"2023-10-03T13:53:46","modified_gmt":"2023-10-03T13:53:46","slug":"nobel-tag-cloud-js","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2023\/10\/03\/nobel-tag-cloud-js\/","title":{"rendered":"Nobel Laureates’ Countries, or Making Tag Cloud with JavaScript"},"content":{"rendered":"

\"Tag<\/a>The Nobel Prize 2023 announcements<\/a> 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.<\/p>\n

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

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 \u2014 and, therefore, how you can create your own \u2014 read on!<\/p>\n

<\/p>\n

Tag Cloud of Nobel Laureates by Country<\/h2>\n

\"Nobel<\/a><\/p>\n

Explore the interactive version on CodePen<\/a> [or on Playground<\/a>].<\/p>\n

A. Creating a Basic JS Tag Cloud<\/h3>\n

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\u2019s start with the basics. The process could be divided into four fundamental steps:<\/p>\n

    \n
  1. Creating a web container<\/li>\n
  2. Including JavaScript files<\/li>\n
  3. Adding data<\/li>\n
  4. Writing some JS charting code<\/li>\n<\/ol>\n

    1. Creating a Web Container<\/h3>\n

    I built a basic web page in HTML. There, I added a <div><\/code> element and gave it a unique ID \u2014 it\u2019s 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><\/code> tag; of course, you can set that to your liking.<\/p>\n

    <!DOCTYPE html>\r\n<html lang=\"en\">\r\n  <head>\r\n    <meta charset=\"utf-8\">\r\n    <title>JavaScript Tag Cloud<\/title>\r\n    <style type=\"text\/css\">      \r\n      html, body, #container { \r\n        width: 100%; \r\n        height: 100%; \r\n        margin: 0; \r\n        padding: 0; \r\n      } \r\n    <\/style>\r\n  <\/head>\r\n  <body>\r\n    <div id=\"container\"><\/div>\r\n  <\/body>\r\n<\/html><\/code><\/pre>\n
    2. Including JavaScript Files<\/h3>\n
    Once I completed a basic HTML page layout, I included the necessary JavaScript files in the <head><\/code> section.<\/p>\n
    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<\/a>, which supports tag clouds out of the box, provides detailed docs, and is free for not-for-profit use; anyway, it\u2019s just an example and the basics remain the same with other libraries.<\/p>\n
    So, I added the required scripts.<\/p>\n
    <!DOCTYPE html>\r\n<html lang=\"en\">\r\n  <head>\r\n    <meta charset=\"utf-8\">\r\n    <title>JavaScript Tag Cloud<\/title>\r\n    <script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.1\/js\/anychart-core.min.js\"><\/script>\r\n    <script src=\"https:\/\/cdn.anychart.com\/releases\/8.11.1\/js\/anychart-tag-cloud.min.js\"><\/script>\r\n    <style type=\"text\/css\">      \r\n      html, body, #container { \r\n        width: 100%; \r\n        height: 100%; \r\n        margin: 0; \r\n        padding: 0; \r\n      } \r\n    <\/style>\r\n  <\/head>\r\n  <body>\r\n    <div id=\"container\"><\/div>\r\n    <script>\r\n      \/\/ All the code for the tag cloud will come here.\r\n    <\/script>\r\n  <\/body>\r\n<\/html><\/code><\/pre>\n
    3. Adding Data<\/h3>\n
    For this tag cloud, I took data from Britannica<\/a>. 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.<\/p>\n
    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:<\/p>\n
      \n
    • x<\/strong> \u2014 for the name of the country<\/li>\n
    • value<\/strong> \u2014 for the number of Nobel laureates from that country<\/li>\n
    • category<\/strong> \u2014 for the continent<\/li>\n
    • URL<\/strong> \u2014 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.)<\/li>\n<\/ul>\n
      var data = [\r\n  { \"x\": \"Alsace\", \"value\": 1, \"category\": \"Europe\", \"url\": \"https:\/\/en.wikipedia.org\/wiki\/List_of_Nobel_laureates_by_country#Germany\"},\r\n  { \"x\": \"Austria\", \"value\": 12, \"category\": \"Europe\", \"url\": \"https:\/\/en.wikipedia.org\/wiki\/List_of_Nobel_laureates_by_country#Austria\"},\r\n  { \"x\": \"Austria-Hungary\", \"value\": 3, \"category\": \"Europe\", \"url\": \"https:\/\/en.wikipedia.org\/wiki\/List_of_Nobel_laureates_by_country#Austria\"},\r\n  { \"x\": \"Australia\", \"value\": 8, \"category\": \"Australia\", \"url\": \"https:\/\/en.wikipedia.org\/wiki\/List_of_Nobel_laureates_by_country#Australia\"},\r\n  { \"x\": \"Argentina\", \"value\": 5, \"category\": \"South America\", \"url\": \"https:\/\/en.wikipedia.org\/wiki\/List_of_Nobel_laureates_by_country#Argentina\"},\r\n  { \"x\": \"Bangladesh\", \"value\": 1, \"category\": \"Asia\", \"url\": \"https:\/\/en.wikipedia.org\/wiki\/List_of_Nobel_laureates_by_country#Bangladesh\"},\r\n  { \"x\": \"Belarus\", \"value\": 2, \"category\": \"Europe\", \"url\": \"https:\/\/en.wikipedia.org\/wiki\/List_of_Nobel_laureates_by_country#Belarus\"},\r\n  { \"x\": \"Belgium\", \"value\": 9, \"category\": \"Europe\", \"url\": \"https:\/\/en.wikipedia.org\/wiki\/List_of_Nobel_laureates_by_country#Belgium\"},\r\n  { \"x\": \"Bulgaria\", \"value\": 1, \"category\": \"Europe\", \"url\": \"https:\/\/en.wikipedia.org\/wiki\/List_of_Nobel_laureates_by_country#Bulgaria\"},\r\n  { \"x\": \"Canada\", \"value\": 15, \"category\": \"North America\", \"url\": \"https:\/\/en.wikipedia.org\/wiki\/List_of_Nobel_laureates_by_country#Canada\"},\r\n  { \"x\": \"Chile\", \"value\": 2, \"category\": \"South America\", \"url\": \"https:\/\/en.wikipedia.org\/wiki\/List_of_Nobel_laureates_by_country#Chile\"},\r\n  { \"x\": \"China\", \"value\": 5, \"category\": \"Asia\", \"url\": \"https:\/\/en.wikipedia.org\/wiki\/List_of_Nobel_laureates_by_country#China,_(People's_Republic_of_China)\"},\r\n  { \"x\": \"Colombia\", \"value\": 2, \"category\": \"South America\", \"url\": \"https:\/\/en.wikipedia.org\/wiki\/List_of_Nobel_laureates_by_country#Colombia\"},\r\n  { \"x\": \"Costa Rica\", \"value\": 1, \"category\": \"North America\", \"url\": \"https:\/\/en.wikipedia.org\/wiki\/List_of_Nobel_laureates_by_country#Costa_Rica\"},\r\n  { \"x\": \"Cyprus\", \"value\": 1, \"category\": \"Europe\", \"url\": \"https:\/\/en.wikipedia.org\/wiki\/List_of_Nobel_laureates_by_country#Cyprus\"},\r\n  { \"x\": \"Czechoslovakia\", \"value\": 2, \"category\": \"Europe\", \"url\": \"https:\/\/en.wikipedia.org\/wiki\/List_of_Nobel_laureates_by_country#Czech_Republic\"},\r\n  { \"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\"},\r\n  { \"x\": \"Denmark\", \"value\": 13, \"category\": \"Europe\", \"url\": \"https:\/\/en.wikipedia.org\/wiki\/List_of_Nobel_laureates_by_country#Denmark\"},\r\n  { \"x\": \"Egypt\", \"value\": 4, \"category\": \"Africa\", \"url\": \"https:\/\/en.wikipedia.org\/wiki\/List_of_Nobel_laureates_by_country#Egypt\"},\r\n  { \"x\": \"Ethiopia\", \"value\": 1, \"category\": \"Africa\", \"url\": \"https:\/\/en.wikipedia.org\/wiki\/List_of_Nobel_laureates_by_country#Ethiopia\"},\r\n  { \"x\": \"Finland\", \"value\": 4, \"category\": \"Europe\", \"url\": \"https:\/\/en.wikipedia.org\/wiki\/List_of_Nobel_laureates_by_country#Finland\"},\r\n  { \"x\": \"France\", \"value\": 60, \"category\": \"Europe\", \"url\": \"https:\/\/en.wikipedia.org\/wiki\/List_of_Nobel_laureates_by_country#France\"},\r\n  { \"x\": \"Germany\", \"value\": 61, \"category\": \"Europe\", \"url\": \"https:\/\/en.wikipedia.org\/wiki\/List_of_Nobel_laureates_by_country#Germany\"},\r\n  { \"x\": \"Ghana\", \"value\": 1, \"category\": \"Africa\", \"url\": \"https:\/\/en.wikipedia.org\/wiki\/List_of_Nobel_laureates_by_country#Ghana\"},\r\n  { \"x\": \"Greece\", \"value\": 2, \"category\": \"Europe\", \"url\": \"https:\/\/en.wikipedia.org\/wiki\/List_of_Nobel_laureates_by_country#Greece\"},\r\n  { \"x\": \"Guatemala\", \"value\": 2, \"category\": \"North America\", \"url\": \"https:\/\/en.wikipedia.org\/wiki\/List_of_Nobel_laureates_by_country#Guatemala\"},\r\n  { \"x\": \"Hungary\", \"value\": 3, \"category\": \"Europe\", \"url\": \"https:\/\/en.wikipedia.org\/wiki\/List_of_Nobel_laureates_by_country#Hungary\"},\r\n  { \"x\": \"Iceland\", \"value\": 1, \"category\": \"Europe\", \"url\": \"https:\/\/en.wikipedia.org\/wiki\/List_of_Nobel_laureates_by_country#Iceland\"},\r\n  { \"x\": \"India\", \"value\": 5, \"category\": \"Asia\", \"url\": \"https:\/\/en.wikipedia.org\/wiki\/List_of_Nobel_laureates_by_country#India\"},\r\n  { \"x\": \"Iran\", \"value\": 1, \"category\": \"Asia\", \"url\": \"https:\/\/en.wikipedia.org\/wiki\/List_of_Nobel_laureates_by_country#Iran\"},\r\n  { \"x\": \"Iraq\", \"value\": 1, \"category\": \"Asia\", \"url\": \"https:\/\/en.wikipedia.org\/wiki\/List_of_Nobel_laureates_by_country#Iraq\"},\r\n  { \"x\": \"Ireland\", \"value\": 7, \"category\": \"Europe\", \"url\": \"https:\/\/en.wikipedia.org\/wiki\/List_of_Nobel_laureates_by_country#Ireland\"},\r\n  { \"x\": \"Israel\", \"value\": 13, \"category\": \"Asia\", \"url\": \"https:\/\/en.wikipedia.org\/wiki\/List_of_Nobel_laureates_by_country#Israel\"},\r\n  { \"x\": \"Italy\", \"value\": 15, \"category\": \"Europe\", \"url\": \"https:\/\/en.wikipedia.org\/wiki\/List_of_Nobel_laureates_by_country#Italy\"},\r\n  { \"x\": \"Japan\", \"value\": 25, \"category\": \"Asia\", \"url\": \"https:\/\/en.wikipedia.org\/wiki\/List_of_Nobel_laureates_by_country#Japan\"},\r\n  { \"x\": \"Kenya\", \"value\": 1, \"category\": \"Africa\", \"url\": \"https:\/\/en.wikipedia.org\/wiki\/List_of_Nobel_laureates_by_country#Kenya\"},\r\n  { \"x\": \"Liberia\", \"value\": 2, \"category\": \"Africa\", \"url\": \"https:\/\/en.wikipedia.org\/wiki\/List_of_Nobel_laureates_by_country#Liberia\"},\r\n  { \"x\": \"Luxembourg\", \"value\": 1, \"category\": \"Europe\", \"url\": \"https:\/\/en.wikipedia.org\/wiki\/List_of_Nobel_laureates_by_country#Luxembourg\"},\r\n  { \"x\": \"Mexico\", \"value\": 2, \"category\": \"North America\", \"url\": \"https:\/\/en.wikipedia.org\/wiki\/List_of_Nobel_laureates_by_country#Mexico\"},\r\n  { \"x\": \"Myanmar\", \"value\": 1, \"category\": \"Asia\", \"url\": \"https:\/\/en.wikipedia.org\/wiki\/List_of_Nobel_laureates_by_country#Myanmar\"},\r\n  { \"x\": \"Netherlands\", \"value\": 19, \"category\": \"Europe\", \"url\": \"https:\/\/en.wikipedia.org\/wiki\/List_of_Nobel_laureates_by_country#Netherlands\"},\r\n  { \"x\": \"Nigeria\", \"value\": 1, \"category\": \"Africa\", \"url\": \"https:\/\/en.wikipedia.org\/wiki\/List_of_Nobel_laureates_by_country#Nigeria\"},\r\n  { \"x\": \"Norway\", \"value\": 11, \"category\": \"Europe\", \"url\": \"https:\/\/en.wikipedia.org\/wiki\/List_of_Nobel_laureates_by_country#Norway\"},\r\n  { \"x\": \"Northern Ireland\", \"value\": 4, \"category\": \"Europe\", \"url\": \"https:\/\/en.wikipedia.org\/wiki\/List_of_Nobel_laureates_by_country#Ireland\"},\r\n  { \"x\": \"Pakistan\", \"value\": 2, \"category\": \"Asia\", \"url\": \"https:\/\/en.wikipedia.org\/wiki\/List_of_Nobel_laureates_by_country#Pakistan\"},    \r\n  { \"x\": \"Peru\", \"value\": 1, \"category\": \"South America\", \"url\": \"https:\/\/en.wikipedia.org\/wiki\/List_of_Nobel_laureates_by_country#Peru\"},\r\n  { \"x\": \"Philippines\", \"value\": 1, \"category\": \"Asia\", \"url\": \"https:\/\/en.wikipedia.org\/wiki\/List_of_Nobel_laureates_by_country#Philippines\"},\r\n  { \"x\": \"Poland\", \"value\": 5, \"category\": \"Europe\", \"url\": \"https:\/\/en.wikipedia.org\/wiki\/List_of_Nobel_laureates_by_country#Poland\"},\r\n  { \"x\": \"Portugal\", \"value\": 2, \"category\": \"Europe\", \"url\": \"https:\/\/en.wikipedia.org\/wiki\/List_of_Nobel_laureates_by_country#Portugal\"},\r\n  { \"x\": \"Russia\", \"value\": 7, \"category\": \"Europe\", \"url\": \"https:\/\/en.wikipedia.org\/wiki\/List_of_Nobel_laureates_by_country#Russia_and_Soviet_Union\"},\r\n  { \"x\": \"Spain\", \"value\": 6, \"category\": \"Europe\", \"url\": \"https:\/\/en.wikipedia.org\/wiki\/List_of_Nobel_laureates_by_country#Spain\"},\r\n  { \"x\": \"South Africa\", \"value\": 7, \"category\": \"Africa\", \"url\": \"https:\/\/en.wikipedia.org\/wiki\/List_of_Nobel_laureates_by_country#South_Africa\"},\r\n  { \"x\": \"South Korea\", \"value\": 1, \"category\": \"Asia\", \"url\": \"https:\/\/en.wikipedia.org\/wiki\/List_of_Nobel_laureates_by_country#South_Korea\"},\r\n  { \"x\": \"St. Lucia\", \"value\": 1, \"category\": \"North America\", \"url\": \"https:\/\/en.wikipedia.org\/wiki\/List_of_Nobel_laureates_by_country#Saint_Lucia\"},\r\n  { \"x\": \"Sweden\", \"value\": 34, \"category\": \"Europe\", \"url\": \"https:\/\/en.wikipedia.org\/wiki\/List_of_Nobel_laureates_by_country#Sweden\"},\r\n  { \"x\": \"Switzerland\", \"value\": 24, \"category\": \"Europe\", \"url\": \"https:\/\/en.wikipedia.org\/wiki\/List_of_Nobel_laureates_by_country#Switzerland\"},\r\n  { \"x\": \"Tanzania\", \"value\": 1, \"category\": \"Africa\", \"url\": \"https:\/\/en.wikipedia.org\/wiki\/List_of_Nobel_laureates_by_country#Tanzania\"},\r\n  { \"x\": \"Tibet\", \"value\": 1, \"category\": \"Asia\", \"url\": \"https:\/\/en.wikipedia.org\/wiki\/List_of_Nobel_laureates_by_country#Tibet\"},\r\n  { \"x\": \"Timorese\", \"value\": 2, \"category\": \"Asia\", \"url\": \"https:\/\/en.wikipedia.org\/wiki\/List_of_Nobel_laureates_by_country#East_Timor\"},\r\n  { \"x\": \"Trinidad\", \"value\": 1, \"category\": \"North America\", \"url\": \"https:\/\/en.wikipedia.org\/wiki\/List_of_Nobel_laureates_by_country#Trinidad_and_Tobago\"},\r\n  { \"x\": \"Turkey\", \"value\": 2, \"category\": \"Asia\", \"url\": \"https:\/\/en.wikipedia.org\/wiki\/List_of_Nobel_laureates_by_country#Turkey\"},\r\n  { \"x\": \"Ukraine\", \"value\": 1, \"category\": \"Europe\", \"url\": \"https:\/\/en.wikipedia.org\/wiki\/List_of_Nobel_laureates_by_country#Ukraine\"},\r\n  { \"x\": \"United Kingdom\", \"value\": 119, \"category\": \"Europe\", \"url\": \"https:\/\/en.wikipedia.org\/wiki\/List_of_Nobel_laureates_by_country#United_Kingdom\"},\r\n  { \"x\": \"United States\", \"value\": 393, \"category\": \"North America\", \"url\": \"https:\/\/en.wikipedia.org\/wiki\/List_of_Nobel_laureates_by_country#United_States\"},\r\n  { \"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\"},\r\n  { \"x\": \"Vietnam\", \"value\": 1, \"category\": \"Asia\", \"url\": \"https:\/\/en.wikipedia.org\/wiki\/List_of_Nobel_laureates_by_country#Vietnam\"},\r\n  { \"x\": \"West Germany\", \"value\": 23, \"category\": \"Europe\", \"url\": \"https:\/\/en.wikipedia.org\/wiki\/List_of_Nobel_laureates_by_country#Germany\"},\r\n  { \"x\": \"Yemen\", \"value\": 1, \"category\": \"Asia\", \"url\": \"https:\/\/en.wikipedia.org\/wiki\/List_of_Nobel_laureates_by_country#Yemen\"},\r\n  { \"x\": \"Yugoslavia\", \"value\": 1, \"category\": \"Europe\", \"url\": \"https:\/\/en.wikipedia.org\/wiki\/List_of_Nobel_laureates_by_country#Yugoslavia\"}\r\n];<\/code><\/pre>\n
      Yup, that\u2019s a lot of countries!<\/p>\n
      4. Writing Some JS Charting Code<\/h3>\n
      Finally, I added a few lines of JavaScript code to draw the tag cloud itself. It was fairly straightforward.<\/p>\n
      I started writing the anychart.onDocumentReady() function.<\/p>\n
      <script>\r\n  anychart.onDocumentReady(function () {\r\n    \/\/ The tag cloud data and code will be in this section.\r\n  });\r\n<\/script><\/code><\/pre>\n
      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.<\/p>\n
      anychart.onDocumentReady(function () {\r\n\r\n  \/\/ add data (copying from step 3)\r\n  ...\r\n\r\n  \/\/ create a tag cloud with the added data\r\n  var chart = anychart.tagCloud(data);\r\n\r\n  \/\/ set the chart title\r\n  chart.title(\"Nobel Laureates by Country\");\r\n\r\n  \/\/ set the container element id\r\n  chart.container(\"container\");\r\n\r\n  \/\/ initiate the drawing of the chart\r\n  chart.draw();\r\n\r\n});<\/code><\/pre>\n
      Here is how the initial tag cloud looked \u2014 the interactive version can be found on CodePen<\/a> [and on Playground<\/a>]. Also, I have put the entire code below.<\/p>\n