Google ডেটা স্টুডিও ব্যবহারকারীদের বিনামূল্যে সুন্দর ডেটা ভিজ্যুয়ালাইজেশন সহ লাইভ, ইন্টারেক্টিভ ড্যাশবোর্ড তৈরি করতে দেয়৷ ব্যবহারকারীরা বিভিন্ন উত্স থেকে তাদের ডেটা আনতে পারে এবং সম্পূর্ণ সম্পাদনা এবং ভাগ করার ক্ষমতা সহ ডেটা স্টুডিওতে প্রতিবেদন তৈরি করতে পারে। এখানে ডেটা স্টুডিও ড্যাশবোর্ডের একটি উদাহরণ রয়েছে:
( ডেটা স্টুডিওতে এই উদাহরণ প্রতিবেদনটি দেখতে এখানে ক্লিক করুন )
ডেটা স্টুডিও লাইন চার্ট, বার চার্ট, পাই চার্ট এবং স্ক্যাটার প্লট সহ বেশ কয়েকটি অন্তর্নির্মিত চার্ট প্রকার সরবরাহ করে। কমিউনিটি ভিজ্যুয়ালাইজেশন আপনাকে ডেটা স্টুডিওতে আপনার নিজস্ব কাস্টম জাভাস্ক্রিপ্ট ভিজ্যুয়ালাইজেশন তৈরি এবং ব্যবহার করার অনুমতি দেয়। কমিউনিটি ভিজ্যুয়ালাইজেশনগুলি ডেটা স্টুডিও বিকাশকারী সম্প্রদায় দ্বারা তৈরি করা হয় - যে কোনও বিকাশকারী এটি তৈরি করতে পারে৷ আপনি অন্যদের সাথে আপনার সম্প্রদায়ের ভিজ্যুয়ালাইজেশন শেয়ার করতে পারেন যাতে তারা তাদের নিজস্ব ডেটা ব্যবহার করতে পারে।
আপনি কি শিখবেন
এই কোড ল্যাবে, আপনি শিখবেন:
- কিভাবে একটি Google ডেটা স্টুডিও কমিউনিটি ভিজ্যুয়ালাইজেশন কাজ করে
- ডিএস-কম্পোনেন্ট হেল্পার লাইব্রেরি ব্যবহার করে কীভাবে একটি কমিউনিটি ভিজ্যুয়ালাইজেশন তৈরি করবেন
- একটি ডেটা স্টুডিও ড্যাশবোর্ডে কীভাবে আপনার সম্প্রদায়ের ভিজ্যুয়ালাইজেশনকে একীভূত করবেন
আপনি কি প্রয়োজন হবে
এই কোড ল্যাব সম্পূর্ণ করতে, আপনার প্রয়োজন হবে:
- ইন্টারনেট এবং একটি ওয়েব ব্রাউজারে অ্যাক্সেস
- একটি Google অ্যাকাউন্ট
- Google ক্লাউড প্ল্যাটফর্ম স্টোরেজ বালতিতে অ্যাক্সেস
- জাভাস্ক্রিপ্টের সাথে পরিচিতি
কেন আপনি এই কোডল্যাব চয়ন করেছেন?
আপনি কিভাবে এই কোডল্যাব/টিউটোরিয়াল ব্যবহার করার পরিকল্পনা করছেন?
ডেটা স্টুডিওর সাথে আপনার অভিজ্ঞতাকে আপনি কীভাবে মূল্যায়ন করবেন?
আপনার ব্যাকগ্রাউন্ডকে কী সেরা বর্ণনা করে?
আপনি কোন জাভাস্ক্রিপ্ট ভিজ্যুয়ালাইজেশন লাইব্রেরিতে আগ্রহী?
সমীক্ষা তথ্য জমা দিতে পরবর্তী পৃষ্ঠায় যান।
ডেটা স্টুডিও কমিউনিটি ভিজ্যুয়ালাইজেশন আপনাকে কাস্টম জাভাস্ক্রিপ্ট ভিজ্যুয়ালাইজেশন তৈরি এবং ব্যবহার করতে দেয় যা আপনার ড্যাশবোর্ডে একত্রিত হয়।
এই কোডল্যাবে, আপনি একটি বার চার্ট কমিউনিটি ভিজ্যুয়ালাইজেশন তৈরি করবেন যা 1 মাত্রা, 1 মেট্রিক এবং বার কালার স্টাইল সমর্থন করে।
একটি কমিউনিটি ভিজ্যুয়ালাইজেশন তৈরি করতে, আপনার Google ক্লাউড প্ল্যাটফর্ম স্টোরেজ বাকেটের নিম্নলিখিত ফাইলগুলির প্রয়োজন, যা আপনি পরবর্তী ধাপে তৈরি করবেন৷
ফাইলের নাম | ফাইলের ধরন | উদ্দেশ্য |
manifest.json* | JSON | ভিজ্যুয়ালাইজেশন এবং অন্যান্য সম্পদের অবস্থান সম্পর্কে মেটাডেটা প্রদান করে। |
myViz.json | JSON | সম্পত্তি প্যানেলের জন্য ডেটা এবং শৈলী কনফিগারেশন বিকল্প প্রদান করে। |
myViz.js | জাভাস্ক্রিপ্ট | ভিজ্যুয়ালাইজেশন প্রদর্শনের জন্য প্রয়োজনীয় জাভাস্ক্রিপ্ট কোড প্রদান করে। |
myViz.css (ঐচ্ছিক) | সিএসএস | ভিজ্যুয়ালাইজেশনের জন্য স্টাইলিং প্রদান করে। |
*মেনিফেস্ট হল একমাত্র ফাইল যার একটি প্রয়োজনীয় নাম রয়েছে। অন্যান্য ফাইলগুলিকে ভিন্নভাবে নামকরণ করা যেতে পারে, যতক্ষণ না তাদের নাম/অবস্থান আপনার ম্যানিফেস্ট ফাইলে নির্দিষ্ট করা থাকে।
এই বিভাগে, আপনি আপনার JavaScript ফাইলে ডেটা, স্টাইল পরিবর্তন এবং ভিজ্যুয়ালাইজেশন রেন্ডারিং পরিচালনা করার জন্য প্রয়োজনীয় কোড যোগ করবেন।
ভিজ্যুয়ালাইজেশন উৎস লিখুন
ধাপ 1: ডেটা স্টুডিও কমিউনিটি কম্পোনেন্ট লাইব্রেরি থেকে dscc.min.js ফাইলটি ডাউনলোড করুন এবং এটি আপনার কাজের ডিরেক্টরিতে অনুলিপি করুন।
ধাপ 2: নিম্নলিখিত কোডটি একটি টেক্সট এডিটরে কপি করুন এবং আপনার স্থানীয় ওয়ার্কিং ডিরেক্টরিতে myVizSource.js হিসাবে সংরক্ষণ করুন।
myVizSource.js
function drawViz(data) {
// set margins + canvas size
const margin = { top: 10, bottom: 50, right: 10, left: 10 };
const height = dscc.getHeight() - margin.top - margin.bottom;
const width = dscc.getWidth() - margin.left - margin.right;
// remove the svg if it already exists
if (document.querySelector("svg")) {
let oldSvg = document.querySelector("svg");
oldSvg.parentNode.removeChild(oldSvg);
}
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("height", `${height}px`);
svg.setAttribute("width", `${width}px`);
const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rect.setAttribute('width', `${width/2}px`);
rect.setAttribute('height', `${height/2}px`);
rect.style.fill = 'blue';
svg.append(rect);
document.body.appendChild(svg);
}
// subscribe to data and style changes
dscc.subscribeToData(drawViz, { transform: dscc.objectTransform });চূড়ান্ত জাভাস্ক্রিপ্ট ফাইল প্রস্তুত করুন
ধাপ 3: ভিজ্যুয়ালাইজেশন হেল্পার লাইব্রেরি ( dscc.min.js ) এবং আপনার myVizSource.js ফাইলের বিষয়বস্তু myViz.js নামে একটি নতুন ফাইলে কপি করে একটি ফাইলে প্রয়োজনীয় সমস্ত জাভাস্ক্রিপ্ট একত্রিত করুন। ফাইলগুলিকে সংযুক্ত করতে নিম্নলিখিত কমান্ডগুলি চালান। প্রতিবার আপনার ভিজ্যুয়ালাইজেশন কোড আপডেট করার সময় এই ধাপটি পুনরাবৃত্তি করুন।
লিনাক্স/ম্যাক ওএস সংযোজন স্ক্রিপ্ট
cat dscc.min.js > myViz.js
echo >> myViz.js
cat myVizSource.js >> myViz.jsউইন্ডোজ স্ক্রিপ্ট
del myViz.js
type nul > myViz.js
type dscc.min.js >> myViz.js
echo.>> myViz.js
type myVizSource.js >> myViz.js CSS ফাইল আপনার ভিজ্যুয়ালাইজেশনের জন্য স্টাইলিং সংজ্ঞায়িত করে। নিম্নলিখিত কোডটি অনুলিপি করুন এবং এটিকে myViz.css.
myViz.css
#myVizTitle {
color: black;
font-size: 24px;
text-align: center;
margin: 0 auto;
}ভিজ্যুয়ালাইজেশন কনফিগারেশন json ফাইলটি আপনার ভিজ্যুয়ালাইজেশন দ্বারা সমর্থিত এবং প্রয়োজনীয় ডেটা এবং শৈলী বৈশিষ্ট্যগুলিকে সংজ্ঞায়িত করে৷ এই কোডল্যাবে আপনি যে ভিজ্যুয়ালাইজেশন তৈরি করবেন তা একটি মাত্রা এবং একটি মেট্রিক সমর্থন করে এবং একটি রঙ নির্বাচন করতে একটি শৈলী উপাদান প্রয়োজন৷ মাত্রা এবং মেট্রিক্স সম্পর্কে আরও জানুন ।
নিম্নলিখিত কোডটি অনুলিপি করুন এবং এটি myViz.json. আপনি যে বৈশিষ্ট্যগুলি কনফিগার করতে পারেন সে সম্পর্কে আরও জানতে, কনফিগার রেফারেন্স ডকুমেন্টেশন দেখুন।
myViz.json
{
"data": [
{
"id": "concepts",
"label": "Concepts",
"elements": [
{
"id": "barDimension",
"label": "Dimension",
"type": "DIMENSION",
"options": {
"min": 1,
"max": 1
}
},
{
"id": "barMetric",
"label": "Metric",
"type": "METRIC",
"options": {
"min": 1,
"max": 1
}
}
]
}
],
"style": [
{
"id": "color",
"label": "Colors",
"elements": [
{
"type": "FONT_COLOR",
"id": "barColor",
"label": "Bar Color",
"defaultValue": "black"
}
]
}
]
}ধাপ 1: একটি Google ক্লাউড প্ল্যাটফর্ম (GCP) প্রকল্প তৈরি করুন
ধাপ 2: একটি GCP বালতি তৈরি করুন । প্রস্তাবিত স্টোরেজ ক্লাস হল আঞ্চলিক। বিনামূল্যের স্তরগুলির বিশদ বিবরণের জন্য ক্লাউড সঞ্চয়স্থান মূল্য নির্ধারণে যান৷ আপনার ভিজ্যুয়ালাইজেশন স্টোরেজ আঞ্চলিক স্টোরেজ ক্লাসের জন্য কোনো খরচ বহন করবে এমন সম্ভাবনা নেই।
ধাপ 3: আপনার বালতির নাম/পাথ নোট করুন, Buckets/ এর পরের বিভাগটি দিয়ে শুরু করুন। ডেটা স্টুডিও এটিকে "কম্পোনেন্ট আইডি" বলে, এবং এটি সনাক্ত করতে এবং স্থাপন করতে ব্যবহার করা হবে।
ম্যানিফেস্ট ফাইল আপনার ভিজ্যুয়ালাইজেশন অবস্থান এবং সম্পদ সম্পর্কে তথ্য প্রদান করে। এটিকে অবশ্যই " manifest.json " নাম দিতে হবে, এবং এটি অবশ্যই পূর্ববর্তী ধাপে তৈরি করা বালতিতে অবস্থিত হতে হবে (আপনার কম্পোনেন্ট আইডির জন্য ব্যবহৃত একইটি)।
নিম্নলিখিত কোডটি একটি পাঠ্য সম্পাদকে অনুলিপি করুন এবং এটি manifest.json.
ম্যানিফেস্ট সম্পর্কে আরও জানতে, ম্যানিফেস্ট রেফারেন্স ডকুমেন্টেশন দেখুন।
manifest.json
{
"name": "Community Visualization",
"logoUrl": "https://raw.githubusercontent.com/googledatastudio/community-visualizations/master/docs/codelab/img/bar_chart.png",
"organization": "Data Studio Codelab",
"supportUrl": "https://url",
"packageUrl": "https://url",
"privacyPolicyUrl": "https://url",
"description": "Community Visualization Codelab",
"devMode": true,
"components": [{
"id": "barChart",
"name": "Bar Chart",
"iconUrl": "https://raw.githubusercontent.com/googledatastudio/community-visualizations/master/docs/codelab/img/bar_chart.png",
"description": "Bar chart written in d3.js",
"resource": {
"js": "MY_GOOGLE_CLOUD_STORAGE_BUCKET/myViz.js",
"config": "MY_GOOGLE_CLOUD_STORAGE_BUCKET/myViz.json",
"css": "MY_GOOGLE_CLOUD_STORAGE_BUCKET/myViz.css"
}
}]
}
- ওয়েব ইন্টারফেস বা gsutil কমান্ড-লাইন টুল ব্যবহার করে Google ক্লাউড স্টোরেজ বালতিতে
manifest.json,myViz.js,myViz.json, এবংmyViz.cssফাইলগুলি আপলোড করুন৷ প্রতিবার আপনার ভিজ্যুয়ালাইজেশন আপডেট করার সময় এটি পুনরাবৃত্তি করুন।
gsutil আপলোড কমান্ড
gsutil cp -a public-read manifest.json gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET
gsutil cp -a public-read myViz.* gs://MY_GOOGLE_CLOUD_STORAGE_BUCKETধাপ 1: কমিউনিটি ভিজ্যুয়ালাইজেশন নমুনা ডেটা সেটের URLটি অনুলিপি করুন।
ধাপ 2: ডেটা স্টুডিওতে যান এবং একটি নতুন প্রতিবেদন শুরু করার অধীনে ফাঁকা ক্লিক করুন।
ধাপ 3: নীচে ডানদিকে, নতুন ডেটা উত্স তৈরি করুন ক্লিক করুন৷
ধাপ 4: Google পত্রক সংযোগকারী নির্বাচন করুন।
ধাপ 5: URL ক্ষেত্রে, উপরের ধাপ 1 থেকে Google পত্রকের URL লিখুন।
ধাপ 6: পৃষ্ঠার উপরের ডানদিকে, সংযোগ ক্লিক করুন
ধাপ 7: ডেটা সোর্স হেডারে, কমিউনিটি ভিজ্যুয়ালাইজেশন অ্যাক্সেসে ক্লিক করুন, চালু নির্বাচন করুন এবং সংরক্ষণ করুন ক্লিক করুন।
ধাপ 7 : আপনার প্রতিবেদনে ডেটা উৎস যোগ করার জন্য প্রদর্শিত বক্সে প্রতিবেদনে যোগ করুন-এ ক্লিক করুন।
ধাপ 6: টুলবারে, কমিউনিটি ভিজ্যুয়ালাইজেশন বোতামে ক্লিক করুন 
. এটি একটি ড্রপ-ডাউন খোলে।
ধাপ 7: "ম্যানিফেস্ট পাথ" এর জন্য টেক্সট ইনপুটে gs:// ( উদাহরণস্বরূপ: gs://community-viz-docs/myViz) দ্বারা প্রিফিক্স করা আপনার বালতির নাম পেস্ট করুন, "কম্পোনেন্ট আইডি" এর অধীনে barChart যোগ করুন এবং "ADD" এ ক্লিক করুন। 
আপনার ভিজ্যুয়ালাইজেশন স্বয়ংক্রিয়ভাবে আপনার ক্যানভাসে আঁকা হবে। ডানদিকের সম্পত্তি প্যানেলটি আপনার myViz.json ফাইলের উপাদানগুলিকে প্রতিফলিত করবে।
ভিজ্যুয়ালাইজেশন একটি মাত্রা এবং একটি মেট্রিকের জন্য অনুমতি দেয়।
একটি শৈলী উপাদান নির্দিষ্ট করা হয়েছিল - "বার রঙ" লেবেলযুক্ত একটি ফন্ট রঙ নির্বাচককে রেন্ডারিং। পরবর্তী ধাপে, আপনি ভিজ্যুয়ালাইজেশন প্রভাবিত করতে এই নির্বাচক ব্যবহার করবেন।
এই বিভাগে, আপনি আপনার ভিজ্যুয়ালাইজেশন আপডেট করতে রঙ নির্বাচক শৈলী উপাদান ব্যবহার করবেন।
ধাপ 1: নিচের কোড দিয়ে আপনার myVizSource.js ফাইলের কোডটি প্রতিস্থাপন করুন।
myVizSource.js
function drawViz(data) {
// set margins + canvas size
const margin = { top: 10, bottom: 50, right: 10, left: 10 };
const height = dscc.getHeight() - margin.top - margin.bottom;
const width = dscc.getWidth() - margin.left - margin.right;
// remove the svg if it already exists
if (document.querySelector("svg")) {
let oldSvg = document.querySelector("svg");
oldSvg.parentNode.removeChild(oldSvg);
}
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("height", `${height}px`);
svg.setAttribute("width", `${width}px`);
const fillColor = data.style.barColor.value
? data.style.barColor.value.color
: data.style.barColor.defaultValue;
const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rect.setAttribute('width', `${width/2}px`);
rect.setAttribute('height', `${height/2}px`);
rect.style.fill = fillColor;
svg.append(rect);
document.body.appendChild(svg);
}
// subscribe to data and style changes
dscc.subscribeToData(drawViz, { transform: dscc.objectTransform });ধাপ 2: সম্মিলিত জাভাস্ক্রিপ্ট ফাইল তৈরি করুন, তারপর Google ক্লাউড স্টোরেজে আপনার ভিজ্যুয়ালাইজেশন ফাইলগুলি পুনরায় আপলোড করুন।
ধাপ 3: ডেটা স্টুডিও রিপোর্ট রিফ্রেশ করুন যেখানে আপনি আপনার কমিউনিটি ভিজ্যুয়ালাইজেশন পরীক্ষা করেছেন।
আপনি স্টাইল মেনুতে নির্বাচক ব্যবহার করে আয়তক্ষেত্রের রঙ পরিবর্তন করতে সক্ষম হবেন।
এই বিভাগে, আপনি কমিউনিটি ভিজ্যুয়ালাইজেশন নমুনা ডেটা সেট থেকে ডেটা ব্যবহার করে একটি বার চার্ট আঁকার জন্য আপনার ভিজ্যুয়ালাইজেশন আপডেট করবেন। দ্রষ্টব্য: ডেটা স্টুডিও ভিজ্যুয়ালাইজেশনে সর্বাধিক 2,500 সারি ডেটা প্রদান করে।
ধাপ 1: নিচের কোড দিয়ে আপনার myVizSource.js ফাইলের কোডটি প্রতিস্থাপন করুন।
myVizSource.js
function drawViz(data) {
let rowData = data.tables.DEFAULT;
// set margins + canvas size
const margin = { top: 10, bottom: 50, right: 10, left: 10 };
const padding = { top: 15, bottom: 15 };
const height = dscc.getHeight() - margin.top - margin.bottom;
const width = dscc.getWidth() - margin.left - margin.right;
// remove the svg if it already exists
if (document.querySelector("svg")) {
let oldSvg = document.querySelector("svg");
oldSvg.parentNode.removeChild(oldSvg);
}
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("height", `${height}px`);
svg.setAttribute("width", `${width}px`);
const fillColor = data.style.barColor.value
? data.style.barColor.value.color
: data.style.barColor.defaultValue;
const maxBarHeight = height - padding.top - padding.bottom;
const barWidth = width / (rowData.length * 2);
// obtain the maximum bar metric value for scaling purposes
let largestMetric = 0;
rowData.forEach(function(row) {
largestMetric = Math.max(largestMetric, row["barMetric"][0]);
});
rowData.forEach(function(row, i) {
// 'barDimension' and 'barMetric' come from the id defined in myViz.json
// 'dimId' is Data Studio's unique field ID, used for the filter interaction
const barData = {
dim: row["barDimension"][0],
met: row["barMetric"][0],
dimId: data.fields["barDimension"][0].id
};
// calculates the height of the bar using the row value, maximum bar
// height, and the maximum metric value calculated earlier
let barHeight = Math.round((barData["met"] * maxBarHeight) / largestMetric);
// normalizes the x coordinate of the bar based on the width of the convas
// and the width of the bar
let barX = (width / rowData.length) * i + barWidth / 2;
// create the "bar"
let rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rect.setAttribute("x", barX);
rect.setAttribute("y", maxBarHeight - barHeight);
rect.setAttribute("width", barWidth);
rect.setAttribute("height", barHeight);
rect.setAttribute("data", JSON.stringify(barData));
rect.style.fill = fillColor;
svg.appendChild(rect);
// add text labels
let text = document.createElementNS("http://www.w3.org/2000/svg", "text");
let textX = barX + barWidth / 2;
text.setAttribute("x", textX);
text.setAttribute("text-anchor", "middle");
let textY = maxBarHeight + padding.top;
text.setAttribute("y", textY);
text.setAttribute("fill", fillColor)
text.innerHTML = barData["dim"];
svg.appendChild(text);
});
document.body.appendChild(svg);
}
// subscribe to data and style changes
dscc.subscribeToData(drawViz, { transform: dscc.objectTransform });ধাপ 2: সম্মিলিত জাভাস্ক্রিপ্ট ফাইল তৈরি করুন, তারপর Google ক্লাউড স্টোরেজে আপনার ভিজ্যুয়ালাইজেশন ফাইলগুলি পুনরায় আপলোড করুন।
ধাপ 3: ডেটা স্টুডিও রিপোর্ট রিফ্রেশ করুন যেখানে আপনি আপনার কমিউনিটি ভিজ্যুয়ালাইজেশন পরীক্ষা করেছেন। আপনার Google পত্রকের ডেটা থেকে তৈরি লেবেল সহ একটি বার চার্ট থাকা উচিত৷ বারগুলির রঙ পরিবর্তন করতে, স্টাইল "বার রঙ" নির্বাচনকারীতে নির্বাচিত রঙটি পরিবর্তন করুন।
এই বিভাগে, আপনি কমিউনিটি ভিজ্যুয়ালাইজেশন নমুনা ডেটা সেট থেকে ডেটা ব্যবহার করে একটি বার চার্ট আঁকার জন্য আপনার ভিজ্যুয়ালাইজেশন আপডেট করবেন।
ধাপ 1: নিচের কোড দিয়ে আপনার myVizSource.js ফাইলের কোডটি প্রতিস্থাপন করুন।
myVizSource.js
// create a title element
var titleElement = document.createElement('div');
titleElement.id = 'myVizTitle';
document.body.appendChild(titleElement);
function drawViz(data) {
let rowData = data.tables.DEFAULT;
// set margins + canvas size
const margin = { top: 10, bottom: 50, right: 10, left: 10 };
const padding = { top: 15, bottom: 15 };
const height = dscc.getHeight() - margin.top - margin.bottom;
const width = dscc.getWidth() - margin.left - margin.right;
const fillColor = data.style.barColor.value
? data.style.barColor.value.color
: data.style.barColor.defaultValue;
// remove the svg if it already exists
if (document.querySelector("svg")) {
let oldSvg = document.querySelector("svg");
oldSvg.parentNode.removeChild(oldSvg);
}
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("height", `${height}px`);
svg.setAttribute("width", `${width}px`);
const maxBarHeight = height - padding.top - padding.bottom;
const barWidth = width / (rowData.length * 2);
// obtain the maximum bar metric value for scaling purposes
let largestMetric = 0;
rowData.forEach(function (row) {
largestMetric = Math.max(largestMetric, row["barMetric"][0]);
});
rowData.forEach(function (row, i) {
// 'barDimension' and 'barMetric' come from the id defined in myViz.json
// 'dimId' is Data Studio's unique field ID, used for the filter interaction
const barData = {
dim: row["barDimension"][0],
met: row["barMetric"][0],
dimId: data.fields["barDimension"][0].id
};
// calculates the height of the bar using the row value, maximum bar
// height, and the maximum metric value calculated earlier
let barHeight = Math.round((barData["met"] * maxBarHeight) / largestMetric);
// normalizes the x coordinate of the bar based on the width of the convas
// and the width of the bar
let barX = (width / rowData.length) * i + barWidth / 2;
// create the "bar"
let rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rect.setAttribute("x", barX);
rect.setAttribute("y", maxBarHeight - barHeight);
rect.setAttribute("width", barWidth);
rect.setAttribute("height", barHeight);
rect.setAttribute("data", JSON.stringify(barData));
// use style selector from Data Studio
rect.style.fill = fillColor;
svg.appendChild(rect);
// add text labels
let text = document.createElementNS("http://www.w3.org/2000/svg", "text");
let textX = barX + barWidth / 2;
text.setAttribute("x", textX);
text.setAttribute("text-anchor", "middle");
let textY = maxBarHeight + padding.top;
text.setAttribute("y", textY);
text.setAttribute("fill", fillColor)
text.innerHTML = barData["dim"];
svg.appendChild(text);
});
document.body.appendChild(svg);
// Get the human-readable name of the metric and dimension
var metricName = data.fields['barMetric'][0].name;
var dimensionName = data.fields['barDimension'][0].name;
titleElement.innerText = metricName + ' by ' + dimensionName;
}
dscc.subscribeToData(drawViz, { transform: dscc.objectTransform });ধাপ 2: সম্মিলিত জাভাস্ক্রিপ্ট ফাইল তৈরি করুন, তারপর Google ক্লাউড স্টোরেজে আপনার ভিজ্যুয়ালাইজেশন ফাইলগুলি পুনরায় আপলোড করুন।
ধাপ 3: ডেটা স্টুডিও রিপোর্ট রিফ্রেশ করুন যেখানে আপনি আপনার কমিউনিটি ভিজ্যুয়ালাইজেশন পরীক্ষা করেছেন। আপনার myViz.css ফাইল ব্যবহার করে ডেটা থেকে তৈরি এবং স্টাইল করা শিরোনাম সহ একটি বার চার্ট থাকা উচিত।
অভিনন্দন - আপনি ডেটা স্টুডিওতে একটি কমিউনিটি ভিজ্যুয়ালাইজেশন তৈরি করেছেন! এটি আপনাকে এই কোডল্যাবের শেষে নিয়ে আসে। এখন, আপনি পরবর্তী পদক্ষেপ নিতে পারেন দেখুন.
আপনার ভিজ্যুয়ালাইজেশন প্রসারিত করুন
- আপনার ভিজ্যুয়ালাইজেশনে মিথস্ক্রিয়া যোগ করুন
- স্থানীয়ভাবে একটি ভিজ্যুয়ালাইজেশন বিকাশ করতে শিখুন
- উপলব্ধ শৈলী উপাদান সম্পর্কে আরও জানুন এবং আপনার ভিজ্যুয়ালাইজেশনে অতিরিক্ত স্টাইলিং যোগ করুন।
কমিউনিটি ভিজ্যুয়ালাইজেশনের সাথে আরও কিছু করুন
- dscc হেল্পার লাইব্রেরি , ম্যানিফেস্ট এবং কনফিগারেশন ফাইলের রেফারেন্স পর্যালোচনা করুন।
- আমাদের কমিউনিটি ভিজ্যুয়ালাইজেশন শোকেসে আপনার ভিজ্যুয়ালাইজেশন জমা দিন।
- ডেটা স্টুডিওর জন্য একটি সম্প্রদায় সংযোগকারী তৈরি করুন৷
অতিরিক্ত সম্পদ
নীচে বিভিন্ন সংস্থান রয়েছে যা আপনি এই কোডল্যাবে আচ্ছাদিত উপাদানের গভীরে খনন করতে সহায়তা করতে অ্যাক্সেস করতে পারেন।
সম্পদের ধরন | ব্যবহারকারী বৈশিষ্ট্য | বিকাশকারী বৈশিষ্ট্য |
ডকুমেন্টেশন | ||
খবর এবং আপডেট | ডেটা স্টুডিও > ব্যবহারকারী সেটিংসে সাইন আপ করুন | |
প্রশ্ন জিজ্ঞাসা করুন | ||
ভিডিও | শীঘ্রই আসছে! | |
উদাহরণ |