تخطَّ إلى المحتوى
+ أضف منتج إنشاء حساب تسجيل الدخول

دليل رسوم D3 التفاعلية

تصور البيانات agent-skills filesystem MIT
⬇ تنزيل vsha-6509d4c90032

SHA-256: 6509d4c9003214b97f52ec631e262f9eb0018d630f88de5a0abb2a64c8d9be6c 3 كيلوبايت

✦ جاهزة لبيئة عملك

ثبّت هذه المهارة مباشرة داخل وكيلك

اختر الوكيل، انسخ الأمر، وشغّله من مجلد مشروعك. يتولى CLI تنزيل الحزمة والتحقق من بصمة SHA-256 ووضع الملفات في المسار المناسب.

$npx @ai-dalil/skills add d3-interactive-charts-guide --agent codex

@ai-dalil/skills على npm - Node.js 18.18 أو أحدث.

↓ تنزيل ZIP · الإصدار sha-6509d4c90032 بيانات API ↗ سجل الإصدارات ↗

الوصف

عربي

يبني رسوم D3 تفاعلية مدروسة: ارتباط بيانات صريح، تمرير مفيد لا ضجيج، وأداء مقبول على البيانات الكبيرة.

English

Build deliberate interactive D3 charts: explicit data binding, useful not noisy hover, and acceptable performance at scale.

بيانات المهارة التقنية

SKILL name
d3-interactive-charts-guide
الوصف الأصلي
Build deliberate interactive D3 charts: explicit data binding, useful not noisy hover, and acceptable performance at scale.
إصدار المهارة
1.0.1
التوافق
مكتبات رسم (matplotlib/Chart.js) أو أدوات لوحات
الأدوات المسموح بها
Read, Write
الكلمات المفتاحية
d3, javascript, visualization, frontend
لغة المصدر
multilingual
الفرع / المرجع
main
دليل الترخيص
Original editorial content authored for the AiDalil catalog and released under MIT by the catalog owner. (high)

بيانات المصدر الأصلية (YAML)

عرض Frontmatter الأصلي
name: d3-interactive-charts-guide
description: Build deliberate interactive D3 charts: explicit data binding, useful not noisy hover, and acceptable performance at scale.
version: 1.0.1
metadata:
  author: AiDalil Editorial
  category: data-visualization
  compatibility: goose, claude-code, github-copilot, roo-code, cline, api
  difficulty: advanced
  tags: [d3, javascript, visualization, frontend]

تعليمات SKILL.md

المحتوى الأصلي للمهارة كما ورد من المصدر، مع الحفاظ على تنسيق Markdown.

عرض التعليمات الكاملة
# D3 Interactive Charts Guide

**Goal:** Build deliberate interactive D3 charts: explicit data binding, useful not noisy hover, and acceptable performance at scale.

> الهدف: يبني رسوم D3 تفاعلية مدروسة: ارتباط بيانات صريح، تمرير مفيد لا ضجيج، وأداء مقبول على البيانات الكبيرة.

## When to use
- الحالة النموذجية: يبني رسوم D3 تفاعلية مدروسة: ارتباط بيانات صريح، تمرير مفيد لا ضجيج، وأداء مقبول على البيانات الكبيرة.
- اختيار نوع الرسم الأنسب لبيانات ورسالة محددة.
- بناء لوحة معلومات متسقة وقابلة للقراءة السريعة.
- كتابة تعليقات وتسميات تجعل الرسم يشرح نفسه.
- تجهيز أشكال جاهزة للنشر أو التقارير المطبوعة.

