تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

إنشاء عروض JavaScript مخصّصة في "مركز البيانات"

يتيح مركز البيانات من Google للمستخدمين إنشاء لوحات بيانات مباشرة وتفاعلية مع تمثيلات بصرية جميلة، مجانًا. يمكن للمستخدمين جلب بياناتهم من مجموعة متنوعة من المصادر وإنشاء التقارير في مركز البيانات، مع إمكانات التعديل والمشاركة الكاملة. في ما يلي مثال على لوحة بيانات "مركز البيانات":

(انقر هنا للاطّلاع على مثال التقرير هذا في "مركز البيانات").

يوفّر "مركز البيانات" العديد من أنواع الرسوم البيانية المدمَجة، بما في ذلك الرسوم البيانية الخطية والمخططات الشريطية والرسوم البيانية الدائرية والرسوم البيانية للنقاط المبعثرة. تتيح لك التمثيلات البصرية للمنتدى إنشاء تمثيلات JavaScript مخصّصة واستخدامها في "مركز البيانات". يتم إنشاء مرئيات المنتديات بواسطة منتدى مطوّري برامج مركز البيانات - يمكن لأي مطوّر برامج إنشاء واحدة. يمكنك أيضًا مشاركة الرسوم البيانية للمنتدى مع الآخرين حتى يمكنهم استخدامها مع بياناتهم الخاصة.

ما ستتعرَّف عليه

في هذا الدرس التطبيقي حول الترميز، ستتعرّف على:

آلية عمل التمثيل البصري لمنتدى "مركز البيانات من Google"
كيفية إنشاء تمثيل بصري للمنتدى باستخدام مكتبة المساعدة للمكوّنات في ds
كيفية دمج التمثيل البصري للمنتدى في لوحة بيانات "مركز البيانات"

الأشياء التي تحتاج إليها

لإكمال هذا الدرس التطبيقي حول الترميز، ستحتاج إلى ما يلي:

اتصال بالإنترنت ومتصفح ويب
حساب على Google
الوصول إلى حزمة مساحة تخزين Google Cloud Platform
الدراية بجافا سكريبت

لماذا اخترت هذا الدرس التطبيقي حول الترميز؟

أهتم بالتمثيل البصري للبيانات بشكل عام.

أريد معرفة المزيد من المعلومات عن "مركز البيانات"

أريد إنشاء تمثيل مرئي للمنتدى الخاص بي.

أحاول دمج "مركز البيانات" مع منصّة أخرى.

أنا مهتم بحلول Google Cloud.

كيف تخطط لاستخدام هذا الدرس التطبيقي/الدرسي حول الترميز؟

التنقّل سيرًا على الأقدام فقط

اقرأها وأكمِل التمارين

كيف تقيّم تجربة "مركز البيانات"؟

لم أسمع عن ذلك مطلقًا

أعرف ذلك، ولكنني لا أستخدمه.

أستخدمها من حين لآخر.

أستخدمها بانتظام.

أنا مستخدم خبير.

ما هو أفضل وصف للخلفية؟

مطوّر البرامج

مصمِّم / متخصّص في تجارب المستخدمين

نشاط تجاري / متخصص في البيانات / محلِّل مالي

عالم بيانات / مهندس بيانات

التسويق / وسائل التواصل الاجتماعي / خبير في الإحصاءات الرقمية

غير ذلك

ما هي مكتبات التمثيل البصري JavaScript التي تهتم بها؟

D3.js

مخططات Google

Chart.js

Leaflet

الرسوم البيانية

الرسم البياني

غير ذلك

يمكنك الانتقال إلى الصفحة التالية لإرسال معلومات الاستطلاع.

تسمح لك التمثيلات البصرية للمنتدى في "مركز البيانات" بإنشاء واستخدام مرئيات JavaScript المخصّصة التي تتكامل مع لوحات بياناتك.

في هذا الدرس التطبيقي حول الترميز، ستنشئ رسمًا بيانيًا منتدى للرسم البياني الشريطي يتيح استخدام بُعد واحد ومقياس واحد ونمط لون الشريط.

