dscc-gen দিয়ে ডেটা স্টুডিও কমিউনিটি ভিজ্যুয়ালাইজেশন তৈরি করুন

১. ভূমিকা

গুগল ডেটা স্টুডিও আপনাকে বিনামূল্যে সুন্দর ডেটা ভিজ্যুয়ালাইজেশন সহ ডায়নামিক, ইন্টারেক্টিভ ড্যাশবোর্ড তৈরি করতে দেয়। কমিউনিটি ভিজ্যুয়ালাইজেশন হলো ডেটা স্টুডিওর এমন একটি ফিচার যা আপনাকে জাভাস্ক্রিপ্ট ব্যবহার করে কাস্টম ভিজ্যুয়ালাইজেশন তৈরি করতে দেয়, যা আপনার ডেটা স্টুডিও রিপোর্টের সাথে ইন্টিগ্রেট করা যায়।

আপনি যা শিখবেন

এই কোডল্যাবে আপনি শিখবেন:

• গুগল ডেটা স্টুডিও কমিউনিটি ভিজ্যুয়ালাইজেশন কীভাবে কাজ করে
• আমাদের কমান্ড-লাইন টেমপ্লেট টুল ব্যবহার করে কীভাবে একটি কমিউনিটি ভিজ্যুয়ালাইজেশন তৈরি করবেন
• কমিউনিটি ভিজ্যুয়ালাইজেশন তৈরি করতে জাভাস্ক্রিপ্ট ভিজ্যুয়ালাইজেশন লাইব্রেরি কীভাবে ব্যবহার করবেন
• আপনার কমিউনিটি ভিজ্যুয়ালাইজেশনকে ডেটা স্টুডিও ড্যাশবোর্ডে কীভাবে একীভূত করবেন

আপনার যা যা লাগবে

এই কোডল্যাবটি সম্পন্ন করতে আপনার প্রয়োজন হবে:

• ইন্টারনেট, একটি ওয়েব ব্রাউজার, একটি টার্মিনাল এবং আপনার পছন্দের টেক্সট এডিটর ব্যবহারের সুযোগ।
• একটি গুগল অ্যাকাউন্ট
• গুগল ক্লাউড স্টোরেজ বাকেটে অ্যাক্সেস
• জাভাস্ক্রিপ্ট, নোড.জেএস এবং কমান্ড-লাইন সম্পর্কে পরিচিতি

এই কোডল্যাবটি নিম্নলিখিত বিষয়গুলো ধরে নেয়:

• আপনি ইতিমধ্যেই একটি কমিউনিটি ভিজ্যুয়ালাইজেশন তৈরি করেছেন (করণীয়: প্রথমে কোডল্যাবের লিঙ্ক দিন)
• গুগল ক্লাউড স্টোরেজ সম্পর্কে পরিচিত

শুরু করতে, ক্লিক করে এই রিপোর্টটির একটি অনুলিপি তৈরি করুন। উপরের ডানদিকের কোণায়। কোডল্যাবটি করার সময় এটিকে অন্য একটি ট্যাবে খোলা রাখুন।

২. দ্রুত সমীক্ষা

আপনি এই কোডল্যাবটি কেন বেছে নিলেন?

আমি সাধারণভাবে ডেটা ভিজ্যুয়ালাইজেশনের প্রতি আগ্রহী। আমি ডেটা স্টুডিও সম্পর্কে আরও জানতে চাই। আমি আমার নিজস্ব কমিউনিটি ভিজ্যুয়ালাইজেশন তৈরি করতে চাই। আমি ডেটা স্টুডিওকে অন্য একটি প্ল্যাটফর্মের সাথে সংযুক্ত করার চেষ্টা করছি। আমি গুগল ক্লাউড সলিউশনের প্রতি আগ্রহী।

আপনি এই কোডল্যাব/টিউটোরিয়ালটি কীভাবে ব্যবহার করার পরিকল্পনা করছেন?

এটি পড়ুন এবং অনুশীলনগুলো সম্পূর্ণ করুন। শুধু চোখ বুলিয়ে নিন

ডেটা স্টুডিও ব্যবহারের অভিজ্ঞতাকে আপনি কীভাবে মূল্যায়ন করবেন?

