ابنِ مخططات ورسوم بيانية وتصورات شبكية مخصصة مع تحكم دقيق. تساعدك هذه المهارة في إنشاء رسومات بيانية تفاعلية بجودة النشر باستخدام D3.js لأي إطار عمل JavaScript.
تنزيل ZIP المهارة
رفع في Claude
اذهب إلى Settings → Capabilities → Skills → Upload skill
فعّل وابدأ الاستخدام
اختبرها
استخدام "d3-viz". أنشئ مخططاً شريطياً يعرض بيانات المبيعات: المنتج أ (150)، المنتج ب (230)، المنتج ج (180)
النتيجة المتوقعة:
ينشئ مكون React مع مخطط D3.js الشريطي يتضمن: إعداد SVG، وscaleBand لمحور x، وscaleLinear لمحور y، وaxisBottom وaxisLeft، وأعمدة منسقة مع تعبئة steelblue، وتسميات المحاور للمنتجات والقيم
استخدام "d3-viz". ابنِ مخطط تشتت تفاعلي مع تلميحات
النتيجة المتوقعة:
ينشئ مخطط تشتت D3.js مع: عناصر دائرة مرتبطة بالبيانات، ومستّمعات أحداث التمرير التي تعرض عنصر tooltip div، وتأثيرات التحول عند التمرير بالماوس، ومقاييس x/y محسوبة مع هوامش، ومنشئات المحاور والتسميات
استخدام "d3-viz". اصنع رسماً بيانياً موجهاً بالقوة لبيانات شبكتي
النتيجة المتوقعة:
ينفذ D3.js forceSimulation مع: forceManyBody لتنافر العُقد، وforceLink لاتصالات الحواف، وforceCenter للتموضع، وعُقد قابلة للسحب مع معالجات أحداث السحب، وحسابات ديناميكية للمسافة والقوة للروابط
التدقيق الأمني
آمنAll static analysis findings are false positives from documentation files containing code examples. The 'Ruby/shell backtick execution' detections are markdown code blocks with JavaScript examples for D3.js. The 'MD5 hash' and 'C2 keyword' detections are legitimate terms in documentation context (hash properties in JSON, command in D3.js API). No actual security risks present - this is a legitimate visualization skill with safe template code and reference materials.
درجة الجودة
ماذا يمكنك بناءه
منشئ لوحات المعلومات
إنشاء لوحات معلومات تفاعلية مع تصور بيانات في الوقت الفعلي لمقاييس الأعمال والتحليلات وأنظمة المراقبة
مصور الأبحاث
تحويل بيانات الأبحاث إلى مخططات ورسوم بيانية بجودة النشر للأوراق الأكاديمية أو العروض التقديمية
مصمم المخططات المخصص
بناء تصورات فريدة ومميزة تتجاوز مكتبات المخططات القياسية للتسويق أو سرد القصص
جرّب هذه الموجهات
أنشئ مخططاً شريطياً باستخدام D3.js يعرض بيانات المبيعات الشهرية. قم بتضمين تسميات المحاور وعنوان واستخدم لون steelblue للأعمدة. يجب أن يكون عرض المخطط 800 بكسل وارتفاعه 400 بكسل.
ابنِ مخططاً خطياً تفاعلياً باستخدام D3.js يوضح اتجاهات درجة الحرارة عبر الزمن. أضف تلميحات تمرير تعرض القيم عند تحريك الماوس فوق نقاط البيانات. قم بتضمين ميزة تكبير لفحص نطاقات زمنية محددة.
أنشئ مخططاً شبكياً موجهاً بالقوة باستخدام D3.js يوضح العلاقات بين الكيانات. يجب أن يكون حجم العُقد حسب الأهمية وملونة حسب الفئة. أضف وظيفة السحب حتى يتمكن المستخدمون من إعادة تموضع العُقد.
صمم مخططاً مساحياً مكدساً باستخدام D3.js يقارن سلاسل بيانات متعددة عبر الزمن. نفّذ تحولات سلسة عند تحديث البيانات. قم بتضمين legenda وتأكد من لوحة ألوان يسهل الوصول إليها لمصابي عمى الألوان.
أفضل الممارسات
- قم دائماً بتحديد ومسح عناصر SVG قبل العرض لمنع تسرب الذاكرة والتصورات المكررة عند إعادة عرض المكونات
- استخدم مقاييس D3.js لجميع تعيينات الأبعاد بدلاً من الحسابات اليدوية - يضمن هذا قياساً متناسقاً وتصميماً سريع الاستجابة أسهل
- نفّذ إمكانية الوصول المناسبة بإضافة تسميات ARIA والعناوين والأوصاف إلى عناصر SVG، واختبر مخططات الألوان لمستخدمي عمى الألوان
تجنب
- تجنب التلاعب المباشر بـ DOM الذي تديره React باستخدام D3.js بعد العرض الأولي - هذا يكسر المصالحة الافتراضية في React ويسبب مشاكل في الأداء
- لا تحدد أبعاد المخطط بشكل ثابت - استخدم دائماً استعلامات الحاوية أو مراقبي التغيير في الحجم لجعل التصورات سريعة الاستجابة لتغييرات عرض الشاشة
- لا تحذف أبداً التحقق من صحة البيانات قبل ربطها بمحددات D3 - البيانات غير المصادق عليها يمكن أن تسبب إخفاقات صامتة أو أخطاء غامضة في العرض