১. ভূমিকা
লুকার স্টুডিও আপনাকে বিনামূল্যে সুন্দর ডেটা ভিজ্যুয়ালাইজেশন সহ লাইভ, ইন্টারেক্টিভ ড্যাশবোর্ড তৈরি করতে দেয়। বিভিন্ন উৎস থেকে আপনার ডেটা সংগ্রহ করুন এবং সম্পূর্ণ সম্পাদনা ও শেয়ার করার সুবিধা সহ লুকার স্টুডিওতে সীমাহীন রিপোর্ট তৈরি করুন। নিচের স্ক্রিনশটটি লুকার স্টুডিও রিপোর্টের একটি উদাহরণ:
( লুকার স্টুডিওতে এই নমুনা প্রতিবেদনটি দেখতে এখানে ক্লিক করুন )
লুকার স্টুডিওতে লাইন চার্ট, বার চার্ট, পাই চার্ট এবং স্ক্যাটার প্লট সহ বেশ কিছু বিল্ট-ইন চার্ট টাইপ রয়েছে। কমিউনিটি ভিজ্যুয়ালাইজেশন আপনাকে লুকার স্টুডিওতে আপনার নিজস্ব কাস্টম জাভাস্ক্রিপ্ট ভিজ্যুয়ালাইজেশন তৈরি ও ব্যবহার করার সুযোগ দেয়। আপনি আপনার কমিউনিটি ভিজ্যুয়ালাইজেশনগুলো অন্যদের সাথে শেয়ারও করতে পারেন, যাতে তারাও তাদের নিজেদের ডেটা দিয়ে সেগুলো ব্যবহার করতে পারে।
আপনি যা শিখবেন
এই কোড ল্যাবে আপনি শিখবেন:
- লুকার স্টুডিও কমিউনিটি ভিজ্যুয়ালাইজেশন কীভাবে কাজ করে।
- ডিএস-কম্পোনেন্ট হেল্পার লাইব্রেরি (dscc) ব্যবহার করে কীভাবে একটি কমিউনিটি ভিজ্যুয়ালাইজেশন তৈরি করা যায়।
- লুকার স্টুডিও রিপোর্টে আপনার কমিউনিটি ভিজ্যুয়ালাইজেশন কীভাবে ব্যবহার করবেন।
আপনার যা যা লাগবে
এই কোড ল্যাবটি সম্পন্ন করতে আপনার প্রয়োজন হবে:
- ইন্টারনেট ব্যবহারের সুযোগ এবং একটি ওয়েব ব্রাউজার।
- একটি গুগল অ্যাকাউন্ট।
- গুগল ক্লাউড প্ল্যাটফর্ম স্টোরেজ বাকেটে অ্যাক্সেস।
- জাভাস্ক্রিপ্ট সম্পর্কে পরিচিতি।
২. দ্রুত সমীক্ষা
আপনি এই কোডল্যাবটি কেন বেছে নিলেন?
আপনি এই কোডল্যাব/টিউটোরিয়ালটি কীভাবে ব্যবহার করার পরিকল্পনা করছেন?
লুকার স্টুডিওর সাথে আপনার অভিজ্ঞতাকে আপনি কীভাবে মূল্যায়ন করবেন?
আপনার পটভূমিকে সবচেয়ে ভালোভাবে কী বর্ণনা করে?
আপনি কোন জাভাস্ক্রিপ্ট ভিজ্যুয়ালাইজেশন লাইব্রেরিগুলো ব্যবহার করতে আগ্রহী?
জরিপের তথ্য জমা দিতে পরবর্তী পৃষ্ঠায় যান।
৩. কমিউনিটি ভিজ্যুয়ালাইজেশনের সংক্ষিপ্ত বিবরণ
লুকার স্টুডিও কমিউনিটি ভিজ্যুয়ালাইজেশন আপনাকে আপনার ড্যাশবোর্ডে কাস্টম জাভাস্ক্রিপ্ট ভিজ্যুয়ালাইজেশন তৈরি ও ব্যবহার করার সুযোগ দেয়।
এই কোডল্যাবে, আপনি একটি টেবিল চার্ট কমিউনিটি ভিজ্যুয়ালাইজেশন তৈরি করবেন যা ১টি ডাইমেনশন, ১টি মেট্রিক এবং টেবিল হেডার স্টাইলিং সমর্থন করে।
৪. কমিউনিটি ভিজ্যুয়ালাইজেশন উন্নয়ন কর্মপ্রবাহ
একটি কমিউনিটি ভিজ্যুয়ালাইজেশন তৈরি করতে, আপনার একটি গুগল ক্লাউড প্ল্যাটফর্ম স্টোরেজ বাকেটে নিম্নলিখিত ফাইলগুলির প্রয়োজন হবে, যা আপনি পরবর্তী ধাপে তৈরি করবেন:
ফাইলের নাম | ফাইলের ধরন | উদ্দেশ্য |
manifest.json* | JSON | ভিজ্যুয়ালাইজেশন সম্পর্কিত মেটাডেটা এবং সমস্ত ভিজ্যুয়ালাইজেশন রিসোর্সের অবস্থান। |
viz-codelab.json | JSON | প্রপার্টি প্যানেলের জন্য ডেটা এবং স্টাইল কনফিগারেশন বিকল্পসমূহ। |
viz-codelab.js | জাভাস্ক্রিপ্ট | ভিজ্যুয়ালাইজেশনটি রেন্ডার করার জাভাস্ক্রিপ্ট কোড। |
viz-codelab.css (ঐচ্ছিক) | সিএসএস | ভিজ্যুয়ালাইজেশনের জন্য CSS স্টাইল। |
ম্যানিফেস্টই একমাত্র ফাইল যার একটি নির্দিষ্ট নাম থাকা আবশ্যক। অন্যান্য ফাইলগুলোর নাম ভিন্ন হতে পারে, তবে শর্ত হলো ম্যানিফেস্ট ফাইলে তাদের নাম ও অবস্থান উল্লেখ থাকতে হবে।
৫. একটি ‘হ্যালো, ওয়ার্ল্ড!’ ভিজ্যুয়ালাইজেশন লিখুন।
এই অংশে, একটি সাধারণ 'হ্যালো, ওয়ার্ল্ড!' ভিজ্যুয়ালাইজেশন রেন্ডার করার জন্য প্রয়োজনীয় কোড যোগ করবেন।
ভিজ্যুয়ালাইজেশন জাভাস্ক্রিপ্ট সোর্স লিখুন
ধাপ ১: Looker Studio Community Component Library (dscc) পৃষ্ঠা থেকে dscc.min.js ফাইলটি ডাউনলোড করে আপনার ওয়ার্কিং ডিরেক্টরিতে কপি করুন।
ধাপ ২: নিচের কোডটি একটি টেক্সট এডিটরে কপি করুন এবং আপনার লোকাল ওয়ার্কিং ডিরেক্টরিতে viz-codelab-src.js নামে সেভ করুন।
viz-codelab-src.js
function drawViz(data) {
// Container setup.
let container = document.getElementById('container');
if (container) {
container.textContent = '';
} else {
container = document.createElement('div')
container.id = 'container'
document.body.appendChild(container);
}
// Render the viz.
container.textContent = 'Hello, viz world!';
}
// Subscribe to data and style changes. Use the table format for data.
dscc.subscribeToData(drawViz, { transform: dscc.tableTransform });
জাভাস্ক্রিপ্ট বান্ডেল ফাইল প্রস্তুত করুন
ধাপ ৩: ভিজ্যুয়ালাইজেশন হেল্পার লাইব্রেরি ( dscc.min.js ) এবং আপনার viz-codelab-src.js ফাইলের বিষয়বস্তু viz-codelab.js নামের একটি নতুন ফাইলে কপি করে প্রয়োজনীয় সমস্ত জাভাস্ক্রিপ্ট একটি ফাইলে একত্রিত করুন। ফাইল দুটি সংযুক্ত করার জন্য নিম্নলিখিত কমান্ডগুলো চালানো যেতে পারে। প্রতিবার সোর্স ভিজ্যুয়ালাইজেশন কোড আপডেট করার সময় এই ধাপটি পুনরাবৃত্তি করুন ।
লিনাক্স/ম্যাক ওএস সংযুক্তি স্ক্রিপ্ট
cat dscc.min.js > viz-codelab.js
echo >> viz-codelab.js
cat viz-codelab-src.js >> viz-codelab.js
উইন্ডোজ সংযুক্তি স্ক্রিপ্ট
del viz-codelab.js
type nul > viz-codelab.js
type dscc.min.js >> viz-codelab.js
echo.>> viz-codelab.js
type viz-codelab-src.js >> viz-codelab.js
৬. ভিজ্যুয়ালাইজেশন CSS লিখুন
CSS ফাইলটি আপনার ভিজ্যুয়ালাইজেশনের স্টাইলিং নির্ধারণ করে এবং এটি ঐচ্ছিক। নিচের CSS কোডটি কপি করে viz-codelab.css.
viz-codelab.css
table {
width: 100%;
border-collapse: collapse;
}
tr {
border-bottom: 1pt solid #d1d1d1;
}
th, td {
padding: 8px;
text-align: left;
}
৭. JSON কনফিগারেশনটি লিখুন
ভিজ্যুয়ালাইজেশন কনফিগারেশন আপনার ভিজ্যুয়ালাইজেশনের জন্য প্রয়োজনীয় ডেটা এবং স্টাইল অ্যাট্রিবিউটগুলো নির্ধারণ করে। এই কোডল্যাবের ভিজ্যুয়ালাইজেশনটির জন্য একটি ডাইমেনশন ও একটি মেট্রিক প্রয়োজন এবং এতে ফিল কালার নির্বাচনের জন্য একটি স্টাইল এলিমেন্ট রয়েছে। ডাইমেনশন এবং মেট্রিক সম্পর্কে আরও জানুন ।
নিম্নলিখিত কোডটি কপি করে viz-codelab.json. আপনি যে প্রোপার্টিগুলো কনফিগার করতে পারেন সে সম্পর্কে আরও জানতে, কমিউনিটি ভিজ্যুয়ালাইজেশন কনফিগ রেফারেন্স পর্যালোচনা করুন।
viz-codelab.json
{
"data": [
{
"id": "concepts",
"label": "Concepts",
"elements": [
{
"id": "tableDimension",
"label": "Dimension",
"type": "DIMENSION",
"options": {
"min": 1,
"max": 1
}
},
{
"id": "tableMetric",
"label": "Metric",
"type": "METRIC",
"options": {
"min": 1,
"max": 1
}
}
]
}
],
"style": [
{
"id": "header",
"label": "Table Header",
"elements": [
{
"type": "FILL_COLOR",
"id": "headerBg",
"label": "Header Background Color",
"defaultValue": "#e0e0e0"
}
]
}
]
}
৮. একটি ক্লাউড স্টোরেজ প্রজেক্ট এবং বাকেট তৈরি করুন।
ধাপ ১: একটি গুগল ক্লাউড প্ল্যাটফর্ম (GCP) প্রজেক্ট তৈরি করুন অথবা বিদ্যমান কোনো প্রজেক্ট ব্যবহার করুন।
ধাপ ২: একটি GCP বাকেট তৈরি করুন । প্রস্তাবিত স্টোরেজ ক্লাস হলো Regional। ফ্রি টিয়ার সম্পর্কে বিস্তারিত জানতে ক্লাউড স্টোরেজ প্রাইসিং দেখুন। দ্রষ্টব্য: Regional স্টোরেজ ক্লাসের জন্য আপনার ভিজ্যুয়ালাইজেশন স্টোরেজে কোনো খরচ হওয়ার সম্ভাবনা কম।
ধাপ ৩: Buckets/ এর পরের অংশ থেকে শুরু করে আপনার বাকেটের নাম/পাথটি লিখে রাখুন। Looker Studio-তে এই পাথটিকে 'কম্পোনেন্ট আইডি' বলা হয় এবং এটি একটি ভিজ্যুয়ালাইজেশন শনাক্ত ও ডেপ্লয় করতে ব্যবহৃত হয়।
৯. manifest.json ফাইলটি লিখুন।
ম্যানিফেস্ট ফাইলটি আপনার ভিজ্যুয়ালাইজেশনের অবস্থান এবং রিসোর্স সম্পর্কে তথ্য প্রদান করে। এটির নাম অবশ্যই " manifest.json " হতে হবে এবং এটি পূর্ববর্তী ধাপে তৈরি করা বাকেট/পাথে অবস্থিত থাকতে হবে, যা আপনার কম্পোনেন্ট আইডির জন্য ব্যবহৃত একই পাথ।
নিচের কোডটি একটি টেক্সট এডিটরে কপি করে manifest.json.
ম্যানিফেস্ট সম্পর্কে আরও জানতে, ম্যানিফেস্ট রেফারেন্স ডকুমেন্টেশন দেখুন।
manifest.json
{
"name": "Community Visualization",
"logoUrl": "https://raw.githubusercontent.com/googledatastudio/community-visualizations/master/docs/codelab/img/table-chart.png",
"organization": "Looker Studio Codelab",
"organizationUrl": "https://url",
"termsOfServiceUrl": "https://url",
"supportUrl": "https://url",
"packageUrl": "https://url",
"privacyPolicyUrl": "https://url",
"description": "Community Visualization Codelab",
"devMode": true,
"components": [
{
"id": "tableChart",
"name": "Table",
"iconUrl": "https://raw.githubusercontent.com/googledatastudio/community-visualizations/master/docs/codelab/img/table-chart.png",
"description": "A simple table chart.",
"resource": {
"js": "gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET/viz-codelab.js",
"config": "gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET/viz-codelab.json",
"css": "gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET/viz-codelab.css"
}
}
]
}
১০. আপনার ভিজ্যুয়ালাইজেশন ফাইলগুলো গুগল ক্লাউড স্টোরেজে আপলোড করুন।
- ওয়েব ইন্টারফেস অথবা gsutil কমান্ড-লাইন টুল ব্যবহার করে
manifest.json,viz-codelab.js,viz-codelab.json, এবংviz-codelab.cssফাইলগুলো আপনার গুগল ক্লাউড স্টোরেজ বাকেটে আপলোড করুন। প্রতিবার আপনার ভিজ্যুয়ালাইজেশন আপডেট করার সময় এই প্রক্রিয়াটির পুনরাবৃত্তি করুন।
gsutil আপলোড কমান্ড
gsutil cp -a public-read manifest.json gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET
gsutil cp -a public-read viz-codelab.* gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET
১১. লুকার স্টুডিওতে আপনার কমিউনিটি ভিজ্যুয়ালাইজেশন পরীক্ষা করুন।
একটি প্রতিবেদন তৈরি করুন এবং ডেটা যোগ করুন
ধাপ ১: কমিউনিটি ভিজ্যুয়ালাইজেশন নমুনা ডেটা সেটের URL-টি কপি করুন। বিকল্পভাবে, আপনার পছন্দের যেকোনো ডেটা উৎস ব্যবহার করুন এবং নিম্নলিখিত ধাপগুলো এড়িয়ে যান।
ধাপ ২: Looker Studio-তে সাইন ইন করুন । উপরের বাম দিকে, + Create-এ ক্লিক করুন, তারপর Report নির্বাচন করুন।
ধাপ ৩: আপনি রিপোর্ট এডিটর টুলটি দেখতে পাবেন, যেখানে 'অ্যাড ডেটা টু রিপোর্ট' প্যানেলটি খোলা থাকবে।
ধাপ ৪: ‘Connect to data’ ট্যাবে, ‘Google Sheets by Google’ কানেক্টরটি নির্বাচন করুন।
ধাপ ৫: URL নির্বাচন করুন এবং ধাপ ১ থেকে পাওয়া গুগল শিটটির URL পেস্ট করুন।
ধাপ ৬: নিচের ডানদিকে, 'Add'-এ ক্লিক করুন।
ধাপ ৭ : এই রিপোর্টে ডেটা যোগ করার বিষয়টি নিশ্চিত করতে বলা হলে, ' অ্যাড টু রিপোর্ট' (ADD TO REPORT) এ ক্লিক করুন। একটি শিরোনামহীন রিপোর্ট তৈরি হবে এবং নমুনা ডেটা সহ একটি ডিফল্ট টেবিল রিপোর্টে যুক্ত হবে। ঐচ্ছিকভাবে, ডিফল্ট টেবিলটি নির্বাচন করে মুছে ফেলুন, যাতে আপনার কাছে একটি খালি রিপোর্ট থাকে।
রিপোর্টে আপনার কমিউনিটি ভিজ্যুয়ালাইজেশন যোগ করুন।
ধাপ ১: টুলবারে, ‘Community visualizations and components’-এ ক্লিক করুন। 
.
ধাপ ২: কমিউনিটি গ্যালারি খুলতে + আরও দেখুন-এ ক্লিক করুন।
ধাপ ৩: আপনার নিজস্ব ভিজ্যুয়ালাইজেশন তৈরি করুন -এ ক্লিক করুন।
ধাপ ৪: 'টেস্ট অ্যান্ড অ্যাড ইওর কমিউনিটি ভিজ্যুয়ালাইজেশন'-এর অধীনে, ম্যানিফেস্ট পাথটি লিখুন এবং 'সাবমিট'-এ ক্লিক করুন। ম্যানিফেস্ট পাথ হলো গুগল ক্লাউড স্টোরেজ বাকেটের নাম ও পাথ, যা আপনার ভিজ্যুয়ালাইজেশনের ম্যানিফেস্টের অবস্থান নির্দেশ করে এবং এর শুরুতে gs://. উদাহরণস্বরূপ: gs://community-viz-docs/viz-codelab । আপনি যদি একটি বৈধ ম্যানিফেস্ট পাথ লিখে থাকেন, তাহলে একটি ভিজ্যুয়ালাইজেশন কার্ড প্রদর্শিত হবে।
ধাপ ৫: আপনার রিপোর্টে যোগ করতে ভিজ্যুয়ালাইজেশন কার্ডটিতে ক্লিক করুন।
ধাপ ৬: অনুরোধ করা হলে, ভিজ্যুয়ালাইজেশনটি রেন্ডার করার জন্য আপনার সম্মতি দিন।
ধাপ ৭: ঐচ্ছিকভাবে, টেবিলের জন্য নির্বাচিত ডাইমেনশন এবং মেট্রিক আপডেট করুন। আপনি যদি প্রদত্ত নমুনা ডেটা সেট ব্যবহার করেন, তাহলে ডাইমেনশনটি ‘Country’ এবং মেট্রিকটি ‘Population’ হিসেবে সেট করুন। কোডল্যাবের পরবর্তী অংশে না আসা পর্যন্ত ভিজ্যুয়ালাইজেশনের উপর এর কোনো প্রভাব পড়বে না।
ডানদিকের প্রপার্টি প্যানেলটি viz-codelab.json এ কনফিগার করা উপাদানগুলো প্রতিফলিত করে।
সেটআপ প্যানেলের অধীনে ভিজ্যুয়ালাইজেশনে একটি ডাইমেনশন এবং একটি মেট্রিক ব্যবহারের সুযোগ রয়েছে।
স্টাইল প্যানেলের অধীনে, টেবিল হেডারকে স্টাইল করার জন্য ভিজ্যুয়ালাইজেশনটিতে একটিমাত্র এলিমেন্ট রয়েছে। এই পর্যায়ে, পরবর্তী কোনো ধাপে ভিজ্যুয়ালাইজেশন কোড আপডেট না করা পর্যন্ত স্টাইল কন্ট্রোলটির ভিজ্যুয়ালাইজেশনের উপর কোনো প্রভাব থাকবে না। দ্রষ্টব্য: আপনি আপনার ভিজ্যুয়ালাইজেশনের জন্য অতিরিক্ত স্টাইল অপশন দেখতে পাবেন যা আপনি কনফিগারেশন ফাইলে সংজ্ঞায়িত করেননি। এটি প্রত্যাশিত, কারণ সমস্ত ভিজ্যুয়ালাইজেশনের কিছু সাধারণ কন্ট্রোল থাকে যা স্বয়ংক্রিয়ভাবে উপলব্ধ হয়।
১২. ডেটাগুলোকে একটি টেবিল হিসেবে উপস্থাপন করুন।
এই অংশে, আপনি কমিউনিটি ভিজ্যুয়ালাইজেশন নমুনা ডেটা সেটটিকে একটি টেবিল হিসাবে প্রদর্শন করার জন্য আপনার ভিজ্যুয়ালাইজেশনটি আপডেট করবেন।
রেন্ডার করার জন্য ডেটা tables অবজেক্টে উপলব্ধ থাকে এবং এটি আপনার ভিজ্যুয়ালাইজেশন দ্বারা নির্দিষ্ট করা ট্রান্সফর্মের উপর ভিত্তি করে গঠিত হয়। এই কোডল্যাবে, ভিজ্যুয়ালাইজেশনটি টেবিল ফরম্যাট ( tableTransform ) অনুরোধ করেছে, যার মধ্যে একটি headers ' অবজেক্ট এবং একটি rows ' অবজেক্ট রয়েছে, যেগুলোতে একটি টেবিল রেন্ডার করার জন্য আমাদের প্রয়োজনীয় সমস্ত ডেটা থাকে।
ধাপ ১: viz-codelab-src.js ফাইলের বিষয়বস্তু নিচের কোড দিয়ে প্রতিস্থাপন করুন।
viz-codelab-src.js
function drawViz(data) {
// Container setup.
let container = document.getElementById('container');
if (container) {
container.textContent = '';
} else {
container = document.createElement('div')
container.id = 'container'
document.body.appendChild(container);
}
// Create the table.
const table = document.createElement('table');
const tableHeader = document.createElement('thead');
const tableBody = document.createElement('tbody');
data.tables.DEFAULT.headers.forEach(function (column) {
const tableColumn = document.createElement('th');
tableColumn.textContent = column.name;
tableHeader.appendChild(tableColumn);
});
data.tables.DEFAULT.rows.forEach(function(row) {
const tableRow = document.createElement('tr');
row.forEach(function(cell) {
const tableCell = document.createElement('td');
if (typeof cell == 'number') {
tableCell.textContent = new Intl.NumberFormat().format(cell);
} else {
tableCell.textContent = cell;
}
tableRow.appendChild(tableCell);
});
tableBody.appendChild(tableRow);
});
table.appendChild(tableHeader);
table.appendChild(tableBody);
// Render the table.
container.appendChild(table);
}
// Subscribe to data and style changes. Use the table format for data.
dscc.subscribeToData(drawViz, { transform: dscc.tableTransform });
ধাপ ২: জাভাস্ক্রিপ্ট বান্ডেল ফাইলটি প্রস্তুত করুন, তারপর আপনার ভিজ্যুয়ালাইজেশন ফাইলগুলো গুগল ক্লাউড স্টোরেজে আপলোড ও ওভাররাইট করুন।
ধাপ ৩: আপনার কমিউনিটি ভিজ্যুয়ালাইজেশনটি পুনরায় লোড ও পরীক্ষা করতে লুকার স্টুডিও রিপোর্টটি রিফ্রেশ করুন। টেবিলটি এখন ডেটা (অর্থাৎ গুগল শিট) রেন্ডার করে এবং নির্বাচিত ডাইমেনশন ও মেট্রিকের উপর ভিত্তি করে হেডার কলামগুলো প্রদর্শন করে। সমস্ত সারি দেখতে ভিজ্যুয়ালাইজেশনটির আকার পরিবর্তন করুন।
১৩. গতিশীলভাবে স্টাইল পরিবর্তন প্রয়োগ করুন
এই অংশে, আপনি স্টাইল প্যানেলে নির্বাচিত ফিল কালারের উপর ভিত্তি করে টেবিলের হেডারকে স্টাইল করার জন্য ভিজ্যুয়ালাইজেশনটি আপডেট করবেন।
সমস্ত স্টাইল এলিমেন্টের অবস্থা style অবজেক্টে পাওয়া যায়, যেখানে প্রতিটি আইটেম কী আপনার ভিজ্যুয়ালাইজেশন স্টাইল কনফিগারেশনের ( viz-codelab.json ) উপর ভিত্তি করে সংজ্ঞায়িত করা হয়। এই অংশের জন্য, আপনি নির্বাচিত ফিল কালারটি পাবেন এবং সেটি ব্যবহার করে টেবিল হেডারের ব্যাকগ্রাউন্ড কালার আপডেট করবেন।
ধাপ ১: আপনার viz-codelab-src.js ফাইলের কোডটি নিচের কোড দিয়ে প্রতিস্থাপন করুন।
viz-codelab-src.js
function drawViz(data) {
// Container setup.
let container = document.getElementById('container');
if (container) {
container.textContent = '';
} else {
container = document.createElement('div')
container.id = 'container'
document.body.appendChild(container);
}
// Create the table.
const table = document.createElement('table');
const tableHeader = document.createElement('thead');
const tableBody = document.createElement('tbody');
data.tables.DEFAULT.headers.forEach(function (column) {
const tableColumn = document.createElement('th');
tableColumn.textContent = column.name;
tableHeader.appendChild(tableColumn);
});
data.tables.DEFAULT.rows.forEach(function(row) {
const tableRow = document.createElement('tr');
row.forEach(function(cell) {
const tableCell = document.createElement('td');
if (typeof cell == 'number') {
tableCell.textContent = new Intl.NumberFormat().format(cell);
} else {
tableCell.textContent = cell;
}
tableRow.appendChild(tableCell);
});
tableBody.appendChild(tableRow);
});
table.appendChild(tableHeader);
table.appendChild(tableBody);
// Set header color based on style control.
tableHeader.style.backgroundColor = data.style.headerBg.value.color;
// Render the table.
container.appendChild(table);
}
// Subscribe to data and style changes. Use the table format for data.
dscc.subscribeToData(drawViz, { transform: dscc.tableTransform });
ধাপ ২: জাভাস্ক্রিপ্ট বান্ডেল ফাইলটি প্রস্তুত করুন, তারপর আপনার ভিজ্যুয়ালাইজেশন ফাইলগুলো গুগল ক্লাউড স্টোরেজে আপলোড ও ওভাররাইট করুন।
ধাপ ৩: আপনার কমিউনিটি ভিজ্যুয়ালাইজেশনটি পুনরায় লোড ও পরীক্ষা করার জন্য লুকার স্টুডিও রিপোর্টটি রিফ্রেশ করুন।
ধাপ ৪: স্টাইল প্যানেলের অধীনে, টেবিলের হেডারের ব্যাকগ্রাউন্ড কালার পরিবর্তন করতে হেডার ব্যাকগ্রাউন্ড কালার স্টাইল কন্ট্রোলটি ব্যবহার করুন।
অভিনন্দন! আপনি লুকার স্টুডিওতে একটি কমিউনিটি ভিজ্যুয়ালাইজেশন তৈরি করেছেন! এর মাধ্যমেই এই কোডল্যাবটি শেষ হলো। এখন, চলুন দেখি আপনি পরবর্তী কী কী পদক্ষেপ নিতে পারেন।
১৪. পরবর্তী পদক্ষেপ
আপনার কল্পনাশক্তিকে প্রসারিত করুন
- আপনার ভিজ্যুয়ালাইজেশনের জন্য উপলব্ধ ডেটা এবং ফরম্যাট সম্পর্কে আরও জানুন।
- উপলব্ধ স্টাইল উপাদানগুলো সম্পর্কে আরও জানুন এবং আপনার ভিজ্যুয়ালাইজেশনে অতিরিক্ত স্টাইলিং যোগ করুন।
- আপনার ভিজ্যুয়ালাইজেশনে ইন্টারঅ্যাকশন যোগ করুন
- স্থানীয়ভাবে একটি ভিজ্যুয়ালাইজেশন তৈরি করতে শিখুন
কমিউনিটি ভিজ্যুয়ালাইজেশনের মাধ্যমে আরও বেশি কিছু করুন।
- dscc হেল্পার লাইব্রেরি , ম্যানিফেস্ট এবং কনফিগারেশন ফাইলের রেফারেন্সগুলো পর্যালোচনা করুন।
- আপনার ভিজ্যুয়ালাইজেশনটি আমাদের কমিউনিটি ভিজ্যুয়ালাইজেশন গ্যালারিতে জমা দিন।
- লুকার স্টুডিওর জন্য একটি কমিউনিটি কানেক্টর তৈরি করুন।
অতিরিক্ত সম্পদ
এই কোডল্যাবে আলোচিত বিষয়বস্তু আরও গভীরভাবে জানার জন্য নিচে বিভিন্ন রিসোর্স দেওয়া হলো, যা আপনি ব্যবহার করতে পারেন।
সম্পদের ধরণ | ব্যবহারকারীর বৈশিষ্ট্য | ডেভেলপার ফিচার |
ডকুমেন্টেশন | ||
সংবাদ ও আপডেট | লুকার স্টুডিও -তে সাইন আপ করুন > ব্যবহারকারী সেটিংস | |
প্রশ্ন করুন | ||
উদাহরণ |