استخدام D3.js في الرسوم البيانية

تُعد D3.js من أشهر مكتبات JavaScript
المستخدمة في بناء الرسوم البيانية التفاعلية
والتعامل مع عناصر HTML اعتمادًا على البيانات.
وتوضح الصفحة الأصلية أن D3.js هي مكتبة
لـ التعامل مع HTML بالاعتماد على البيانات،
وهذا يجعلها أداة قوية جدًا عندما نريد تحويل البيانات
إلى عناصر مرئية داخل الصفحة.

ما هي D3.js؟

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

وهذا يعني أن D3.js ليست مجرد مكتبة مخططات جاهزة،
بل مكتبة أوسع تركز على
ربط البيانات بالعناصر المرئية.

كيف تستخدم D3.js؟

توضح الصفحة أن أول خطوة لاستخدام D3.js
داخل صفحة الويب هي إضافة رابط المكتبة:

<script src=\"//d3js.org/d3.v3.min.js\"></script>

بعد ذلك تصبح دوال D3.js متاحة داخل JavaScript،
ويمكن البدء في اختيار عناصر الصفحة أو إنشاء عناصر جديدة
وربطها بالبيانات.

مثال Hello World

تذكر الصفحة أن D3.js سهلة الاستخدام،
وتعرض مثالًا بسيطًا جدًا يوضح الفكرة الأساسية:
اختيار عنصر body من الصفحة،
ثم إضافة فقرة جديدة إليه،
ثم وضع النص Hello World! داخلها.