এটার কথা কখনো শুনিনি। আমি জানি এটা কী, কিন্তু আমি এটা ব্যবহার করি না। আমি এটা নিয়মিত ব্যবহার করি। আমি একজন বিশেষজ্ঞ ব্যবহারকারী।

আপনার পটভূমিকে সবচেয়ে ভালোভাবে কী বর্ণনা করে?

ডেভেলপার ব্যবসা / ডেটা বিশ্লেষক ডেটা বিজ্ঞানী / ডেটা ইঞ্জিনিয়ার আর্থিক বিশ্লেষক মার্কেটিং / সোশ্যাল মিডিয়া / ডিজিটাল অ্যানালিটিক্স বিশেষজ্ঞ ব্যবসায়িক বিশ্লেষক ডিজাইনার অন্যান্য

জরিপের তথ্য জমা দিতে পরবর্তী পৃষ্ঠায় যান।

৩. dscc-gen ব্যবহার করে কমিউনিটি ভিজ্যুয়ালাইজেশন উন্নয়ন

dscc-gen

dscc-gen হলো একটি কমান্ড-লাইন টুল যা কমিউনিটি ভিজ্যুয়ালাইজেশন এবং কমিউনিটি কানেক্টরের জন্য সুনির্দিষ্ট টেমপ্লেট ও ​​ওয়ার্কফ্লো প্রদান করে। কমিউনিটি ভিজ্যুয়ালাইজেশন টেমপ্লেটটি একটি কার্যকরী ভিজ্যুয়ালাইজেশন এবং একটি ওয়ার্কফ্লো প্রদান করে, যার মাধ্যমে আপনি আপনার ভিজ্যুয়ালাইজেশন কোডের পরিবর্তনগুলো তাৎক্ষণিকভাবে দেখতে পারেন। এছাড়াও, এতে আপনার ভিজ্যুয়ালাইজেশনগুলো যাচাই, বিল্ড এবং ডেপ্লয় করার জন্য স্ক্রিপ্টও রয়েছে।

সেটআপ

dscc-gen ডেপ্লয়মেন্ট স্ক্রিপ্টে gsutil এবং কমিউনিটি ভিজ্যুয়ালাইজেশন জাভাস্ক্রিপ্ট কোড বিল্ড করতে npm ও webpack ব্যবহার করে।

1. আপনার স্থানীয় কম্পিউটারে npm ইনস্টল করুন
2. gsutil কুইকস্টার্টটি অনুসরণ করুন এবং গুগল ক্লাউড স্টোরেজ বাকেট সেট আপ করুন।
3. আপনার প্রজেক্টটি যে স্থানীয় ডিরেক্টরিতে রাখতে চান, সেখানে যান।

৪. একটি নতুন dscc-gen কমিউনিটি ভিজ্যুয়ালাইজেশন প্রজেক্ট শুরু করুন।

টার্মিনাল খুলুন এবং কমান্ডটি চালান:

npx @google/dscc-gen viz

dscc-gen আপনাকে একটি প্রোজেক্টের নাম, একটি 'dev' GCS স্টোরেজ লোকেশন এবং একটি 'prod' স্টোরেজ লোকেশন লিখতে বলবে। লোকেশনটি gs প্রোটোকল সহ একটি URI হিসাবে লিখুন, যেমন gs://my-gs-project/example-dev । একটি 'লোকেশন' একটি ক্লাউড স্টোরেজ বাকেট অথবা সেই বাকেটের ভেতরের একটি ফোল্ডার হতে পারে। দুটি স্টোরেজ লোকেশন অবশ্যই ভিন্ন হতে হবে। আপনি যে ভ্যালুগুলো লিখছেন, সেগুলোতে আপনার অ্যাক্সেস আছে কিনা, টুলটি তা যাচাই করবে। যদি লোকেশনগুলো বিদ্যমান না থাকে, তবে সেগুলো আপনার জন্য তৈরি করে দেওয়া হবে।

