claude-d3js-skill
إنشاء تصورات بيانات تفاعلية باستخدام D3.js
أنشئ تصورات بيانات مخصصة عالية الجودة للنشر دون تعقيد. توفر هذه المهارة إرشادات خبيرة في D3.js مع قوالب جاهزة للاستخدام للرسوم البيانية والمخططات والرسوم التفاعلية التي تعمل عبر أي إطار عمل JavaScript.
Télécharger le ZIP du skill
Importer dans Claude
Allez dans Paramètres → Capacités → Skills → Importer un skill
Activez et commencez à utiliser
Tester
Utilisation de "claude-d3js-skill". إنشاء مخطط خطي يعرض اتجاهات درجة الحرارة الشهرية
Résultat attendu:
مكون React كامل لـ D3.js مع مخطط خطي SVG، بما في ذلك المحور السيني (الأشهر)، والمحور الصادي (درجة الحرارة)، واستيفاء المنحنى السلس، ومنطقة تعبئة متدرجة تحت الخط، وتلميح توضيحي يعرض القيم الدقيقة عند التمرير.
Utilisation de "claude-d3js-skill". بناء مخطط دائري لمقارنة حصة السوق
Résultat attendu:
مخطط دائري تفاعلي لـ D3.js مع انتقالات دخول متحركة، وشرائح منفصلة عند التمرير، وتسميات النسب المئوية، ووسيمة خارجية مع ترميز الألوان، وحركة نقر لتفجير الشريحة المحددة.
Audit de sécurité
SûrAll 392 static analyzer findings were evaluated and dismissed as false positives. The pattern detections for 'external_commands', 'weak cryptographic algorithm', 'C2 keywords', 'network', and 'filesystem' operations were triggered by markdown documentation code blocks, D3.js API method names (schemeCategory10, nodes, desc), hex color codes in colour scheme documentation, and standard CDN import examples. This is a legitimate D3.js data visualization skill containing only documentation and code templates with no executable security risks.
Score de qualité
Ce que vous pouvez construire
مطور لوحات معلومات الأعمال
إنشاء لوحات معلومات تنفيذية مع مخططات مؤشرات الأداء الرئيسية وتصورات الاتجاهات والمرشحات التفاعلية لمنصات تحليلات الأعمال.
صحفي بيانات
بناء قصص تفاعلية جذابة مع مخططات وخرائط مخصصة تساعد القراء على استكشاف الروايات المدفوعة بالبيانات.
محلل أبحاث
إنشاء تصورات علمية عالية الجودة للنشر مع تحكم دقيق في المقاييس والمحاور والتمثيلات الإحصائية.
Essayez ces prompts
أنشئ مخططاً شريطياً متجاوباً باستخدام D3.js يعرض بيانات الإيرادات الفصلية. يتضمن تسميات محاور مناسبة وتلميحات توضيحية عند التمرير ويستخدم لوحة ألوان يمكن الوصول إليها من قبل مصابي عمى الألوان. قدم كود مكون React كاملاً.
ابنِ مخططاً مبعثراً تفاعلياً مع D3.js حيث تمثل كل نقطة منتجاً. أضف وظائف التكبير/التصغير والسحب، والنقر لتمييز النقاط الفردية، ووسيمة يتم تحديثها ديناميكياً عند تغيير فلاتر البيانات.
أنشئ مخطط شبكة موجه بالقوة يوضح العلاقات بين الكيانات. نفّذ سحب العقد، وكشف التصادم، وتخصيص نمط الروابط بناءً على نوع العلاقة، والانتقالات المتحركة عند إضافة أو إزالة العقد.
ابنِ خريطة كلوروبليث جغرافية باستخدام توقعات geo في D3.js. اعرض البيانات الإقليمية مع ترميز الألوان، وأضف انتقالات تكبير بين مستويات الدولة والولاية، وأظهر تلميحات توضيحية بإحصائيات مفصلة عند التمرير.
Bonnes pratiques
- امسح دائماً محتوى SVG السابق باستخدام selectAll('*').remove() قبل إعادة العرض لمنع العناصر المكررة
- استخدم اصطلاح الهوامش للتباعد المناسب للمحاور واستيعاب تجاوز التسميات في أبعاد المخطط
- نفّذ تحديد الحجم المتجاوب مع ResizeObserver أو مستمعي تغيير حجم النافذة للتخطيطات التكيفية
Éviter
- لا تحدد الأبعاد بشكل ثابت - استخدم دائماً حاويات متجاوبة تتكيف مع حجم العنصر الأصلي
- تجنب إنشاء مقاييس داخل حلقات أو انتقالات - حددها مرة واحدة وأعد استخدامها للأداء
- لا تستخدم D3 أبداً للمخططات الثابتة البسيطة - فضل CSS أو المكتبات الخفيفة للتصورات الأساسية