629 পড়া

দেশ অনুসারে নোবেল বিজয়ী - বা জাভাস্ক্রিপ্ট দিয়ে একটি ট্যাগ ক্লাউড তৈরি করা

দ্বারা Awan Shrestha23m2023/10/02

অতিদীর্ঘ; পড়তে

2023 সালের নোবেল পুরস্কারের ঘোষণাগুলি 2 থেকে 9 অক্টোবরের মধ্যে আসছে৷ এটি নোবেল বিজয়ীদের এবং তাদের উত্সের দেশগুলির প্রতি আমার আগ্রহের জন্ম দিয়েছে৷ আমি ব্রিটানিকায় নোবেল পুরস্কার বিজয়ীদের একটি সম্পূর্ণ তালিকা আবিষ্কার করেছি এবং একটি ইন্টারেক্টিভ ট্যাগ ক্লাউড (বা শব্দ ক্লাউড) তৈরি করতে জাভাস্ক্রিপ্ট ব্যবহার করেছি, যা ইতিহাসের সবচেয়ে নোবেল বিজয়ী দেশগুলিকে প্রকাশ করে৷ আমি এই প্রকল্পে কাজ করার সময়, এটি আমাকে আঘাত করেছিল যে এটি JS-ভিত্তিক ট্যাগ ক্লাউড তৈরির উপর একটি দুর্দান্ত টিউটোরিয়াল তৈরি করবে। সুতরাং, আপনি যদি দেশ অনুসারে নোবেল বিজয়ীদের সম্পর্কে আগ্রহী হন, চার্টটি অন্বেষণ করুন৷ এবং কীভাবে আপনার নিজের ট্যাগ ক্লাউড তৈরি করবেন তা শিখতে পড়তে থাকুন।

featured image - দেশ অনুসারে নোবেল বিজয়ী - বা জাভাস্ক্রিপ্ট দিয়ে একটি ট্যাগ ক্লাউড তৈরি করা

2023 সালের নোবেল পুরস্কারের ঘোষণাগুলি ঠিক কোণায় রয়েছে, যা 2 থেকে 9 অক্টোবরের মধ্যে নির্ধারিত। সম্প্রতি, আমি এই খবরে হোঁচট খেয়েছি, নোবেল বিজয়ীদের এবং তাদের দেশগুলির প্রতি আমার আগ্রহের জন্ম দিয়েছে।

এই কৌতূহল আমাকে ব্রিটানিকার নোবেল পুরস্কার বিজয়ীদের বিস্তৃত তালিকার দিকে নিয়ে গিয়েছিল, যা আমি জাভাস্ক্রিপ্ট ব্যবহার করে একটি ইন্টারেক্টিভ ট্যাগ ক্লাউড (বা শব্দ ক্লাউড ) তে রূপান্তরিত করেছি, যা ইতিহাস জুড়ে সর্বাধিক সংখ্যক নোবেল বিজয়ী দেশগুলিকে অন্বেষণ এবং উন্মোচন করার একটি মার্জিত উপায় প্রদান করে। .

এই প্রক্রিয়া চলাকালীন, এটি আমার মনে হয়েছিল যে এই ভিজ্যুয়ালাইজেশনটি ইন্টারেক্টিভ JS-ভিত্তিক ট্যাগ ক্লাউড তৈরির টিউটোরিয়ালের জন্য একটি চমৎকার উদাহরণ হিসেবে কাজ করতে পারে। সুতরাং, আপনি যদি দেশ অনুসারে নোবেল বিজয়ীদের সম্পর্কে আমার কৌতূহল ভাগ করে নেন, আপনি নীচে একটি ট্রিট পাবেন!

এবং আপনি যদি জানতে আগ্রহী হন কিভাবে আমি এই ট্যাগ ক্লাউডকে জীবন্ত করে তুলেছি — এবং সেইজন্য, আপনি কীভাবে নিজের তৈরি করতে পারেন — পড়ুন!

দেশ অনুসারে নোবেল বিজয়ীদের ট্যাগ ক্লাউড

কোডপেনে ইন্টারেক্টিভ সংস্করণটি অন্বেষণ করুন।

A. একটি বেসিক JS ট্যাগ ক্লাউড তৈরি করা

প্রথমে, আমি একটি মৌলিক জাভাস্ক্রিপ্ট ট্যাগ ক্লাউড কোড করেছি। আপনার যদি জেএস চার্ট তৈরি করার অভিজ্ঞতা থাকে তবে এটি কীভাবে কাজ করে তা আপনার কাছে ইতিমধ্যেই রয়েছে। কিন্তু যদি এটি আপনার প্রথমবার হয়, তাহলে এর মূল বিষয়গুলো দিয়ে শুরু করা যাক। প্রক্রিয়াটি চারটি মৌলিক ধাপে বিভক্ত করা যেতে পারে:

