تقنية

كيفية استخدام جداول بيانات Google مع D3.js وGoogle Visualization

كيفية استخدام جداول بيانات Google مع D3.js وGoogle Visualization


يمكن استخدام مكتبة التصور D3.js لإنشاء رسوم بيانية ومرئيات جميلة باستخدام بيانات من مصادر خارجية بما في ذلك ملفات CSV وبيانات JSON.

يلعب ;

لإعطائك مثالاً، تصور الرسوم المتحركة D3.js هذه داخل جداول بيانات Google المرتبطة بمشروع تعقب فيروس كورونا (COVID-19) نمو حالات فيروس كورونا في الهند بمرور الوقت. فهو يستخدم Google Visualization API وD3.js ومكون Bar Chart Race الرائع جدًا الذي أنشأه مايك بوستوك، منشئ D3.js.

جداول بيانات Google وD3.js

يشرح هذا الدليل كيف يمكنك استخدام البيانات الموجودة في جداول بيانات Google لإنشاء مخططات باستخدام D3.js باستخدام Visualization API. يتم جلب البيانات في الوقت الفعلي، لذلك إذا تم تحديث البيانات الموجودة في جداول بيانات Google، فإنها تنعكس في الرسم البياني أيضًا.

الخطوة 1: اجعل جداول بيانات Google عامة

اجعل جدول بيانات Google الخاص بك عامًا – يمكنك إما مشاركة الورقة مع إمكانية الوصول “لأي شخص لديه الرابط يمكنه العرض” أو جعلها عامة حتى تتمكن محركات البحث من العثور على الورقة التي تحتوي على بيانات المخططات.

نحن نستخدم ورقة Google هذه في هذا البرنامج التعليمي.

الخطوة 2: تحميل المكتبات في HTML

قم بتحميل D3.js (v5) ومكتبة مخططات Google في ملف Index.html الخاص بك. تمت كتابة JavaScript لعرض مخطط D3 في ملف Index.js.

<!DOCTYPE html>
<html>
  <head>
    <script src="https://www.gstatic.com/charts/loader.js"></script>
    <script src="https://d3js.org/d3.v5.min.js"></script>
  </head>

  <body>
    <svg></svg>
  </body>
  <script src="./index.js"></script>
</html>

الخطوة 3: تهيئة Google Visualization API

حدد هنا عنوان URL لنشر جدول بيانات Google (يجب أن يشير gid إلى الورقة التي تحتوي على البيانات). تتيح لك لغة استعلام Google Visualization API (المرجع) استخدام SQL مثل بناء الجملة لتحديد الأعمدة التي يجب استخدامها لجلب البيانات من ورقة Google. يمكنك أيضًا استخدام offset, where و limit بنود للحد من البيانات التي يتم إرجاعها بواسطة جداول بيانات Google.

google.charts.load('current');
google.charts.setOnLoadCallback(init);

function init() {
  var url = 'https://docs.google.com/spreadsheets/d/1YpiTo7Fc3QvBdbuReCIcwtg7lnmZupQAH57phrDLotI/edit#gid=0';
  var query = new google.visualization.Query(url);
  query.setQuery('select A, B');
  query.send(processSheetsData);
}

الخطوة 4: تحضير البيانات لـ D3.js

بعد توفر بيانات جدول البيانات، قم بمعالجة الاستجابة في مجموعة من الكائنات التي يمكن قراءتها بواسطة d3.js. تقوم جداول بيانات Google بإرجاع البيانات الرقمية على هيئة سلسلة حتى نتمكن من استخدام parseInt أو العامل الأحادي (+) لتحويل السلسلة إلى عدد صحيح.

function processSheetsData(response) {
  var array = [];
  var data = response.getDataTable();
  var columns = data.getNumberOfColumns();
  var rows = data.getNumberOfRows();
  for (var r = 0; r < rows; r++) {
    var row = [];
    for (var c = 0; c < columns; c++) {
      row.push(data.getFormattedValue(r, c));
    }
    array.push({
      name: row[0],
      value: +row[1]
    });
  }
  renderData(array);
}

الخطوة 5: عرض مخطط D3.js

بعد ذلك، نقوم بإنشاء مخطط شريطي في D3.js باستخدام البيانات من جداول بيانات Google. يمكنك متابعة هذا البرنامج التعليمي على @ObservableHQ لفهم كيفية إنشاء مخططات شريطية داخل D3.js. يتم تقديم المخطط بتنسيق SVG.

function renderData(data) {
  const margin = { top: 30, right: 0, bottom: 30, left: 50 };
  const color = 'steelblue';
  const height = 400;
  const width = 600;
  const yAxis = (g) =>
    g
      .attr('transform', `translate(${margin.left},0)`)
      .call(d3.axisLeft(y).ticks(null, data.format))
      .call((g) => g.select('.domain').remove())
      .call((g) =>
        g
          .append('text')
          .attr('x', -margin.left)
          .attr('y', 10)
          .attr('fill', 'currentColor')
          .attr('text-anchor', 'start')
          .text(data.y)
      );

  const xAxis = (g) =>
    g.attr('transform', `translate(0,${height - margin.bottom})`).call(
      d3
        .axisBottom(x)
        .tickFormat((i) => data[i].name)
        .tickSizeOuter(0)
    );
  const y = d3
    .scaleLinear()
    .domain([0, d3.max(data, (d) => d.value)])
    .nice()
    .range([height - margin.bottom, margin.top]);

  const x = d3
    .scaleBand()
    .domain(d3.range(data.length))
    .range([margin.left, width - margin.right])
    .padding(0.1);

  const svg = d3.select('svg').attr('width', width).attr('height', height).attr('fill', color);

  svg
    .selectAll('rect')
    .data(data)
    .enter()
    .append('rect')
    .attr('x', (d, i) => x(i))
    .attr('y', (d) => y(d.value))
    .attr('height', (d) => y(0) - y(d.value))
    .attr('width', x.bandwidth());

  svg.append('g').call(xAxis);

  svg.append('g').call(yAxis);
}



Source link

الوسوم

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

زر الذهاب إلى الأعلى