Los están a la vuelta de la esquina, previstos del 2 al 9 de octubre. Recientemente me topé con esta noticia, lo que despertó mi interés por los premios Nobel y sus países de origen. anuncios del Premio Nobel 2023 Esta curiosidad me llevó a la lista completa de ganadores del Premio Nobel en , que transformé en una nube de etiquetas interactiva (o ) usando JavaScript, proporcionando un medio elegante para explorar y descubrir los países con el mayor número de premios Nobel a lo largo de la historia. . Britannica nube de palabras Durante este proceso, me di cuenta de que esta visualización podría servir como un excelente ejemplo ilustrativo para un tutorial sobre la creación de nubes de etiquetas interactivas basadas en JS. Entonces, si compartes mi curiosidad sobre los premios Nobel por país, ¡te encantará justo debajo! Y si estás ansioso por saber cómo le di vida a esta nube de etiquetas y, por lo tanto, cómo puedes crear la tuya propia, ¡sigue leyendo! Nube de etiquetas de premios Nobel por país Explore la versión interactiva en . CodePen A. Creación de una nube de etiquetas JS básica Al principio, codifiqué una nube de etiquetas de JavaScript básica. Si tiene experiencia en la creación de gráficos JS, ya comprende cómo funciona. Pero en caso de que sea tu primera vez, comencemos con lo básico. El proceso podría dividirse en cuatro pasos fundamentales: Creando un contenedor web Incluyendo archivos JavaScript Agregar datos Escribir código de gráficos JS 1. Crear un contenedor web Construí una página web básica en HTML. Allí, agregué un elemento y le di una identificación única: es el lugar donde se dibujará la nube de etiquetas. Quería que el gráfico ocupara toda la página, así que agregué el código CSS apropiado usando la etiqueta ; Por supuesto, puedes configurarlo a tu gusto. <div> <style> <!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> 2. Incluir archivos JavaScript Una vez que completé un diseño de página HTML básico, incluí los archivos JavaScript necesarios en la sección . <head> Existen muchas que pueden ayudar a visualizar datos con menos esfuerzo del que sería necesario de otra manera. Opté por , que admite nubes de etiquetas listas para usar, proporciona documentos detallados y es gratuito para uso sin fines de lucro; de todos modos, es sólo un ejemplo y los conceptos básicos siguen siendo los mismos con otras bibliotecas. bibliotecas de gráficos de JavaScript AnyChart Entonces, agregué los scripts necesarios. <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>JavaScript Tag Cloud</title> <script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-core.min.js"></script> <script src="https://cdn.anychart.com/releases/8.11.0/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> 3. Agregar datos Para esta nube de etiquetas, tomé datos de . Cuatro personas ganaron el Premio Nobel varias veces: Frederick Sanger, Linus Pauling, John Bardeen y Marie Curie; Los conté sólo una vez. Algunos galardonados pertenecen a dos países; Los conté para ambos. Britannica Los datos necesitaban algunas modificaciones antes de poder introducirlos en la nube de palabras. Lo convertí en una matriz de objetos con cuatro propiedades: - para el nombre del país x : por el número de premios Nobel de ese país valor — para el continente categoría : contiene un enlace a Wikipedia para obtener más información. (Nota: algunos países que existían a principios del siglo XX ahora son otros países; Britannica almacena los nombres de los países originales, lo que no siempre es el caso en Wikipedia, por lo que los recuentos totales por país son un poco diferentes). URL 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": "USSR", "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"} ]; ¡Sí, son muchos países! 4. Escribir código de gráficos JS Finalmente, agregué algunas líneas de código JavaScript para dibujar la nube de etiquetas. Fue bastante sencillo. Comencé a escribir la función . anychart.onDocumentReady() <script> anychart.onDocumentReady(function () { // The tag cloud data and code will be in this section. }); </script> En su interior, agregué los datos del paso anterior, creé una instancia de nube de etiquetas, configuré el título del gráfico, hice referencia al ID del elemento contenedor y dibujé la nube de etiquetas resultante. 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(); }); Así es como se veía la nube de etiquetas inicial: la versión interactiva se puede encontrar en . Además, he puesto el código completo a continuación. CodePen <html lang="en"> <head> <meta charset="utf-8"> <title>JavaScript Tag Cloud</title> <script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-core.min.js"></script> <script src="https://cdn.anychart.com/releases/8.11.0/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": "USSR", "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> B. Personalización de la nube de etiquetas JS Después de obtener esa nube de etiquetas de JavaScript básica, decidí agregar algunas personalizaciones para mejorar la vista del gráfico. 1. Modificar la fuente Primero, cambié la fuente. Para la personalización del título, utilicé HTML. chart .title() .enabled(true) .useHtml(true) .text( '<span style="font-size: 20px;">Nobel Laureates by Country</span>' ); También ajusté las etiquetas. chart .normal() .fontWeight(600) .fontVariant('small-caps'); 2. Cambiar el ángulo En segundo lugar, cambié la forma en que se orientan las etiquetas estableciendo el ángulo en cero para que todas se muestren horizontalmente. chart.angles([0]); 3. Mejorar la apariencia visual En tercer lugar, cambié los colores y agregué una gama de colores. Creé una escala de colores usando la función anychart.scales.ordinalColor() y le pasé una variedad de colores. Luego configuré la escala de colores en el gráfico de nube de etiquetas y agregué una gama de colores. // 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); 4. Mejora de la información sobre herramientas Cuarto, mejoré la información sobre herramientas, una pista que aparece cuando pasas el cursor sobre las palabras en una nube de etiquetas interactiva. Accedí a la función tooltip() y utilicé la función format() para cambiar el contenido de la información sobre herramientas. chart .tooltip() .format('Total Nobel Laureates: {%value}\n Continent: {%category}'); 5. Agregar interactividad con la apertura de enlaces Finalmente, decidí agregar un detector de eventos para que se abra una nueva página para brindar más información cuando se hace clic en un país. Utilicé la función listening() para “escuchar” cuando uno hace clic en la etiqueta de un país. Cuando pude acceder a la propiedad URL en la matriz de datos y agregar la función window.open() para abrir la página web con esa URL. También pasé la propiedad _blank para que la URL se abra en una nueva pestaña. chart.listen("pointClick", function(e){ var url = e.point.get("url").toString(); window.open(url, "_blank"); }); Después de todas estas personalizaciones, terminé obteniendo una nube de etiquetas interesante, interactiva y basada en JavaScript que se muestra a continuación. Es la versión final de la nube de etiquetas con la que quedé satisfecho. Compruébelo con el código fuente completo en y siéntase libre de jugar con colores, interactividad, etc.; use toda su creatividad y estoy seguro de que disfrutará el proceso. CodePen Para su comodidad, también incluyo el código final de la nube de etiquetas JS a continuación. <html lang="en"> <head> <meta charset="utf-8"> <title>JavaScript Tag Cloud</title> <script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-core.min.js"></script> <script src="https://cdn.anychart.com/releases/8.11.0/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": "USSR", "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() .enabled(true) .useHtml(true) .text( '<span style="font-size: 20px;">Nobel Laureates by Country</span>' ); // customize the font settings chart .normal() .fontWeight(600) .fontVariant('small-caps'); // set the angle chart.angles([0]); // 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); // format the tooltip chart .tooltip() .format('Total Nobel Laureates: {%value}\n Continent: {%category}'); // add an event listener to open a url on click chart.listen("pointClick", function(e){ var url = e.point.get("url").toString(); window.open(url, "_blank"); }); // set the container element id chart.container("container"); // initiate the drawing of the chart chart.draw(); }); </script> </body> </html> Conclusión Bueno, así es como creé mi nube de etiquetas usando JavaScript (HTML5), mostrando las estadísticas de los premios Nobel por país. Espero que mi tutorial paso a paso le ayude a poner en funcionamiento rápidamente sus propios gráficos de este tipo. Deje sus preguntas en los comentarios, si las hay, ¡y me encantaría ver sus nubes de etiquetas!
