2-9 Ekim tarihleri arasında yapılması planlanan çok yakında. Yakın zamanda bu habere rastladım ve Nobel ödüllülere ve onların menşe ülkelerine olan ilgimi artırdım. 2023 Nobel Ödülü duyuruları Bu merak beni Nobel Ödülü kazananlarının kapsamlı listesine götürdü; bunu JavaScript kullanarak etkileşimli bir etiket bulutuna (veya ) dönüştürdüm ve tarih boyunca en fazla sayıda Nobel ödülüne sahip ülkeleri keşfetmek ve ortaya çıkarmak için zarif bir araç sağladım. . Britannica'daki kelime bulutuna Bu süreç sırasında, bu görselleştirmenin etkileşimli JS tabanlı etiket bulutları oluşturmaya yönelik bir eğitim için mükemmel bir açıklayıcı örnek olabileceğini fark ettim. Ülkelerine göre Nobel ödülü kazananlar hakkındaki merakımı paylaşırsanız, hemen aşağıda sizi bir ziyafet bekliyor! Bu etiket bulutunu nasıl hayata geçirdiğimi ve dolayısıyla kendi etiket bulutunuzu nasıl oluşturabileceğinizi öğrenmek istiyorsanız okumaya devam edin! Ülkelere Göre Nobel Ödülü Sahiplerinin Etiket Bulutu etkileşimli sürümü keşfedin. CodePen'deki A. Temel JS Etiket Bulutu Oluşturma İlk başta temel bir JavaScript etiket bulutu kodladım. JS grafikleri oluşturma deneyiminiz varsa, bunun nasıl çalıştığını zaten anlamışsınızdır. Ancak bunun ilk seferiniz olması durumunda, temel bilgilerle başlayalım. Süreç dört temel adıma ayrılabilir: Web kapsayıcısı oluşturma JavaScript dosyaları dahil Veri ekleme Bazı JS grafik kodlarını yazma 1. Web Kapsayıcı Oluşturma HTML'de basit bir web sayfası oluşturdum. Oraya bir öğesi ekledim ve ona benzersiz bir kimlik verdim; bu, etiket bulutunun çizileceği yerdir. Grafiğin tüm sayfayı doldurmasını istediğim için etiketini kullanarak uygun CSS kodunu ekledim; elbette bunu beğeninize göre ayarlayabilirsiniz. <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. JavaScript Dosyalarını Dahil Etme Temel HTML sayfa düzenini tamamladıktan sonra gerekli JavaScript dosyalarını bölümüne ekledim. <head> Aksi halde ihtiyaç duyulandan daha az çabayla verileri görselleştirmeye yardımcı olabilecek birçok vardır. Kutudan çıktığı gibi etiket bulutlarını destekleyen, ayrıntılı belgeler sağlayan ve kar amacı gütmeyen kullanım için ücretsiz olan tercih ettim; her neyse, bu sadece bir örnek ve temel bilgiler diğer kütüphanelerde aynı kalıyor. JavaScript grafik kitaplığı AnyChart'ı Böylece gerekli komut dosyalarını ekledim. <!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. Veri Ekleme Bu etiket bulutu için veri aldım. Dört kişi Nobel Ödülü'nü birkaç kez kazandı: Frederick Sanger, Linus Pauling, John Bardeen ve Marie Curie; Onları yalnızca bir kez saydım. Ödül kazananlardan bazıları iki ülkeye ait; Her ikisini de saydım. Britannica'dan Verileri kelime bulutuna aktarabilmem için bazı değişiklikler yapılması gerekiyordu. Bunu dört özelliğe sahip bir nesne dizisine dönüştürdüm: — ülkenin adı için x - o ülkeden Nobel ödüllülerin sayısı için değer — kıta için kategori — daha fazla bilgi için Wikipedia'ya bir bağlantı içerir. (Not: 20. yüzyılın başlarında var olan bazı ülkeler artık başka ülkelerdir; Britannica orijinal ülke adlarını saklar; bu Vikipedi'de her zaman geçerli değildir, dolayısıyla ülkeye göre toplam sayımlar biraz farklıdır.) 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"} ]; Evet, bu pek çok ülke demek! 4. Bazı JS Grafik Kodlarını Yazmak Son olarak etiket bulutunun kendisini çizmek için birkaç satır JavaScript kodu ekledim. Oldukça basitti. fonksiyonunu yazmaya başladım. anychart.onDocumentReady() <script> anychart.onDocumentReady(function () { // The tag cloud data and code will be in this section. }); </script> Bunun içine önceki adımdaki verileri ekledim, bir etiket bulutu örneği oluşturdum, grafik başlığını belirledim, kapsayıcı öğe kimliğini referans aldım ve ortaya çıkan etiket bulutunu çizdim. 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(); }); İlk etiket bulutu şu şekilde görünüyordu; etkileşimli sürüm bulunabilir. Ayrıca kodun tamamını aşağıya koydum. CodePen'de <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. JS Etiket Bulutunu Özelleştirme Bu temel JavaScript etiket bulutunu aldıktan sonra grafiğin görünümünü iyileştirmek için bazı özelleştirmeler eklemeye karar verdim. 1. Yazı Tipini Değiştirme İlk önce yazı tipini değiştirdim. Başlık özelleştirmesi için HTML kullandım. chart .title() .enabled(true) .useHtml(true) .text( '<span style="font-size: 20px;">Nobel Laureates by Country</span>' ); Etiketleri de ayarladım. chart .normal() .fontWeight(600) .fontVariant('small-caps'); 2. Açıyı Değiştirmek İkinci olarak, hepsinin yatay olarak görüntülenmesini sağlamak için açıyı sıfıra ayarlayarak etiketlerin yönlendirilme şeklini değiştirdim. chart.angles([0]); 3. Görsel Görünümün İyileştirilmesi Üçüncüsü renkleri değiştirdim ve bir renk aralığı ekledim. Anychart.scales.ordinalColor() işlevini kullanarak bir renk ölçeği oluşturdum ve ona bir dizi renk aktardım. Daha sonra etiket bulutu grafiğine renk skalasını ayarlayıp bir renk aralığı ekledim. // 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. Araç İpucunun Geliştirilmesi Dördüncüsü, etkileşimli bir etiket bulutunda kelimelerin üzerine geldiğinizde görünen bir ipucu olan araç ipucunu geliştirdim. tooltip() işlevine eriştim ve araç ipucu içeriğini değiştirmek için format() işlevini kullandım. chart .tooltip() .format('Total Nobel Laureates: {%value}\n Continent: {%category}'); 5. Bağlantı Açmayla Etkileşim Ekleme Son olarak, bir ülkeye tıklandığında daha fazla bilgi sağlayacak yeni bir sayfanın açılması için bir etkinlik dinleyicisi eklemeye karar verdim. Bir ülkenin etiketine tıklandığında "dinlemek" için listen() işlevini kullandım. Veri dizisindeki URL özelliğine erişebildiğimde ve bu URL'yi içeren web sayfasını açmak için window.open() işlevini ekleyebildiğimde. URL'nin yeni bir sekmede açılmasını sağlamak için _blank özelliğini de ilettim. chart.listen("pointClick", function(e){ var url = e.point.get("url").toString(); window.open(url, "_blank"); }); Tüm bu özelleştirmelerden sonra, aşağıda gösterilen harika, etkileşimli, JavaScript tabanlı bir etiket bulutu elde ettim. Etiket bulutunun memnun kaldığım son hali. kaynak kodunun tamamına göz atın ve renkler, etkileşim vb. ile oynamaktan çekinmeyin; tüm yaratıcılığınızı kullanın, eminim süreçten keyif alacaksınız. CodePen'deki Size kolaylık sağlamak için son JS etiket bulutu kodunu da aşağıya koyuyorum. <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> Çözüm Nobel ödüllülerin istatistiklerini ülkeye göre görüntüleyen etiket bulutumu JavaScript (HTML5) kullanarak bu şekilde oluşturdum. Umarım adım adım eğitimim bu türden kendi grafiklerinizi hızlı bir şekilde hazırlayıp çalıştırmanıza yardımcı olur. Varsa sorularınızı yorumlara bırakın, etiket bulutlarınıza göz atmayı çok isterim!