দ্রষ্টব্য: আপনার কমিউনিটি ভিজ্যুয়ালাইজেশনের দুটি ডেপ্লয়মেন্ট বজায় রাখা উচিত - একটি "dev" ডেপ্লয়মেন্ট যেখানে ফাইলগুলো নন-মিনিফাইড থাকবে এবং ক্যাশিং নিষ্ক্রিয় থাকবে, এবং একটি "prod" ডেপ্লয়মেন্ট যেখানে ফাইলগুলো মিনিফাইড থাকবে এবং ক্যাশিং সক্রিয় থাকবে। "dev" ডেপ্লয়মেন্টটি সর্বশেষ ফাইলগুলো লোড করবে এবং ডিবাগ করা সহজ হবে, অন্যদিকে "prod" ডেপ্লয়মেন্টটি দ্রুত লোড হবে।

dscc-gen একটি নতুন কমিউনিটি ভিজ্যুয়ালাইজেশন তৈরি করার পরে, এটি কীভাবে শুরু করতে হবে তার নির্দেশাবলী প্রিন্ট করে। আপনার টার্মিনালটি দেখতে অনেকটা এইরকম হবে (আপনার ইনপুট বোল্ড ইটালিক্সে দেওয়া আছে):

$ npx @google/dscc-gen viz
npx: installed 345 in 14.957s
? Project name barchart
? What is your GCS dev directory? gs://community-visualizations-codelab/barchart-dev
? What is your GCS prod directory? gs://community-visualizations-codelab/barchart-prod
Installing dependencies...

Created new community viz: barchart

cd barchart and npm run start to begin working on your viz!

আপনার ভিজ্যুয়ালাইজেশনটি লেখার জন্য আপনাকে src/ ফোল্ডারের ফাইলগুলো—বিশেষ করে index.js , index.json এবং index.css সম্পাদনা করতে হবে।

dist/ ফোল্ডারের ফাইলগুলো আপনাকে স্থানীয়ভাবে একটি ব্রাউজারে আপনার ভিজ্যুয়ালাইজেশন প্রিভিউ করার সুযোগ দেয়। স্থানীয়ভাবে ভিজ্যুয়ালাইজেশনটি চালানোর জন্য webpack.config.js ব্যবহৃত হয়। README.md টেমপ্লেট ফাইল এবং কমান্ডগুলোর একটি সংক্ষিপ্ত বিবরণ দেওয়া আছে।

৫. আপনার ভিজ্যুয়ালাইজেশনটি স্থানীয়ভাবে প্রিভিউ করুন

প্রস্তাবিত নির্দেশনাগুলো অনুসরণ করুন এবং আপনার টার্মিনালে নিম্নলিখিত কমান্ডগুলো চালান:

cd <folder name>

npm run start

একটি ব্রাউজার খুলবে এবং তাতে এইরকম দেখতে একটি ওয়েব পেজ দেখা যাবে:

পরবর্তী ধাপে আরও জানুন।

৬. [তথ্য] dscc-gen ওয়ার্কফ্লোটি যেভাবে কাজ করার জন্য ডিজাইন করা হয়েছে

dscc-gen ভিজ্যুয়ালাইজেশন টেমপ্লেটটির সাথে একটি কার্যকরী ভিজ্যুয়ালাইজেশন এবং এটি ব্যবহারের নির্দেশাবলী দেওয়া আছে। এর প্রধান কার্যকারিতাগুলো হলো:

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

স্থানীয় উন্নয়ন কর্মপ্রবাহ : আপনার স্থানীয় ডেটা আপডেট করুন এবং সেই ডেটা ব্যবহার করে আপনার কোড স্থানীয়ভাবে লিখুন ও পরীক্ষা করুন।

আপনার ভিজ্যুয়ালাইজেশন তৈরি ও স্থাপন করুন: আপনার কোড তৈরি করুন এবং এটি আপনার গুগল ক্লাউড স্টোরেজ বাকেটগুলিতে আপলোড করুন।

ডেটা স্টুডিওতে আপনার ভিজ্যুয়ালাইজেশন লোড করুন: আপনার ডেটা স্টুডিও রিপোর্টে ভিজ্যুয়ালাইজেশনটি যোগ করুন।

