مخطط مبعثر قائم على جافا سكريبت مع مناطق منحنية في React

بناء مخطط مبعثر ديناميكي باستخدام بيانات درجة الحرارة والرطوبة

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

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

والحمد لله، هناك العديد من المكتبات المتاحة ل رد فعل وجافا سكريبت العادي الذي يمكن أن يساعد في رسم نقاط البيانات هذه وإضافة مناطق منحنية. باستخدام الأدوات المناسبة، يمكنك بسهولة إنشاء مخطط مبعثر بمناطق مخصصة لتحليل أفضل للبيانات. تتيح هذه الأدوات المرونة والدقة في رسم خرائط العلاقات غير الخطية.

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

فهم تنفيذ مخطط التشتت مع المناطق المنحنية في React

يستخدم المثال الأول في البرامج النصية رد فعل بالاشتراك مع الأقوياء D3.js مكتبة لإنشاء مؤامرة مبعثرة مع مناطق منحنية. يرسم المخطط المبعثر درجة الحرارة على المحور السيني والرطوبة على المحور الصادي، مما يساعد على تصور العلاقة بين هذين المتغيرين. يتم تمثيل نقاط البيانات بدوائر، ويتم رسمها باستخدام طريقتي `enter()` و`append()` D3، مما يضمن إضافة كل نقطة بيانات إلى DOM. أحد الجوانب الحاسمة في التنفيذ هو استخدام المقاييس الخطية مع `scaleLinear()`، والتي تحدد قيم درجة الحرارة والرطوبة لمواضع البكسل داخل SVG، مما يسمح بوضع النقاط بشكل صحيح على المخطط.

بالإضافة إلى رسم نقاط البيانات، يرسم البرنامج النصي مناطق منحنية باستخدام مولد الخط (`d3.line()`). يقوم هذا الأمر بإنشاء مسارات تمثل منحنيات بين نقاط محددة، مما يسمح برسم المناطق غير الخطية فوق المخطط المبعثر. في هذه الحالة، يتم تطبيق `curve(d3.curveNatural)` لإنشاء منحنيات سلسة ذات مظهر طبيعي بين قيم درجة الحرارة والرطوبة. تعتبر هذه المنحنيات ضرورية لتحديد مناطق مختلفة في المخطط المبعثر، والتي يمكن أن تمثل مناطق أو نطاقات محددة من الاهتمام، مثل نطاق مريح أو خطير من الرطوبة بناءً على درجة الحرارة.

المثال الثاني الروافع Chart.js في React، مكتبة أبسط ولكنها فعالة لعرض المخططات. يتم استخدام مكون Chart.js `Scatter` لرسم نقاط بيانات درجة الحرارة والرطوبة. على الرغم من أن Chart.js ليس مرنًا مثل D3.js لإنشاء تصورات مخصصة، إلا أنه يوفر إعدادًا بديهيًا للمخططات المبعثرة. الميزة الرئيسية هنا هي المكوّن الإضافي "التعليق التوضيحي"، والذي يسمح برسم الأشكال أو الخطوط أو المناطق على المخطط. يتم استخدام هذا البرنامج الإضافي لتقريب المناطق المنحنية عن طريق رسم خطوط مستقيمة عبر أقسام المخطط المبعثر، مما يؤدي إلى إنشاء تقسيمات مرئية بين مناطق الاهتمام. على الرغم من أن المناطق المنحنية يتم تقريبها بخطوط مستقيمة، إلا أن هذه الطريقة واضحة ومباشرة وتوفر طريقة سريعة لتصور المناطق في مخطط مبعثر.

تشتمل كلتا الطريقتين على ممارسات مهمة، مثل قياس البيانات باستخدام `scaleLinear()` في D3.js واستخدام الخيارات المضمنة لتخصيص مقاييس الرسم البياني في Chart.js. تم تصميم هذه الأساليب لتحقيق المرونة، مما يسمح للمطورين بتعديلها وتوسيعها لحالات الاستخدام المختلفة. بينما يوفر D3.js مزيدًا من التحكم والدقة في رسم المنحنيات والمناطق، يوفر Chart.js إعدادًا أسرع للمخططات المبعثرة الأساسية مع مستوى معين من التخصيص من خلال المكونات الإضافية مثل "التعليق التوضيحي". كلا البرنامجين عبارة عن وحدات نمطية وقابلة لإعادة الاستخدام، مما يوفر المرونة في إنشاء مخططات مبعثرة تفاعلية مع مناطق منحنية في تطبيقات React.

