با dscc-gen تجسم های انجمن داده استودیو ایجاد کنید

۱. مقدمه

گوگل دیتا استودیو به شما امکان می‌دهد داشبوردهای پویا و تعاملی با مصورسازی‌های زیبای داده‌ها را به صورت رایگان بسازید. مصورسازی‌های انجمنی ، قابلیتی برای دیتا استودیو هستند که به شما امکان می‌دهند مصورسازی‌های سفارشی را با جاوا اسکریپت بسازید که با گزارش‌های دیتا استودیو شما ادغام می‌شوند.

آنچه یاد خواهید گرفت

در این آزمایشگاه کد، شما یاد خواهید گرفت:

  • نحوه کار تجسم جامعه Google Data Studio
  • چگونه با ابزار الگوی خط فرمان خود، یک تجسم اجتماعی بسازیم؟
  • نحوه استفاده از کتابخانه‌های مصورسازی جاوا اسکریپت برای ساخت مصورسازی‌های انجمن
  • چگونه تجسم جامعه خود را در داشبورد Data Studio ادغام کنیم

آنچه نیاز دارید

برای تکمیل این آزمایشگاه کد، به موارد زیر نیاز دارید:

  • دسترسی به اینترنت، یک مرورگر وب، یک ترمینال و ویرایشگر متن مورد علاقه‌تان
  • یک حساب گوگل
  • دسترسی به یک مخزن ذخیره‌سازی ابری گوگل
  • آشنایی با جاوا اسکریپت، Node.js و خط فرمان

این آزمایشگاه کد فرض می‌کند:

  • شما قبلاً یک تجسم جامعه ساخته‌اید (لینک TODO، اولین codelab)
  • با فضای ذخیره‌سازی ابری گوگل آشنا هستید؟

برای شروع، با کلیک کردن، یک کپی از این گزارش تهیه کنید ۱۴۵۷۵f۹۳۴e۸۰۰۱۲۲.png در گوشه بالا سمت راست. در حین انجام کدنویسی، آن را در یک برگه دیگر باز نگه دارید.

۲. بررسی سریع

چرا این آزمایشگاه کد را انتخاب کردید؟

من به طور کلی به مصورسازی داده‌ها علاقه‌مند هستم. می‌خواهم درباره دیتا استودیو بیشتر بدانم می‌خواهم تجسم جامعه خودم را بسازم. من در حال تلاش برای ادغام Data Studio با یک پلتفرم دیگر هستم. من به راهکارهای گوگل کلود علاقه‌مند هستم.

چگونه قصد دارید از این آزمایشگاه کد/آموزش استفاده کنید؟

آن را بخوانید و تمرین‌ها را انجام دهید فقط مرور اجمالی

تجربه خود را با دیتا استودیو چگونه ارزیابی می‌کنید؟

تا حالا نشنیده بودمش من میدونم چیه ولی ازش استفاده نمیکنم. من مرتباً از آن استفاده می‌کنم. من یک کاربر متخصص هستم.

چه چیزی پیشینه شما را به بهترین شکل توصیف می‌کند؟

توسعه‌دهنده تحلیلگر کسب و کار / داده دانشمند داده / مهندس داده تحلیلگر مالی متخصص بازاریابی / رسانه‌های اجتماعی / تحلیل دیجیتال تحلیلگر کسب و کار طراح دیگر

برای ارسال اطلاعات نظرسنجی به صفحه بعد بروید.

۳. توسعه تجسم جامعه با 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 از شما نام پروژه، محل ذخیره‌سازی GCS با نام "dev" و محل ذخیره‌سازی "prod" را می‌خواهد. محل را به عنوان یک URI با پروتکل gs وارد کنید، مثلاً gs://my-gs-project/example-dev . یک "مکان" می‌تواند یک مخزن ذخیره‌سازی ابری یا یک پوشه در آن مخزن باشد. دو محل ذخیره‌سازی باید متفاوت باشند. این ابزار تأیید می‌کند که شما به مقادیری که وارد می‌کنید دسترسی دارید. اگر مکان‌ها وجود نداشته باشند، برای شما ایجاد می‌شوند.