একটি ওয়েব কন্টেইনার তৈরি করা হচ্ছে
জাভাস্ক্রিপ্ট ফাইল সহ
ডেটা যোগ করা হচ্ছে
কিছু JS চার্টিং কোড লেখা

1. একটি ওয়েব কন্টেইনার তৈরি করা

আমি HTML এ একটি বেসিক ওয়েব পেজ তৈরি করেছি। সেখানে, আমি একটি <div> উপাদান যোগ করেছি এবং এটিকে একটি অনন্য আইডি দিয়েছি — এটি ট্যাগ ক্লাউড আঁকার জায়গা। আমি চার্টটি পুরো পৃষ্ঠাটি পূরণ করতে চেয়েছিলাম, তাই আমি <style> ট্যাগ ব্যবহার করে উপযুক্ত CSS কোড যোগ করেছি; অবশ্যই, আপনি এটি আপনার পছন্দ অনুযায়ী সেট করতে পারেন।

 <!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. জাভাস্ক্রিপ্ট ফাইল সহ

একবার আমি একটি মৌলিক HTML পৃষ্ঠার বিন্যাস সম্পূর্ণ করার পর, আমি <head> বিভাগে প্রয়োজনীয় জাভাস্ক্রিপ্ট ফাইলগুলি অন্তর্ভুক্ত করেছি।

সেখানে অনেক জাভাস্ক্রিপ্ট চার্টিং লাইব্রেরি রয়েছে যা অন্যথায় প্রয়োজনের চেয়ে কম প্রচেষ্টায় ডেটা কল্পনা করতে সাহায্য করতে পারে। আমি AnyChart বেছে নিয়েছি, যা বক্সের বাইরে ট্যাগ ক্লাউড সমর্থন করে, বিস্তারিত ডক্স প্রদান করে এবং অলাভজনক ব্যবহারের জন্য বিনামূল্যে; যাইহোক, এটি শুধুমাত্র একটি উদাহরণ এবং অন্যান্য লাইব্রেরির সাথে মৌলিক বিষয়গুলি একই থাকে।

তাই, আমি প্রয়োজনীয় স্ক্রিপ্ট যোগ করেছি।

 <!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. ডেটা যোগ করা

এই ট্যাগ ক্লাউডের জন্য, আমি Britannica থেকে ডেটা নিয়েছি। চারজন ব্যক্তি বেশ কয়েকবার নোবেল পুরস্কার জিতেছেন: ফ্রেডরিক স্যাঙ্গার, লিনাস পলিং, জন বারডিন এবং মেরি কুরি; আমি তাদের শুধুমাত্র একবার গণনা. কিছু বিজয়ী দুই দেশের অন্তর্গত; আমি উভয়ের জন্য তাদের গণনা.

ক্লাউড শব্দে এটি খাওয়ানোর আগে ডেটাটির কিছু পরিবর্তনের প্রয়োজন ছিল। আমি এটিকে চারটি বৈশিষ্ট্য সহ বস্তুর অ্যারেতে রূপান্তর করেছি:

x — দেশের নামের জন্য

মান — সেই দেশের নোবেল বিজয়ীদের সংখ্যার জন্য

বিভাগ - মহাদেশের জন্য

URL — আরও তথ্যের জন্য উইকিপিডিয়ার একটি লিঙ্ক ধারণকারী। (দ্রষ্টব্য: 20 শতকের প্রথম দিকে বিদ্যমান কিছু দেশ এখন অন্য দেশ; ব্রিটানিকা মূল দেশের নাম সংরক্ষণ করে, যা উইকিপিডিয়ায় সবসময় হয় না, তাই দেশ অনুসারে মোট গণনা একটু ভিন্ন।)

 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"} ];

হ্যাঁ, এটা অনেক দেশ!

4. কিছু JS চার্টিং কোড লেখা

অবশেষে, ট্যাগ ক্লাউড নিজেই আঁকতে আমি জাভাস্ক্রিপ্ট কোডের কয়েকটি লাইন যোগ করেছি। এটা মোটামুটি সোজা ছিল.

আমি anychart.onDocumentReady() ফাংশন লিখতে শুরু করেছি।

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

এটির ভিতরে, আমি পূর্ববর্তী ধাপ থেকে ডেটা যোগ করেছি, একটি ট্যাগ ক্লাউড উদাহরণ তৈরি করেছি, চার্ট শিরোনাম সেট করেছি, কন্টেইনার এলিমেন্ট আইডি উল্লেখ করেছি এবং ফলস্বরূপ ট্যাগ ক্লাউড আঁকলাম।

 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(); });

এখানে প্রাথমিক ট্যাগ ক্লাউড দেখতে কেমন ছিল — ইন্টারেক্টিভ সংস্করণটি কোডপেনে পাওয়া যাবে। এছাড়াও, আমি নীচে সম্পূর্ণ কোড রেখেছি।

 <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 ট্যাগ ক্লাউড কাস্টমাইজ করা