لإنشاء تمثيل مرئي للمنتدى، تحتاج إلى الملفات التالية في حزمة تخزين Google Cloud Platform، والتي سيتم إنشاؤها في خطوة لاحقة.

اسم الملف	نوع الملف	الغرض
manifest.json*	JSON	تقدّم بيانات وصفية حول التمثيل البصري وموقع الموارد الأخرى.
myViz.json	JSON	يوفّر خيارات إعداد البيانات والأنماط للوحة الموقع.
myViz.js	JavaScript	يوفّر رمز JavaScript المطلوب لعرض التمثيل البصري.
myViz.css (اختياري)	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 });

تحضير ملف JavaScript النهائي

الخطوة الثالثة: ادمج جميع ملفات JavaScript المطلوبة في ملف واحد من خلال نسخ محتوى مكتبة المساعدة المرئية (dscc.min.js) وملف myVizSource.js في ملف جديد اسمه myViz.js. يمكنك تشغيل الأوامر التالية لربط الملفات. كرِّر هذه الخطوة في كل مرة تعدِّل فيها رمز التمثيل البصري.

نص برمجي لتسلسل نظام التشغيل Linux/Mac

cat dscc.min.js > myViz.js
echo >> myViz.js
cat myVizSource.js >> myViz.js

نص برمجي لـ Windows

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 config 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 Cloud Platform (GCP)

الخطوة 2: إنشاء حزمة Google Cloud Platform. فئة مساحة التخزين المُقترحة هي إقليمية. للحصول على تفاصيل عن الفئات المجانية، يمكنك الانتقال إلى أسعار Cloud Storage. من غير المحتمل أن تتحمل مساحة تخزين التمثيل البصري أي تكاليف لفئة التخزين الإقليمية.

الخطوة 3: دوّن اسم/مسار الحزمة، بدايةً من القسم بعد الحزم/ . يُطلق "مركز البيانات" على ذلك اسم "&معرّف المكوّن"&وسيتم استخدامه للتعرّف على البيانات ونشرها.

ويوفّر ملف البيان معلومات عن الموقع الجغرافي للتمثيل والموارد. يجب تسمية ذلك &&;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"
    }
  }]
}

يمكنك تحميل ملفات manifest.json وmyViz.js وmyViz.json وmyViz.css إلى حزمة Google Cloud Storage باستخدام واجهة الويب أو أداة سطر الأوامر gsutil. كرِّر هذا الإجراء في كل مرة تعدِّل فيها التمثيل البصري.

أوامر تحميل 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، أدخِل عنوان URL لجدول بيانات Google من الخطوة 1 أعلاه.

الخطوة 6: في أعلى يسار الصفحة، انقر على ربط.

الخطوة 7: في عنوان مصدر البيانات، انقر على الوصول إلى المرئيات في المنتدى، واختَر تفعيل، ثم انقر على حفظ.

الخطوة 7: انقر على إضافة إلى التقرير في المربّع الذي يظهر لإضافة مصدر البيانات إلى تقريرك.

الخطوة 6: في شريط الأدوات، انقر على زر التمثيل البصري للمنتدى . ستظهر لك قائمة منسدلة.

الخطوة 7: ألصِق اسم الحزمة مسبوقًا بـ gs:// (على سبيل المثال: gs://community-viz-docs/myViz) في إدخال النص لـ "مسار البيان البيان&;;وأضِف barChart ضمن "معرّف المكوِّن"&&;;ثم انقر على &إضافة;}{&quot.

سيتم رسم التمثيل البصري تلقائيًا على اللوحة. يجب أن تعكس لوحة الخاصية على الجانب الأيسر العناصر في ملف 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: أنشِئ ملف JavaScript المجمَّع، ثم أعِد تحميل ملفات التمثيل البصري إلى Google Cloud Storage.

الخطوة 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: أنشِئ ملف JavaScript المجمَّع، ثم أعِد تحميل ملفات التمثيل البصري إلى Google Cloud Storage.