وقتی dscc-gen یک Community Visualization جدید ایجاد کرد، دستورالعمل‌هایی برای شروع کار چاپ می‌کند. ترمینال شما چیزی شبیه به این خواهد بود (ورودی شما به صورت بولد و ایتالیک ):

$ 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

یک مرورگر با صفحه وبی شبیه به این باز می‌شود:

2f219993dfb676d4.png

در مرحله بعد بیشتر بدانید.

۶. [اطلاعات] نحوه‌ی عملکرد گردش کار dscc-gen

قالب مصورسازی dscc-gen به همراه یک مصورسازی کاربردی و دستورالعمل‌هایی برای نحوه استفاده از قالب ارائه می‌شود. قابلیت‌های اصلی آن به شرح زیر است:

پیام محلی خود را به‌روزرسانی کنید: پیام نمونه در قالب گنجانده شده است، اما احتمالاً منعکس‌کننده‌ی مورد استفاده‌ای که می‌خواهید پشتیبانی کنید، نیست. شما باید داده‌های نمونه‌ای را که منعکس‌کننده‌ی تجسمی است که می‌خواهید بسازید، دانلود کنید.

گردش کار توسعه محلی : با استفاده از داده‌های به‌روزرسانی داده‌های محلی ، کد خود را به‌صورت محلی بنویسید و آزمایش کنید.

ساخت و استقرار تجسم خود: کد خود را بسازید و آن را در مخازن ذخیره‌سازی ابری گوگل خود آپلود کنید.

بارگذاری ویز خود در دیتا استودیو: مصورسازی را به گزارش دیتا استودیو خود اضافه کنید.

۷. تعریف پیکربندی

فایل پیکربندی، قراردادی بین شما (توسعه‌دهنده‌ی viz) و ویرایشگر گزارش است که از مصورسازی استفاده می‌کند. این فایل، گزینه‌های موجود پس از بارگذاری مصورسازی در Data Studio را تعریف می‌کند.

برای این تجسم نمودار میله‌ای، پیکربندی دارای یک بُعد و یک معیار و همچنین یک عنصر سبک خواهد بود که به ویرایشگر گزارش اجازه می‌دهد سبک نمودار میله‌ای را تغییر دهد.

محتویات src/index.json را با موارد زیر جایگزین کنید. مطمئن شوید که همه براکت‌ها را وارد کرده‌اید. اگر آن را دوباره تایپ می‌کنید، حتماً به تفاوت بین براکت‌های مربعی و فرفری و ساختار تودرتو توجه کنید.

فهرست.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

این دستور یک تصویرسازی را در Data Studio مستقر می‌کند که داده‌های دریافتی را در یک فایل محلی چاپ می‌کند. اسکریپت‌ها محل استقرار تصویرسازی شما (که در بالا هایلایت شده است) را چاپ می‌کنند. شما از این مکان برای بارگذاری تصویرسازی خود در Data Studio استفاده خواهید کرد.

برای بارگذاری مصورسازی خود، گزارشی را که قبلاً کپی کرده‌اید، باز کنید.

  1. رفتن به «ویرایش گزارش»
  2. روی «تجسم‌ها و اجزای جامعه» در نوار ابزار کلیک کنید

e927f8fbd49979a5.png

  1. روی «کاوش بیشتر» کلیک کنید

c236b0cfcc68ce2c.png

  1. روی «ساخت تجسم خودتان» کلیک کنید
  2. مسیر مانیفست خود (مکان gs://... که در ترمینال شما چاپ می‌شود) را وارد کنید و روی ارسال کلیک کنید.

۲۶۵۸۸c۶c۸۳۸۲a۳b.png

  1. روی کارت رندر شده کلیک کنید تا به گزارش شما اضافه شود

این تجسم باید JSON را رندر کند که چیزی شبیه به این باشد:

a08a61345fe12837.png

با کلیک راست و انتخاب همه، کل پیام را کپی کنید و محتویات 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});
}