সেই বেসিক জাভাস্ক্রিপ্ট ট্যাগ ক্লাউড পাওয়ার পর, আমি চার্টের ভিউ উন্নত করতে কিছু কাস্টমাইজেশন যোগ করার সিদ্ধান্ত নিয়েছি।

1. ফন্ট পরিবর্তন করা

প্রথমত, আমি ফন্ট পরিবর্তন করেছি। শিরোনাম কাস্টমাইজেশনের জন্য, আমি HTML ব্যবহার করেছি।

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

আমি ট্যাগ সমন্বয়.

 chart .normal() .fontWeight(600) .fontVariant('small-caps');

2. কোণ পরিবর্তন করা

দ্বিতীয়ত, আমি ট্যাগগুলিকে অনুভূমিকভাবে দেখানোর জন্য কোণকে শূন্যে সেট করে অভিমুখী করার উপায় পরিবর্তন করেছি।

 chart.angles([0]);

3. চাক্ষুষ চেহারা উন্নত

তৃতীয়ত, আমি রং পরিবর্তন করেছি এবং একটি রঙের পরিসর যোগ করেছি।

আমি anychart.scales.ordinalColor() ফাংশন ব্যবহার করে একটি রঙের স্কেল তৈরি করেছি এবং এতে রঙের একটি অ্যারে পাস করেছি। তারপর আমি ট্যাগ ক্লাউড চার্টে রঙের স্কেল সেট করেছি এবং একটি রঙের পরিসর যোগ করেছি।

 // 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. টুলটিপ উন্নত করা

চতুর্থত, আমি টুলটিপকে উন্নত করেছি, একটি ইঙ্গিত যা দেখায় যখন আপনি একটি ইন্টারেক্টিভ ট্যাগ ক্লাউডে শব্দের উপর হোভার করেন।

আমি টুলটিপ() ফাংশন অ্যাক্সেস করেছি এবং টুলটিপ বিষয়বস্তু পরিবর্তন করতে ফরম্যাট() ফাংশন ব্যবহার করেছি।

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

5. লিঙ্ক খোলার সাথে ইন্টারঅ্যাক্টিভিটি যোগ করা

অবশেষে, আমি একটি ইভেন্ট শ্রোতা যোগ করার সিদ্ধান্ত নিয়েছি যাতে একটি দেশ ক্লিক করা হলে আরও তথ্য প্রদানের জন্য একটি নতুন পৃষ্ঠা খোলা হয়।

যখন একজন দেশের ট্যাগে ক্লিক করে তখন আমি listen() ফাংশনটি "লিসেন" করতে ব্যবহার করেছি। যখন আমি ডেটা অ্যারেতে ইউআরএল প্রপার্টি অ্যাক্সেস করতে পারতাম এবং সেই URL দিয়ে ওয়েব পেজ খুলতে window.open() ফাংশন যোগ করতে পারতাম। আমি একটি নতুন ট্যাবে URL খুলতে _blank সম্পত্তি পাস করেছি।

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

এই সমস্ত কাস্টমাইজেশনের পরে, আমি নীচে প্রদর্শিত একটি দুর্দান্ত, ইন্টারেক্টিভ, জাভাস্ক্রিপ্ট-ভিত্তিক ট্যাগ ক্লাউড পেয়েছিলাম।

এটি ট্যাগ ক্লাউডের চূড়ান্ত সংস্করণ যা আমি সন্তুষ্ট ছিলাম। CodePen- এ সম্পূর্ণ সোর্স কোড সহ এটি পরীক্ষা করে দেখুন, এবং নির্দ্বিধায় রঙ, ইন্টারঅ্যাক্টিভিটি, ইত্যাদি নিয়ে খেলুন — আপনার সমস্ত সৃজনশীলতা ব্যবহার করুন এবং আমি নিশ্চিত আপনি প্রক্রিয়াটি উপভোগ করবেন।

আপনার সুবিধার জন্য, আমি নীচে চূড়ান্ত JS ট্যাগ ক্লাউড কোডও রাখছি।

 <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>

উপসংহার

ঠিক আছে, এইভাবে আমি জাভাস্ক্রিপ্ট (HTML5) ব্যবহার করে আমার ট্যাগ ক্লাউড তৈরি করেছি, দেশ অনুসারে নোবেল বিজয়ীদের পরিসংখ্যান প্রদর্শন করছি। আমি আশা করি আমার ধাপে ধাপে টিউটোরিয়াল আপনাকে দ্রুত এই ধরনের আপনার নিজস্ব চার্ট তৈরি করতে সাহায্য করবে।

মন্তব্যে আপনার প্রশ্ন ছেড়ে দিন, যদি থাকে, এবং আমি আপনার ট্যাগ মেঘ পরীক্ষা করতে চাই!