১. ভূমিকা
লুকার স্টুডিও আপনাকে বিনামূল্যে সুন্দর ডেটা ভিজ্যুয়ালাইজেশন সহ লাইভ, ইন্টারেক্টিভ ড্যাশবোর্ড তৈরি করতে দেয়। বিভিন্ন উৎস থেকে আপনার ডেটা সংগ্রহ করুন এবং সম্পূর্ণ সম্পাদনা এবং ভাগ করে নেওয়ার ক্ষমতা সহ লুকার স্টুডিওতে সীমাহীন প্রতিবেদন তৈরি করুন। নিম্নলিখিত স্ক্রিনশটটি লুকার স্টুডিও রিপোর্টের একটি উদাহরণ:
( লুকার স্টুডিওতে এই উদাহরণ প্রতিবেদনটি দেখতে এখানে ক্লিক করুন )
লুকার স্টুডিও লাইন চার্ট, বার চার্ট, পাই চার্ট এবং স্ক্যাটার প্লট সহ বেশ কয়েকটি অন্তর্নির্মিত চার্ট প্রকার সরবরাহ করে। কমিউনিটি ভিজ্যুয়ালাইজেশন আপনাকে লুকার স্টুডিওতে আপনার নিজস্ব কাস্টম জাভাস্ক্রিপ্ট ভিজ্যুয়ালাইজেশন তৈরি এবং ব্যবহার করার অনুমতি দেয়। আপনি আপনার কমিউনিটি ভিজ্যুয়ালাইজেশনগুলি অন্যদের সাথেও ভাগ করতে পারেন যাতে তারা তাদের নিজস্ব ডেটা ব্যবহার করতে পারে।
তুমি কি শিখবে
এই কোড ল্যাবে আপনি শিখবেন:
- লুকার স্টুডিও কমিউনিটি ভিজ্যুয়ালাইজেশন কীভাবে কাজ করে।
- ds-component helper লাইব্রেরি (dscc) ব্যবহার করে কীভাবে একটি কমিউনিটি ভিজ্যুয়ালাইজেশন তৈরি করবেন।
- লুকার স্টুডিও রিপোর্টে আপনার কমিউনিটি ভিজ্যুয়ালাইজেশন কীভাবে ব্যবহার করবেন।
তোমার যা লাগবে
এই কোড ল্যাবটি সম্পূর্ণ করতে, আপনার প্রয়োজন হবে:
- ইন্টারনেট এবং একটি ওয়েব ব্রাউজার অ্যাক্সেস।
- একটি গুগল অ্যাকাউন্ট।
- গুগল ক্লাউড প্ল্যাটফর্ম স্টোরেজ বাকেট অ্যাক্সেস।
- জাভাস্ক্রিপ্টের সাথে পরিচিতি।
2. দ্রুত জরিপ
তুমি কেন এই কোডল্যাবটি বেছে নিলে?
আপনি এই কোডল্যাব/টিউটোরিয়ালটি কীভাবে ব্যবহার করার পরিকল্পনা করছেন?
লুকার স্টুডিওর সাথে আপনার অভিজ্ঞতাকে আপনি কীভাবে মূল্যায়ন করবেন?
তোমার পটভূমি কোনটি সবচেয়ে ভালোভাবে বর্ণনা করে?
আপনি কোন জাভাস্ক্রিপ্ট ভিজ্যুয়ালাইজেশন লাইব্রেরি ব্যবহার করতে আগ্রহী?
জরিপের তথ্য জমা দিতে পরবর্তী পৃষ্ঠায় যান।
৩. কমিউনিটি ভিজ্যুয়ালাইজেশনের সংক্ষিপ্তসার
লুকার স্টুডিও কমিউনিটি ভিজ্যুয়ালাইজেশন আপনাকে আপনার ড্যাশবোর্ডে কাস্টম জাভাস্ক্রিপ্ট ভিজ্যুয়ালাইজেশন তৈরি এবং ব্যবহার করতে দেয়।
এই কোডল্যাবে, আপনি একটি টেবিল চার্ট কমিউনিটি ভিজ্যুয়ালাইজেশন তৈরি করবেন যা ১ মাত্রা, ১ মেট্রিক এবং টেবিল হেডার স্টাইলিং সমর্থন করে।
৪. কমিউনিটি ভিজ্যুয়ালাইজেশন ডেভেলপমেন্ট ওয়ার্কফ্লো
একটি কমিউনিটি ভিজ্যুয়ালাইজেশন তৈরি করতে, আপনার একটি Google ক্লাউড প্ল্যাটফর্ম স্টোরেজ বাকেটে নিম্নলিখিত ফাইলগুলি প্রয়োজন, যা আপনি পরবর্তী ধাপে তৈরি করবেন:
ফাইলের নাম | ফাইলের ধরণ | উদ্দেশ্য |
ম্যানিফেস্ট.জেসন* | JSON সম্পর্কে | ভিজ্যুয়ালাইজেশন এবং সমস্ত ভিজ্যুয়ালাইজেশন রিসোর্সের অবস্থান সম্পর্কে মেটাডেটা। |
যেমন-কোডেল্যাব.জেসন | JSON সম্পর্কে | প্রপার্টি প্যানেলের জন্য ডেটা এবং স্টাইল কনফিগারেশন বিকল্প। |
যেমন-কোডেল্যাব.জেএস | জাভাস্ক্রিপ্ট | ভিজ্যুয়ালাইজেশন রেন্ডার করার জন্য জাভাস্ক্রিপ্ট কোড। |
যেমন-codelab.css (ঐচ্ছিক) | সিএসএস | ভিজ্যুয়ালাইজেশনের জন্য CSS স্টাইল। |
*ম্যানিফেস্ট হল একমাত্র ফাইল যার একটি প্রয়োজনীয় নাম রয়েছে। অন্যান্য ফাইলের নাম ভিন্নভাবে রাখা যেতে পারে, যতক্ষণ না ম্যানিফেস্ট ফাইলে তাদের নাম/অবস্থান নির্দিষ্ট করা থাকে।
৫. একটি হ্যালো, ওয়ার্ল্ড! ভিজ্যুয়ালাইজেশন লিখুন
এই বিভাগে, আপনি একটি সহজ Hello, world! ভিজ্যুয়ালাইজেশন রেন্ডার করার জন্য প্রয়োজনীয় কোড যোগ করবেন।
ভিজ্যুয়ালাইজেশন জাভাস্ক্রিপ্ট সোর্স লিখুন
ধাপ ১: লুকার স্টুডিও কমিউনিটি কম্পোনেন্ট লাইব্রেরি (dscc) পৃষ্ঠা থেকে dscc.min.js ফাইলটি ডাউনলোড করুন এবং এটি আপনার ওয়ার্কিং ডিরেক্টরিতে কপি করুন।
ধাপ ২: নিচের কোডটি একটি টেক্সট এডিটরে কপি করুন এবং আপনার স্থানীয় ওয়ার্কিং ডিরেক্টরিতে viz-codelab-src.js হিসেবে সংরক্ষণ করুন।
যেমন-কোডেল্যাব-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 টি কপি করুন এবং 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. আপনি যে বৈশিষ্ট্যগুলি কনফিগার করতে পারেন সে সম্পর্কে আরও জানতে, কমিউনিটি ভিজ্যুয়ালাইজেশন কনফিগ রেফারেন্সটি পর্যালোচনা করুন।
যেমন-কোডেল্যাব.জেসন
{
"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 বাকেট তৈরি করুন । প্রস্তাবিত স্টোরেজ ক্লাস হল রিজিওনাল। ফ্রি টিয়ার সম্পর্কে বিস্তারিত জানতে ক্লাউড স্টোরেজ প্রাইসিং দেখুন। দ্রষ্টব্য: রিজিওনাল স্টোরেজ ক্লাসের জন্য আপনার ভিজ্যুয়ালাইজেশন স্টোরেজের কোনও খরচ হওয়ার সম্ভাবনা কম।
ধাপ ৩: আপনার বাকেটের নাম/পাথটি নোট করুন, Buckets/ এর পরে বিভাগ দিয়ে শুরু করুন। Looker Studio-তে পাথটিকে "কম্পোনেন্ট আইডি" হিসাবে উল্লেখ করা হয় এবং এটি একটি ভিজ্যুয়ালাইজেশন সনাক্ত এবং স্থাপন করতে ব্যবহৃত হয়।
৯. 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 কমান্ড-লাইন টুল ব্যবহার করে আপনার Google Cloud Storage বাকেটে
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 কপি করুন। বিকল্পভাবে, আপনার পছন্দের যেকোনো ডেটা উৎস ব্যবহার করুন এবং নিম্নলিখিত ধাপগুলি এড়িয়ে যান।
ধাপ ২: লুকার স্টুডিওতে সাইন ইন করুন । উপরের বাম দিকে, + তৈরি করুন এ ক্লিক করুন, তারপর রিপোর্ট নির্বাচন করুন।
ধাপ ৩: আপনি রিপোর্ট এডিটর টুলটি দেখতে পাবেন, যেখানে রিপোর্টে ডেটা যোগ করুন প্যানেলটি খোলা থাকবে।
ধাপ ৪: Connect to data ট্যাবে, Google Sheets by Google সংযোগকারী নির্বাচন করুন।
ধাপ ৫: URL নির্বাচন করুন এবং ধাপ ১ থেকে Google Sheet এর URL পেস্ট করুন।
ধাপ ৬: নীচে ডানদিকে, যোগ করুন এ ক্লিক করুন।
ধাপ ৭ : যদি "আপনি এই প্রতিবেদনে ডেটা যোগ করতে চলেছেন" নিশ্চিত করতে বলা হয়, তাহলে ADD TO REPORT এ ক্লিক করুন। একটি শিরোনামহীন প্রতিবেদন তৈরি করা হয় এবং নমুনা ডেটা সহ প্রতিবেদনে একটি ডিফল্ট টেবিল যোগ করা হয়। ঐচ্ছিকভাবে, ডিফল্ট টেবিলটি নির্বাচন করুন এবং মুছে ফেলুন যাতে আপনার কাছে একটি ফাঁকা প্রতিবেদন থাকে।
রিপোর্টে আপনার কমিউনিটি ভিজ্যুয়ালাইজেশন যোগ করুন।
ধাপ ১: টুলবারে, কমিউনিটি ভিজ্যুয়ালাইজেশন এবং উপাদানগুলিতে ক্লিক করুন। 
.
ধাপ ২: কমিউনিটি গ্যালারি খুলতে + আরও অন্বেষণ করুন এ ক্লিক করুন।
ধাপ ৩: আপনার নিজস্ব ভিজ্যুয়ালাইজেশন তৈরি করুন এ ক্লিক করুন
ধাপ ৪: Test and add your community visualization এর অধীনে, Manifest path লিখুন এবং Submit এ ক্লিক করুন। Manifest path হল Google Cloud Storage bucket name এবং path যা আপনার ভিজ্যুয়ালাইজেশনের Manifest এর অবস্থান নির্দেশ করে, যার পূর্বে gs://. উদাহরণস্বরূপ: gs://community-viz-docs/viz-codelab । যদি আপনি একটি বৈধ Manifest path প্রবেশ করিয়ে থাকেন, তাহলে একটি ভিজ্যুয়ালাইজেশন কার্ড রেন্ডার করা উচিত।
ধাপ ৫: আপনার রিপোর্টে ভিজ্যুয়ালাইজেশন কার্ড যোগ করতে এটিতে ক্লিক করুন।
ধাপ ৬: যদি অনুরোধ করা হয়, তাহলে ভিজ্যুয়ালাইজেশন রেন্ডার করার জন্য আপনার সম্মতি দিন।
ধাপ ৭: ঐচ্ছিকভাবে, টেবিলের জন্য নির্বাচিত মাত্রা এবং মেট্রিক আপডেট করুন। যদি আপনি প্রদত্ত নমুনা ডেটা সেট ব্যবহার করেন, তাহলে মাত্রাটি দেশ এবং মেট্রিকটি জনসংখ্যাতে সেট করুন। কোডল্যাবের পরে ভিজ্যুয়ালাইজেশনের উপর এর কোনও প্রভাব পড়বে না।
ডানদিকের প্রপার্টি প্যানেলটি viz-codelab.json এ কনফিগার করা উপাদানগুলিকে প্রতিফলিত করে।
সেটআপ প্যানেলের অধীনে, ভিজ্যুয়ালাইজেশন একটি মাত্রা এবং একটি মেট্রিকের জন্য অনুমতি দেয়।
স্টাইল প্যানেলের অধীনে, ভিজ্যুয়ালাইজেশনে টেবিল হেডার স্টাইল করার জন্য একটি একক উপাদান রয়েছে। এই মুহুর্তে, পরবর্তী ধাপে ভিজ্যুয়ালাইজেশন কোড আপডেট না হওয়া পর্যন্ত স্টাইল নিয়ন্ত্রণ ভিজ্যুয়ালাইজেশনের উপর কোনও প্রভাব ফেলবে না। দ্রষ্টব্য: আপনি আপনার ভিজ্যুয়ালাইজেশনের জন্য অতিরিক্ত স্টাইল বিকল্প দেখতে পাবেন যা আপনি কনফিগারেশন ফাইলে সংজ্ঞায়িত করেননি। এটি প্রত্যাশিত, যেহেতু সমস্ত ভিজ্যুয়ালাইজেশনে সাধারণ নিয়ন্ত্রণের একটি সেট থাকে যা স্বয়ংক্রিয়ভাবে উপলব্ধ।
১২. ডেটা টেবিল হিসেবে রেন্ডার করুন
এই বিভাগে, আপনি আপনার ভিজ্যুয়ালাইজেশন আপডেট করবেন যাতে কমিউনিটি ভিজ্যুয়ালাইজেশন নমুনা ডেটা সেটটি একটি টেবিল হিসাবে প্রদর্শিত হয়।
রেন্ডার করার জন্য ডেটা tables অবজেক্টে পাওয়া যায় এবং আপনার ভিজ্যুয়ালাইজেশন দ্বারা নির্দিষ্ট ট্রান্সফর্মের উপর ভিত্তি করে গঠন করা হয়। এই কোডল্যাবে ভিজ্যুয়ালাইজেশন টেবিল ফর্ম্যাট ( tableTransform ) অনুরোধ করেছে যার মধ্যে একটি headers অবজেক্ট এবং একটি rows অবজেক্ট রয়েছে যাতে একটি টেবিল রেন্ডার করার জন্য আমাদের প্রয়োজনীয় সমস্ত ডেটা থাকে।
ধাপ ১: viz-codelab-src.js এর বিষয়বস্তু নীচের কোড দিয়ে প্রতিস্থাপন করুন।
যেমন-কোডেল্যাব-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 ফাইলের কোডটি নীচের কোডটি দিয়ে প্রতিস্থাপন করুন।
যেমন-কোডেল্যাব-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 হেল্পার লাইব্রেরি , ম্যানিফেস্ট এবং কনফিগারেশন ফাইলের রেফারেন্সগুলি পর্যালোচনা করুন।
- আপনার ভিজ্যুয়ালাইজেশন আমাদের কমিউনিটি ভিজ্যুয়ালাইজেশন গ্যালারিতে জমা দিন।
- লুকার স্টুডিওর জন্য একটি কমিউনিটি সংযোগকারী তৈরি করুন।
অতিরিক্ত সম্পদ
এই কোডল্যাবে অন্তর্ভুক্ত উপাদানগুলির আরও গভীরে খনন করতে সাহায্য করার জন্য নীচে বিভিন্ন সংস্থান রয়েছে যা আপনি অ্যাক্সেস করতে পারেন।
রিসোর্সের ধরণ | ব্যবহারকারীর বৈশিষ্ট্য | ডেভেলপার বৈশিষ্ট্য |
ডকুমেন্টেশন | ||
খবর ও আপডেট | লুকার স্টুডিও > ব্যবহারকারীর সেটিংসে সাইন আপ করুন। | |
প্রশ্ন জিজ্ঞাসা করুন | ||
উদাহরণ |