اگر سرور محلی هنوز در حال اجرا است، مرورگر خود را بررسی کنید. صفحه وب توسعه محلی اکنون باید یک نمودار میله‌ای مانند شکل زیر نشان دهد.

2cb9f9d8d1bd2063.png

۱۰. به‌روزرسانی مانیفست (اختیاری)

مانیفست مصورسازی شما شامل فراداده‌هایی در مورد مصورسازی شما و همچنین مکان جاوا اسکریپت، پیکربندی و CSS مصورسازی شما است. مقادیر موجود در مانیفست خود را به‌روزرسانی کنید - از آنها برای ارائه اطلاعات کاربر نهایی در مورد مصورسازی شما استفاده خواهد شد.

برای توصیف بصری‌سازی خود، فایل src/manifest.json را ویرایش کنید. یک نمونه manifest در زیر آمده است.

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" تغییر دهید. نمایش بصری در مرورگر شما باید متوقف شود. خط کد تغییر یافته پررنگ شده است. این مقدار بولی مشخص می‌کند که آیا کد باید از یک فایل داده "محلی" یا داده‌های دریافتی از Data Studio استفاده کند یا خیر.

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" که در مرحله 1 پیکربندی کرده‌اید، آپلود می‌کند و مکان باکت را در کنسول چاپ می‌کند.

گزارش Data Studio را به‌روزرسانی کنید. باید یک نمودار میله‌ای ببینید. سعی کنید گزینه‌های داده و سبک را در پنل ویژگی‌ها تغییر دهید. تغییر داده‌ها، میله‌ها را تغییر می‌دهد. با این حال، انتخابگر سبک رنگ نوار هنوز کار نخواهد کرد.

۱۲. از انتخاب‌های رنگ ویرایشگر گزارش در نمودار میله‌ای استفاده کنید

برای ویرایش کد به صورت محلی، ابتدا متغیر const LOCAL را در src/index.js به 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

گزارش Data Studio خود را به‌روزرسانی کنید. اکنون باید بتوانید رنگ میله‌های خود را تغییر دهید.

fd4e436a6e8dd58b.gif

۱۳. استقرارهای Prod

استقرار محصولات

وقتی از بصری‌سازی خود راضی بودید، مطمئن شوید که const LOCAL در src/index.js برابر با false است، سپس اجرا کنید. 

npm run build:prod
npm run push:prod

این کار فایل‌های شما را در محل سطل GCS "prod" شما مستقر می‌کند. علاوه بر این، ذخیره‌سازی فعال می‌شود و جاوا اسکریپت همراه آن به طور مناسب کوچک‌سازی می‌شود.

درست مانند قبل، محل استقرار شما در کنسول چاپ خواهد شد. از این «مسیر مانیفست» برای بارگذاری تجسم «prod» خود در گزارش Data Studio استفاده کنید.

تبریک! شما اولین تجسم جامعه خود را با ابزار dscc-gen ساختید.

۱۴. مراحل بعدی

تجسم خود را گسترش دهید

با تجسم‌های اجتماعی کارهای بیشتری انجام دهید

منابع اضافی

در زیر منابع مختلفی وجود دارد که می‌توانید برای کمک به شما در درک عمیق‌تر مطالب مطرح شده در این آزمایشگاه کد به آنها دسترسی داشته باشید.

نوع منبع

ویژگی‌های کاربر

ویژگی‌های توسعه‌دهنده

مستندات

مرکز راهنما

مستندات توسعه‌دهنده

اخبار و به‌روزرسانی‌ها

ثبت نام در دیتا استودیو > تنظیمات کاربر

لیست پستی توسعه‌دهندگان

سوال بپرسید

انجمن کاربران

انجمن توسعه‌دهندگان دیتا استودیو در استک اورفلو [google-data-studio]

ویدیوها

دیتا استودیو در یوتیوب

به زودی!

مثال‌ها

گزارش گالری

مخزن متن‌باز