الخطوة 3: أعِد تحميل تقرير "مركز البيانات" حيث اختبرتَ التمثيل البصري للمنتدى. يجب أن يكون لديك رسم بياني شريطي يضم التصنيفات التي تم إنشاؤها من البيانات في جدول بيانات Google. لتغيير لون الأشرطة، غيّر اللون المحدد في محدِّد النمط "Bar;Bar;.

في هذا القسم، سيتم تعديل التمثيل البصري لرسم رسم بياني شريطي باستخدام البيانات من مجموعة بيانات التمثيل البصري للمنتدى.

الخطوة 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: أنشِئ ملف JavaScript المجمَّع، ثم أعِد تحميل ملفات التمثيل البصري إلى Google Cloud Storage.

الخطوة 3: أعِد تحميل تقرير "مركز البيانات" حيث اختبرتَ التمثيل البصري للمنتدى. يجب أن يكون لديك رسم بياني شريطي بعنوان تم إنشاؤه من البيانات وتصميمه باستخدام ملف myViz.css.

تهانينا، لقد أنشأت منصة تمثيل بصري للمنتدى في "مركز البيانات". سينقلك هذا الأمر إلى نهاية هذا الدرس التطبيقي حول الترميز. والآن، لنتعرّف على الخطوات التالية التي يمكنك اتخاذها.

توسيع التمثيل البصري

إضافة تفاعلات إلى التمثيل البصري
التعرُّف على كيفية إنشاء تمثيل بصري محلي
اطّلع على مزيد من المعلومات عن عناصر النمط المتاحة وأضِف أنماطًا إضافية إلى التمثيل البصري.

تنفيذ المزيد من المهام باستخدام الرسوم البيانية للمنتدى

راجع المراجع لكل من مكتبة المساعدة في dscc وملف البيان وملف الإعداد.
إرسال التمثيل البصري إلى معرض التمثيل البصري للمنتدى.
إنشاء موصِّل منتدى لمركز البيانات.

مراجع إضافية

في ما يلي مراجع متنوعة يمكنك الوصول إليها لمساعدتك في التعمّق في المادة التي يتناولها هذا الدرس التطبيقي حول الترميز.

نوع المورد	ميزات المستخدم	ميزات مطوّري البرامج
الوثائق	مركز المساعدة	وثائق مطوّري البرامج
آخر الأخبار	الاشتراك في مركز البيانات &gt؛ إعدادات المستخدم	القائمة البريدية لمطوّري البرامج
طرح الأسئلة	منتدى المستخدمين	Stack Overflow [google-data-studio] منتدى مطوّري "مركز البيانات"
الفيديوهات	مركز البيانات على YouTube	تتوفر رسومات الشعار المبتكرة قريبًا.
أمثلة	معرض التقارير	مستودع مفتوح المصدر

إنشاء عروض JavaScript مخصّصة في "مركز البيانات" تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.

ما ستتعرَّف عليه

الأشياء التي تحتاج إليها

لماذا اخترت هذا الدرس التطبيقي حول الترميز؟

كيف تخطط لاستخدام هذا الدرس التطبيقي/الدرسي حول الترميز؟

كيف تقيّم تجربة "مركز البيانات"؟

ما هو أفضل وصف للخلفية؟

ما هي مكتبات التمثيل البصري JavaScript التي تهتم بها؟

كتابة مصدر التمثيل البصري

myVizSource.js

تحضير ملف JavaScript النهائي

نص برمجي لتسلسل نظام التشغيل Linux/Mac

نص برمجي لـ Windows

myViz.css

myViz.json

ملف manifest.json

أوامر تحميل gsutil

myVizSource.js

myVizSource.js

myVizSource.js

توسيع التمثيل البصري

تنفيذ المزيد من المهام باستخدام الرسوم البيانية للمنتدى

مراجع إضافية

إنشاء عروض JavaScript مخصّصة في "مركز البيانات"