## Workflow
1. اختر نوع الرسم من طبيعة السؤال لا من جمال الشكل.
2. حدّد الرسالة الواحدة: دليل رسوم D3 التفاعلية. اكتبها كجملة كاملة قبل اختيار أي رسم.
3. قلّل الحبر الزائد: احذف الزخرفة والشبكات الكثيفة والمفاتيح غير الضرورية.
4. اكتب عنواناً يحمل الاستنتاج لا وصف البيانات فقط.
5. ضع التسميات مباشرة على البيانات وتجنب مطاردة القارئ بين المفتاح والرسم.
6. اختر لوحة ألوان متسقة وآمنة لعمى الألوان وبقراءة رمادية مقبولة.
7. اختبر القراءة: هل يفهم القارئ الرسالة في خمس ثوانٍ؟
8. صنّف السؤال: مقارنة؟ اتجاه؟ تركيب؟ توزيع؟ علاقة؟

## Rules
- ترتيب الفئات بمنطق: قيمة، زمن، أو تسلسل؛ لا ترتيب عشوائي.
- كل شكل له مصدر بيانات وفترة زمنية مكتوبة.
- الرقم النصي الدقيق يوضع عند الحاجة للقرار لا على كل نقطة.
- المحور المقطوع يحتاج تبريراً وتمييزاً صريحاً.
- رسم واحد يحمل رسالة واحدة؛ قسّم الرسائل المتعددة.

## Output contract
- شكل نهائي بصيغتين: عرض ونشر.
- ملخص رسالة الرسم في سطر واحد.
- نسخة بديلة آمنة لعمى الألوان عند الحاجة.
- كود أو خطوات توليد الرسم قابلة للتكرار.

## Quality checks
- [ ] هل التصدير النهائي بجودة ودقة مناسبة للقناة المستهدفة؟
- [ ] هل الرسم يطابق الأرقام في النص المجاور؟
- [ ] هل حُذفت العناصر الزخرفية التي لا تحمل معنى؟
- [ ] هل تظل الأشكال مفهومة بالأبيض والأسود؟
- [ ] هل المحاور والتسميات كاملة وبدون اختصارات ملتبسة؟

## Skill identity
- Skill name: `d3-interactive-charts-guide`
- Version: 1.0.1
- Domain: Data Visualization (تصور البيانات)
- Tags: d3, javascript, visualization, frontend

التثبيت اليدوي

استخدم هذا المسار عند عدم استخدام CLI أو عند إدارة ملفات المهارات يدويًا.

  1. نزّل ملف ZIP للإصدار المطلوب من أعلى الصفحة، أو افتح المصدر الأصلي إذا لم تتوفر حزمة مستضافة.
  2. فك الضغط، ثم انقل مجلد المهارة الذي يحتوي مباشرة على SKILL.md إلى مجلد الوكيل.
  3. أعد تحميل الوكيل أو افتح جلسة جديدة، ثم تأكد من ظهور المهارة ضمن المهارات المتاحة.
Codex.agents/skills/d3-interactive-charts-guide/
Claude Code.claude/skills/d3-interactive-charts-guide/
Cursor.cursor/skills/d3-interactive-charts-guide/

تعليمات خاصة بهذه المهارة

Extract the skill folder into your agent's skills directory (for example the project skills folder) or install the ZIP package from the skill page. No build step is required; everything is Markdown.

حالات الاستخدام

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

المتطلبات

• Any Agent Skills compatible assistant (Claude Code, Claude Desktop, or API agents). • Basic file access to read the bundled reference playbook. • No external services required for the standard workflow.

الإصدارات

الإصدار الحجم الملفات تاريخ النشر تنزيل
vsha-6509d4c90032 3 كيلوبايت 2 4 نوفمبر، 2026 تحميل

الأمان والفحص

فحص أساسي ✓ — 1 نوفمبر، 2026

مجتمع يبني قدرات أفضل

هل طوّرت مهارة تستحق أن يكتشفها الآخرون؟

ساهم في إثراء مكتبة المهارات، وعرّف المجتمع على عملك مع حفظ نسبه إلى مصدره الأصلي.

أرسل مهارة كيف تعمل المهارات؟
قسم المهارات — دليل AIالعودة إلى دليل AI ↗