import React, { useEffect, useRef } from 'react';
import * as d3 from 'd3';
const ScatterPlotWithCurves = ({ data }) => {
  const svgRef = useRef();
  useEffect(() => {
    const svg = d3.select(svgRef.current)
      .attr('width', 500)
      .attr('height', 500);
    const xScale = d3.scaleLinear()
      .domain([d3.min(data, d => d.temperatureC), d3.max(data, d => d.temperatureC)])
      .range([0, 500]);
    const yScale = d3.scaleLinear()
      .domain([d3.min(data, d => d.humidity), d3.max(data, d => d.humidity)])
      .range([500, 0]);
    svg.selectAll('.dot')
      .data(data)
      .enter().append('circle')
      .attr('cx', d => xScale(d.temperatureC))
      .attr('cy', d => yScale(d.humidity))
      .attr('r', 5);
    // Add zones using curved paths
    const lineGenerator = d3.line()
      .x(d => xScale(d[0]))
      .y(d => yScale(d[1]))
      .curve(d3.curveNatural);
    svg.append('path')
      .datum([[30, 60], [40, 70], [50, 80]])
      .attr('d', lineGenerator)
      .attr('stroke', 'red')
      .attr('fill', 'none');
  }, [data]);
  return <svg ref={svgRef}></svg>;
};
export default ScatterPlotWithCurves;

import React from 'react';
import { Scatter } from 'react-chartjs-2';
const ScatterPlot = ({ data }) => {
  const chartData = {
    datasets: [{
      label: 'Temperature vs Humidity',
      data: data.map(d => ({ x: d.temperatureC, y: d.humidity })),
      borderColor: 'blue',
      pointBackgroundColor: 'blue',
    }],
  };
  const options = {
    scales: {
      x: { type: 'linear', position: 'bottom', title: { display: true, text: 'Temperature (°C)' } },
      y: { title: { display: true, text: 'Humidity (%)' } },
    },
    plugins: {
      annotation: { // Plugin to draw curved zones
        annotations: [{
          type: 'line',
          xMin: 30, xMax: 50, yMin: 60, yMax: 80,
          borderColor: 'red', borderWidth: 2,
        }],
      },
    },
  };
  return <Scatter data={chartData} options={options} />;
};
export default ScatterPlot;

استكشاف المكتبات البديلة لإنشاء المخططات المبعثرة في React

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

بديل آخر هو استخدام إعادة التخطيط، مكتبة مصممة خصيصًا لتطبيقات React. توفر Recharts واجهة برمجة تطبيقات أبسط مقارنةً بـ D3.js وهي خيار رائع للمطورين الذين يريدون نتائج سريعة بأقل قدر من التكوين. وهو يدعم المخططات المبعثرة والأشكال المخصصة، مما يجعل من الممكن تقريب المناطق المنحنية. على الرغم من أن Recharts لا يتمتع بالتخصيص الشامل لـ D3.js، إلا أنه لا يزال خيارًا قويًا للتعامل مع المخططات المبعثرة الأساسية، خاصة عندما تكون سهولة الاستخدام وسهولة القراءة من الاعتبارات الرئيسية.

أخيرًا، بالنسبة لأولئك الذين يريدون أقصى قدر من الأداء وسرعة العرض، CanvasJS هو خيار جيد. CanvasJS خفيف الوزن ويركز على استخدام لوحة HTML5 للرسم. يمكنه التعامل مع مجموعات البيانات الكبيرة بفعالية ويدعم التحديثات في الوقت الفعلي، مما يجعله مناسبًا تمامًا للتطبيقات التي تتطلب أداءً عاليًا. على الرغم من أنه قد يفتقر إلى بعض المرونة الموجودة في D3.js، إلا أن CanvasJS مثالي للتطبيقات التي تتطلب عرضًا واستجابة سريعة، مثل مراقبة لوحات المعلومات.