d3.select(\"body\").append(\"p\").text(\"Hello World!\");

هذا المثال مهم لأنه يوضح منطق D3.js ببساطة:

• select لاختيار عنصر موجود
• append لإضافة عنصر جديد
• text لوضع النص داخل العنصر

وبذلك نفهم أن D3.js تبدأ من التعامل مع العناصر نفسها،
ثم يمكن توسيع ذلك لاحقًا إلى الرسوم البيانية الأكثر تعقيدًا.

Scatter Plot في D3.js

بعد المثال البسيط، تنتقل الصفحة إلى مثال عملي
لرسم Scatter Plot.
وهنا تبدأ الفكرة الحقيقية للربط بين البيانات والرسم،
حيث يتم إنشاء نقاط عشوائية ثم عرضها داخل مساحة SVG
مع محوري x وy.

تحديد أبعاد الرسم

أول خطوة في المثال هي تحديد أبعاد مساحة الرسم،
بالإضافة إلى الهامش الداخلي:

const xSize = 500;
const ySize = 500;
const margin = 40;
const xMax = xSize - margin*2;
const yMax = ySize - margin*2;

في هذا الجزء:

• xSize هو عرض مساحة الرسم
• ySize هو ارتفاع مساحة الرسم
• margin هو الهامش الداخلي
• xMax وyMax يمثلان المساحة الفعلية المتاحة للرسم بعد خصم الهوامش

وجود الهامش هنا مهم لأنه يترك مساحة للمحاور والعناصر البصرية
دون أن تلتصق الرسوم بأطراف العنصر.

إنشاء نقاط عشوائية

بعد تحديد الأبعاد، تعرض الصفحة كيفية إنشاء
100 نقطة عشوائية.
يتم ذلك عبر حلقة تقوم بإضافة أزواج من القيم
إلى مصفوفة البيانات.

const numPoints = 100;
const data = [];
for (let i = 0; i < numPoints; i++) {
  data.push([Math.random() * xMax, Math.random() * yMax]);
}

كل عنصر داخل المصفوفة هنا يحتوي على:

• قيمة x عشوائية
• قيمة y عشوائية

وبذلك نحصل على مجموعة بيانات يمكن عرضها كنقاط مبعثرة
داخل مساحة الرسم.

إضافة SVG إلى الصفحة

توضح الصفحة بعد ذلك أن الرسم في هذا المثال
لا يتم على Canvas، بل على عنصر SVG.
ولهذا يتم أولًا اختيار العنصر الذي سيحتوي على الرسم،
ثم إضافة SVG داخله، ثم إضافة مجموعة g
مع تطبيق التحويل المناسب للهامش.

const svg = d3.select(\"#myPlot\")
  .append(\"svg\")
  .append(\"g\")
  .attr(\"transform\",\"translate(\" + margin + \",\" + margin + \")\");

هذا السطر يوضح واحدة من أهم مزايا D3.js:
أن الرسم نفسه يُبنى كعناصر HTML / SVG
يمكن التحكم فيها خطوة بخطوة.

بناء المحور الأفقي X Axis

بعد إنشاء SVG، تنتقل الصفحة إلى إنشاء
المحور الأفقي.
ويتم ذلك أولًا عبر بناء مقياس خطي
باستخدام d3.scaleLinear()،
ثم ربطه بالمجال والقيم البصرية،
ثم رسم المحور أسفل مساحة الرسم.

const x = d3.scaleLinear()
  .domain([0, 500])
  .range([0, xMax]);

svg.append(\"g\")
  .attr(\"transform\", \"translate(0,\" + yMax + \")\")
  .call(d3.axisBottom(x));

في هذا المثال:

• domain يحدد نطاق القيم الأصلية
• range يحدد كيف تُحوّل هذه القيم إلى مساحة الرسم
• axisBottom يرسم المحور في الأسفل

بناء المحور الرأسي Y Axis

ثم يتم إنشاء المحور الرأسي
بنفس الفكرة، ولكن مع ملاحظة مهمة:
قيمة range في y
تكون معكوسة حتى يظهر الرسم بالطريقة المعتادة
من أسفل إلى أعلى.

const y = d3.scaleLinear()
  .domain([0, 500])
  .range([yMax, 0]);

svg.append(\"g\")
  .call(d3.axisLeft(y));

وهذه نقطة مهمة في الرسوم البيانية عمومًا،
لأن اتجاه المحور الرأسي في العرض
يختلف عن الطريقة الرياضية المعتادة إذا لم نعكسه.

رسم النقاط Dots

بعد تجهيز البيانات والمحاور،
تأتي الخطوة الأخيرة وهي رسم النقاط نفسها.
وتعرض الصفحة الطريقة التالية:

svg.append(\'g\')
  .selectAll(\"dot\")
  .data(data).enter()
  .append(\"circle\")
  .attr(\"cx\", function (d) { return d[0] } )
  .attr(\"cy\", function (d) { return d[1] } )
  .attr(\"r\", 3)
  .style(\"fill\", \"Red\");

وهنا نرى جوهر D3.js بوضوح:

• data(data) تربط البيانات بالعناصر
• enter() تتعامل مع العناصر الجديدة التي يجب إنشاؤها
• append(“circle”) ينشئ دائرة لكل نقطة
• cx وcy يحددان مكان الدائرة
• r يحدد نصف القطر
• style(“fill”, “Red”) يحدد لونها

وبذلك يتم تحويل البيانات العشوائية إلى نقاط حمراء ظاهرة
داخل الرسم البياني.

لماذا D3.js مختلفة عن المكتبات الأخرى؟

من خلال الأمثلة في الصفحة، يتضح أن D3.js تختلف عن مكتبات مثل
Chart.js أو Google Chart أو Plotly.js في أنها تمنح المطور
تحكمًا أدق وأعمق في عناصر الرسم نفسها.

فبدلًا من الاعتماد الكامل على نوع رسم جاهز فقط،
تسمح D3.js ببناء الرسم من الصفر تقريبًا،
من خلال:

• إنشاء عنصر SVG
• إضافة محاور يدويًا
• ربط البيانات بالعناصر
• إنشاء دوائر أو خطوط أو أشكال جديدة حسب الحاجة

ولهذا فهي مكتبة قوية جدًا،
لكنها تتطلب أيضًا فهمًا أوضح لبنية الرسوم البيانية نفسها.

الخلاصة

يوضح هذا الدرس أن D3.js
هي مكتبة JavaScript للتعامل مع HTML اعتمادًا على البيانات،
وأنها تبدأ بخطوات بسيطة مثل اختيار عنصر وإضافة نص،
ثم تنتقل إلى بناء رسوم أكثر تعقيدًا مثل
Scatter Plot باستخدام SVG.
كما يشرح الدرس مراحل بناء الرسم:
تحديد الأبعاد، إنشاء البيانات العشوائية،
إضافة SVG، رسم المحورين x وy،
ثم إنشاء النقاط وربطها بالبيانات.
وبذلك يقدم أساسًا جيدًا لفهم كيف تستخدم D3.js
في بناء الرسوم البيانية التفاعلية داخل الويب.