দ্রষ্টব্য: এখানে 'মেসেজ' শব্দটি সেই তথ্যকে বোঝায় যা ds-component আপনার কোডে রেজিস্টার করা কলব্যাক ফাংশনে প্যারামিটার হিসেবে পাঠায়।

৭. একটি কনফিগারেশন সংজ্ঞায়িত করুন

কনফিগারেশন ফাইলটি হলো আপনার (ভিজ্যুয়ালাইজেশন ডেভেলপার) এবং ভিজ্যুয়ালাইজেশনটি ব্যবহারকারী রিপোর্ট এডিটরের মধ্যেকার চুক্তি। ডেটা স্টুডিওতে ভিজ্যুয়ালাইজেশনটি লোড করার পর উপলব্ধ অপশনগুলো এই ফাইলে সংজ্ঞায়িত করা থাকে।

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

src/index.json ফাইলের বিষয়বস্তু নিচের লেখা দিয়ে প্রতিস্থাপন করুন। খেয়াল রাখবেন যেন সব বন্ধনী (ব্র্যাকেট) অন্তর্ভুক্ত থাকে। যদি আপনি এটি পুনরায় টাইপ করেন, তবে বর্গাকার (স্কয়ার) ও কোঁকড়া (কার্লি) বন্ধনীর পার্থক্য এবং নেস্টিং কাঠামোর দিকে মনোযোগ দেবেন।

index.json

{
  "data": [
    {
      "id": "concepts",
      "label": "Concepts",
      "elements": [
        {
          "id": "dimension",
          "label": "Dimensions",
          "type": "DIMENSION",
          "options": {
            "min": 1,
            "max": 1
          }
        },
        {
          "id": "metric",
          "label": "Metric",
          "type": "METRIC",
          "options": {
            "min": 1,
            "max": 1
          }
        }        
      ]
    }
  ],
  "style": [
    {
      "id": "barStyling",
      "label": "Bar Styles",
      "elements": [
        {
          "id": "barColor",
          "label": "Bar Color",
          "type": "FILL_COLOR",
          "defaultValue": {
            "color": "#1E555C"
          }
        }
      ]
    }
  ]  
}

৮. আপডেট করা বার্তা ডাউনলোড করুন

আপনার স্থানীয়ভাবে সংরক্ষিত ডেটা আপডেট করতে, চালান:

npm run update_message

আপনার টার্মিনালটি দেখতে অনেকটা এইরকম হবে:

barchart $ npm run update_message
> @ update message /Users/Code/barchart
> dscc-scripts viz update_message -f object

Copying file://build/index.js [Content-Type=application/javascript]...
Copying file://build/index.css [Content-Type=text/css]...
Copying file://build/manifest.json [Content-Type=application/json]...
Copying file://build/index.json [Content-Type=application/json]...
\ [4 files][ 48.5 KiB/ 48.5 KiB]
Operation completed over 4 objects/48.5 KiB.
Viz deployed to gs://community-visualizations-codelabs/barchart-dev

এই কমান্ডটি ডেটা স্টুডিওতে একটি ভিজ্যুয়ালাইজেশন স্থাপন করে, যা প্রাপ্ত ডেটা একটি স্থানীয় ভিজ্যুয়ালাইজেশনে প্রিন্ট করে। স্ক্রিপ্টগুলো আপনার ভিজ্যুয়ালাইজেশনের স্থাপনের অবস্থান (উপরে হাইলাইট করা) প্রিন্ট করে। ডেটা স্টুডিওতে আপনার ভিজ্যুয়ালাইজেশন লোড করার জন্য আপনি এই অবস্থানটি ব্যবহার করবেন।

আপনার ভিজ্যুয়ালাইজেশন লোড করতে, পূর্বে কপি করা রিপোর্টটি খুলুন।

1. "রিপোর্ট সম্পাদনা করুন"-এ যান
2. টুলবারে 'কমিউনিটি ভিজ্যুয়ালাইজেশন এবং কম্পোনেন্টস'-এ ক্লিক করুন।

3. 'আরও অন্বেষণ করুন'-এ ক্লিক করুন

4. "আপনার নিজের ভিজ্যুয়ালাইজেশন তৈরি করুন"-এ ক্লিক করুন
5. আপনার ম্যানিফেস্ট পাথ (আপনার টার্মিনালে প্রিন্ট হওয়া gs://... লোকেশন) প্রবেশ করান এবং সাবমিট-এ ক্লিক করুন।

5. আপনার রিপোর্টে যোগ করতে প্রদর্শিত কার্ডটিতে ক্লিক করুন।

ভিজ্যুয়ালাইজেশনটি যে JSON রেন্ডার করবে তা দেখতে অনেকটা এইরকম হবে:

রাইট-ক্লিক করে সম্পূর্ণ মেসেজটি সিলেক্ট করুন এবং src/localMessage.js ফাইলের মধ্যে কপি করা অংশটি দিয়ে প্রতিস্থাপন করুন। ফাইলটি সেভ করুন।

আপনার ব্রাউজারে স্থানীয়ভাবে চলমান ভিজ্যুয়ালাইজেশনটি আর দেখা যাবে না এবং আপনি কনসোলে দেখলে একটি ত্রুটি দেখতে পাবেন।

৯. বার চার্টের জন্য জাভাস্ক্রিপ্ট লিখুন

প্রথমে, d3.js-কে ডিপেন্ডেন্সি হিসেবে যুক্ত করতে নিম্নলিখিত কমান্ডটি চালান।

npm install d3

এরপর, src/index.js নিচের কোড দিয়ে প্রতিস্থাপন করুন। আগের ধাপের পরিবর্তনগুলো বোল্ড করে দেওয়া হয়েছে।

src/index.js

const d3 = require('d3');
const dscc = require('@google/dscc');
const local = require('./localMessage.js');

// change this to 'true' for local development
// change this to 'false' before deploying
export const LOCAL = true;

const drawViz = (message) => {
  const margin = { left: 20, right: 20, top: 20, bottom: 20 };
  const height = dscc.getHeight() - 10;
  const width = dscc.getWidth();

  const chartHeight = height - margin.top - margin.bottom;
  const chartWidth = width - margin.left - margin.right;

  // remove existing svg
  d3.select("body")
    .selectAll("svg")
    .remove();

  // make a canvas
  const svg = d3
    .select("body")
    .append("svg")
    .attr("width", width)
    .attr("height", height);

  // make an svg for the bar chart
  const chartSvg = svg
    .append("svg")
    .attr("x", margin.left)
    .attr("y", margin.top)
    .attr("width", chartWidth)
    .attr("height", chartHeight);

  // xScale to distribute bars
  const xScale = d3
    .scaleBand()
    .domain(message.tables.DEFAULT.map(d => d.dimension[0]))
    .range([0, chartWidth])
    .paddingInner(0.3);

  // yScale to size bars
  const yScale = d3
    .scaleLinear()
    .domain([0, d3.max(message.tables.DEFAULT.map(d => d.metric[0]))])
    .range([0, chartHeight]);

  // add bars
  const bars = chartSvg
    .append("g")
    .attr("class", "bars")
    .selectAll("rect.bars")
    .data(message.tables.DEFAULT)
    .enter()
    .append("rect")
    .attr("x", d => xScale(d.dimension[0]))
    .attr("y", d => chartHeight - yScale(d.metric[0]))
    .attr("width", xScale.bandwidth())
    .attr("height", d => yScale(d.metric[0]));

  // add text
  const text = svg
    .append("g")
    .selectAll("text")
    .data(message.tables.DEFAULT)
    .enter()
    .append("text")
    .attr(
      "x",
      d => xScale(d.dimension[0]) + xScale.bandwidth() / 2 + margin.left
    )
    .attr("y", height - margin.bottom / 4)
    .attr("text-anchor", "middle")
    .text(d => d.dimension[0]);
};

// renders locally
if (LOCAL) {
  drawViz(local.message);
} else {
  dscc.subscribeToData(drawViz, {transform: dscc.objectTransform});
}

যদি স্থানীয় সার্ভারটি এখনও চালু থাকে, তবে আপনার ব্রাউজারটি পরীক্ষা করুন। স্থানীয় ডেভেলপমেন্ট ওয়েব পেজটিতে এখন নীচেরটির মতো একটি বার চার্ট দেখা যাবে।

১০. ম্যানিফেস্ট আপডেট করুন (ঐচ্ছিক)

আপনার ভিজ্যুয়ালাইজেশন ম্যানিফেস্টে আপনার ভিজ্যুয়ালাইজেশন সম্পর্কিত মেটাডেটা, সেইসাথে আপনার ভিজ্যুয়ালাইজেশনের জাভাস্ক্রিপ্ট, কনফিগ এবং সিএসএস-এর অবস্থান থাকে। আপনার ম্যানিফেস্টের মানগুলি আপডেট করুন — এগুলি শেষ ব্যবহারকারীকে আপনার ভিজ্যুয়ালাইজেশন সম্পর্কে তথ্য সরবরাহ করতে ব্যবহৃত হবে।

আপনার ভিজ্যুয়ালাইজেশন বর্ণনা করতে src/manifest.json ফাইলটি সম্পাদনা করুন। নিচে একটি নমুনা ম্যানিফেস্ট দেওয়া হলো।

সতর্কীকরণ : devMode এবং components[].resource DEVMODE_BOOL ও YOUR_GCS_BUCKET ফাইলগুলো সম্পাদনা করবেন না। এগুলো হলো প্রতিস্থাপনের জন্য প্লেসহোল্ডার, যা dscc-gen টেমপ্লেট আপনার জন্য করে দেবে।

src/manifest.json

{
  "name": "Bar Chart",
  "organization": "[My name]",
  "description": "Bar chart",
  "logoUrl": "https://storage.googleapis.com/community-visualizations-codelabs/barchart/bar_chart.png",
  "organizationUrl": "https://github.com/googledatastudio/",
  "supportUrl": "http://github.com/googledatastudio/community-visualizations",
  "privacyPolicyUrl": "http://github.com/googledatastudio/community-visualizations",
  "termsOfServiceUrl": "http://github.com/googledatastudio/community-visualizations",
  "packageUrl": "",
  "devMode": "DEVMODE_BOOL",
  "components": [
    {
      "id": "Bar chart",
      "name": "Bar chart",
      "description": "My first Community Visualization",
      "iconUrl": "https://storage.googleapis.com/community-visualizations-codelabs/table/table_icon.png",
      "resource": {
        "js": "YOUR_GCS_BUCKET/index.js",
        "config": "YOUR_GCS_BUCKET/index.json",
        "css": "YOUR_GCS_BUCKET/index.css"
      }
    }
  ]
}

১১. ভিজ্যুয়ালাইজেশনটি স্থাপন করুন

src/index.js ফাইলে const LOCAL-কে "false"-এ পরিবর্তন করুন। আপনার ব্রাউজারে ভিজ্যুয়ালাইজেশনটি কাজ করা বন্ধ করে দেবে। পরিবর্তিত কোড লাইনটি বোল্ড করা আছে। এই বুলিয়ানটি নির্ধারণ করে যে কোডটি একটি "লোকাল" ডেটা ফাইল ব্যবহার করবে, নাকি ডেটা স্টুডিও থেকে প্রাপ্ত ডেটা ব্যবহার করবে।

src/index.js (abridged)

const d3 = require('d3');
const dscc = require('@google/dscc');
const local = require('./localMessage.js');

// change this to 'true' for local development
// change this to 'false' before deployment
export const LOCAL = false;

const drawViz = (message) => {...}

তারপর, আপনার টার্মিনালে এটি চালান:

npm run build:dev
npm run push:dev

` build:dev কমান্ডটি আপনার জাভাস্ক্রিপ্ট ডিপেন্ডেন্সিগুলোকে একটি আনমিনিফাইড আউটপুটে বান্ডল করে এবং ক্যাশিং নিষ্ক্রিয় করতে ও আপনার পূর্বে কনফিগার করা 'dev' বাকেটটিকে নির্দেশ করার জন্য আপনার ম্যানিফেস্টের মানগুলো প্রতিস্থাপন করে।

` push:dev কমান্ডটি আপনার ভিজ্যুয়ালাইজেশন রিসোর্সগুলোকে ধাপ ১-এ কনফিগার করা 'dev' বাকেটে আপলোড করে এবং বাকেটের অবস্থানটি কনসোলে প্রিন্ট করে।

ডেটা স্টুডিও রিপোর্টটি রিফ্রেশ করুন। আপনি একটি বার চার্ট দেখতে পাবেন। প্রপার্টি প্যানেলে ডেটা এবং স্টাইল অপশনগুলো পরিবর্তন করে দেখুন। ডেটা পরিবর্তন করলে বারগুলোও পরিবর্তিত হবে। তবে, বারের রঙের স্টাইল সিলেক্টরটি এখনও কাজ করবে না।

১২. বার চার্টে রিপোর্ট এডিটরের রঙ নির্বাচন ব্যবহার করুন।

কোডটি স্থানীয়ভাবে সম্পাদনা করতে, প্রথমে src/index.js এ থাকা const LOCAL ভেরিয়েবলটিকে true তে আপডেট করুন। এরপর, styleVal() নামে একটি নতুন ফাংশন যোগ করুন এবং drawViz()-এর ভেতরের কোডটি আপডেট করুন। আপনার src/index.js ফাইলটি দেখতে এইরকম হবে:

src/index.js

const d3 = require('d3');
const dscc = require('@google/dscc');
const local = require('./localMessage.js');

// change this to 'true' for local development
// change this to 'false' before deploying
export const LOCAL = false;

// parse the style value
const styleVal = (message, styleId) => {
  if (typeof message.style[styleId].defaultValue === "object") {
    return message.style[styleId].value.color !== undefined
      ? message.style[styleId].value.color
      : message.style[styleId].defaultValue.color;
  }
  return message.style[styleId].value !== undefined
    ? message.style[styleId].value
    : message.style[styleId].defaultValue;
};

const drawViz = message => {
  const margin = { left: 20, right: 20, top: 20, bottom: 20 };
  const height = dscc.getHeight() - 10;
  const width = dscc.getWidth();

  const chartHeight = height - margin.top - margin.bottom;
  const chartWidth = width - margin.left - margin.right;

  // remove existing svg
  d3.select("body")
    .selectAll("svg")
    .remove();

  // make a canvas
  const svg = d3
    .select("body")
    .append("svg")
    .attr("width", width)
    .attr("height", height);

  // make an svg for the bar chart
  const chartSvg = svg
    .append("svg")
    .attr("x", margin.left)
    .attr("y", margin.top)
    .attr("width", chartWidth)
    .attr("height", chartHeight);

  // xScale to distribute bars
  const xScale = d3
    .scaleBand()
    .domain(message.tables.DEFAULT.map(d => d.dimension[0]))
    .range([0, chartWidth])
    .paddingInner(0.3);

  // yScale to size bars
  const yScale = d3
    .scaleLinear()
    .domain([0, d3.max(message.tables.DEFAULT.map(d => d.metric[0]))])
    .range([0, chartHeight]);

  // get the user-selected bar color
  let barColor = styleVal(message, "barColor");

  // add bars
  const bars = chartSvg
    .append("g")
    .attr("class", "bars")
    .selectAll("rect.bars")
    .data(message.tables.DEFAULT)
    .enter()
    .append("rect")
    .attr("x", d => xScale(d.dimension[0]))
    .attr("y", d => chartHeight - yScale(d.metric[0]))
    .attr("width", xScale.bandwidth())
    .attr("height", d => yScale(d.metric[0]))
    .attr("fill", barColor);

  // add text
  const text = svg
    .append("g")
    .selectAll("text")
    .data(message.tables.DEFAULT)
    .enter()
    .append("text")
    .attr(
      "x",
      d => xScale(d.dimension[0]) + xScale.bandwidth() / 2 + margin.left
    )
    .attr("y", height - margin.bottom / 4)
    .attr("text-anchor", "middle")
    .attr("fill", barColor)
    .text(d => d.dimension[0]);
};

// renders locally
if (LOCAL) {
  drawViz(local.message);
} else {
  dscc.subscribeToData(drawViz, {transform: dscc.objectTransform});
}

src/index.js ফাইলটি সেভ করুন, তারপর আপনার লোকাল ব্রাউজার সেশনে ফিরে যান। ফাইলটি লোকালি চলতে দেখলে, আবার const LOCAL-কে false- এ পরিবর্তন করুন।

নিম্নলিখিত কমান্ডটি চালিয়ে আপনার আপডেট করা ফাইলগুলি গুগল ক্লাউড স্টোরেজে আপলোড করুন:

npm run build:dev
npm run push:dev

আপনার ডেটা স্টুডিও রিপোর্টটি রিফ্রেশ করুন। এখন আপনি আপনার বারগুলোর রঙ পরিবর্তন করতে পারবেন।

১৩. প্রোডাকশন ডেপ্লয়মেন্ট

প্রোডাকশন ডেপ্লয়মেন্ট

আপনার ভিজ্যুয়ালাইজেশনটি পছন্দ হয়ে গেলে, src/index.js এ থাকা const LOCAL-এর মান false কিনা তা নিশ্চিত করুন, তারপর রান করুন।

npm run build:prod
npm run push:prod

এটি আপনার ফাইলগুলোকে আপনার "prod" GCS বাকেট লোকেশনে ডেপ্লয় করবে। এছাড়াও, ক্যাশিং সক্রিয় করা হবে এবং বান্ডেল করা জাভাস্ক্রিপ্ট যথাযথভাবে মিনিফাই করা হবে।

আগের মতোই, আপনার ডেপ্লয়মেন্টের অবস্থান কনসোলে প্রিন্ট করা হবে। ডেটা স্টুডিও রিপোর্টে আপনার 'prod' ভিজ্যুয়ালাইজেশন লোড করতে এই 'ম্যানিফেস্ট পাথ' ব্যবহার করুন।

অভিনন্দন! আপনি এইমাত্র dscc-gen টুলটি ব্যবহার করে আপনার প্রথম কমিউনিটি ভিজ্যুয়ালাইজেশন তৈরি করেছেন।

১৪. পরবর্তী পদক্ষেপ

আপনার কল্পনাশক্তিকে প্রসারিত করুন

• আপনার ভিজ্যুয়ালাইজেশনে ইন্টারঅ্যাকশন যোগ করুন
• উপলব্ধ স্টাইল উপাদানগুলো সম্পর্কে আরও জানুন এবং আপনার ভিজ্যুয়ালাইজেশনে অতিরিক্ত স্টাইল যোগ করুন।

কমিউনিটি ভিজ্যুয়ালাইজেশনের মাধ্যমে আরও বেশি কিছু করুন।

• dscc হেল্পার লাইব্রেরি , ম্যানিফেস্ট এবং কনফিগারেশন ফাইলের রেফারেন্সগুলো পর্যালোচনা করুন।
• আমাদের কমিউনিটি ভিজ্যুয়ালাইজেশন শোকেসে আপনার ভিজ্যুয়ালাইজেশনটি জমা দিন।
• ডেটা স্টুডিওর জন্য একটি কমিউনিটি কানেক্টর তৈরি করুন।

অতিরিক্ত সম্পদ

এই কোডল্যাবে আলোচিত বিষয়বস্তু আরও গভীরভাবে জানার জন্য নিচে বিভিন্ন রিসোর্স দেওয়া হলো, যা আপনি ব্যবহার করতে পারেন।

সম্পদের ধরণ	ব্যবহারকারীর বৈশিষ্ট্য	ডেভেলপার ফিচার
ডকুমেন্টেশন	সহায়তা কেন্দ্র	ডেভেলপার ডকুমেন্টেশন
সংবাদ ও আপডেট	ডেটা স্টুডিও > ব্যবহারকারী সেটিংসে সাইন আপ করুন	ডেভেলপার মেইলিং তালিকা
প্রশ্ন করুন	ব্যবহারকারী ফোরাম	স্ট্যাক ওভারফ্লো [গুগল-ডেটা-স্টুডিও] ডেটা স্টুডিও ডেভেলপারস ফোরাম
ভিডিও	ইউটিউবে ডেটা স্টুডিও	শীঘ্রই আসছে!
উদাহরণ	রিপোর্ট গ্যালারি	ওপেন সোর্স রিপোজিটরি