Vega-Lite

Vega-Lite هي قواعد عالية المستوى للرسوم البيانية التفاعلية تقدم صيغة JSON تصريحية وموجزة لإنشاء مجموعة واسعة من التصورات الإحصائية. تُترجم المواصفات إلى تصورات Vega كاملة، مما يجعلها خياراً ممتازاً لاستكشاف البيانات وعرضها مباشرة في مستندات Markdown.

في Moraya، ضع مواصفات Vega-Lite بصيغة JSON داخل كتلة أكواد محاطة بعلامة اللغة vega-lite (أو vega لمواصفات Vega الكاملة)، وسيقوم المحرر بعرض رسم بياني تفاعلي تلقائياً.

للاطلاع على المرجع الكامل للصيغة، راجع وثائق Vega-Lite الرسمية.

الصيغة الأساسية

مواصفات Vega-Lite هي كائن JSON يتضمن عدة خصائص على المستوى الأعلى:

$schema — عنوان URL لمخطط Vega-Lite (دائماً https://vega.github.io/schema/vega-lite/v5.json)
description — وصف نصي للرسم البياني
data — مجموعة البيانات، تُقدَّم مضمّنة عبر values أو من عنوان URL عبر url
mark — نوع العلامة المرئية (bar، line، point، area، arc، rect، إلخ.)
encoding — يربط حقول البيانات بالقنوات المرئية (x، y، color، size، shape، إلخ.)
width / height — أبعاد الرسم البياني بالبكسل
title — عنوان الرسم البياني كنص أو كائن إعدادات العنوان

أنواع العلامات

العلامة	الوصف
`bar`	أشرطة مستطيلة للرسوم البيانية الشريطية والمدرجات التكرارية
`line`	مقاطع خطية متصلة للسلاسل الزمنية
`point`	نقاط بيانات فردية للرسوم البيانية النقطية
`area`	مساحة مملوءة تحت الخط
`arc`	رسوم بيانية دائرية وحلقية
`rect`	مستطيلات للخرائط الحرارية والمدرجات التكرارية ثنائية الأبعاد
`rule`	خطوط مرجعية (أفقية أو عمودية)
`text`	تسميات نصية على الرسوم البيانية
`tick`	علامات خطية قصيرة للرسوم البيانية الشريطية
`circle`	علامات دائرية (اسم بديل لـ point بشكل دائري)
`square`	علامات مربعة
`boxplot`	رسوم بيانية صندوقية إحصائية

قنوات الترميز

القناة	الوصف
`x`، `y`	الموضع على المحورين الأفقي والعمودي
`color`	اللون، يُطبَّق على التعبئة أو الحد
`size`	حجم العلامة (نصف القطر للنقاط، العرض للأشرطة)
`shape`	شكل العلامة (لعلامات النقاط)
`opacity`	شفافية العلامة
`tooltip`	محتوى تلميح التمرير
`theta`	ترميز الزاوية (لعلامات القوس)
`order`	ترتيب التكديس أو الطبقات

أنواع الحقول

كل قناة ترميز تشير إلى حقل بيانات بنوع محدد:

quantitative ("type": "quantitative") — قيم رقمية مستمرة
nominal ("type": "nominal") — قيم فئوية غير مرتبة
ordinal ("type": "ordinal") — قيم فئوية مرتبة
temporal ("type": "temporal") — قيم التاريخ/الوقت

أمثلة

رسم بياني شريطي بسيط

رسم بياني شريطي عمودي أساسي يُظهر الإيرادات الشهرية لمشروع صغير.

```vega-lite
{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Monthly revenue",
  "width": 400,
  "height": 250,
  "data": {
    "values": [
      {"month": "Jan", "revenue": 28500},
      {"month": "Feb", "revenue": 31200},
      {"month": "Mar", "revenue": 42800},
      {"month": "Apr", "revenue": 38100},
      {"month": "May", "revenue": 45600},
      {"month": "Jun", "revenue": 52300}
    ]
  },
  "mark": "bar",
  "encoding": {
    "x": {"field": "month", "type": "nominal", "sort": null, "axis": {"title": "Month"}},
    "y": {"field": "revenue", "type": "quantitative", "axis": {"title": "Revenue ($)"}},
    "tooltip": [
      {"field": "month", "type": "nominal"},
      {"field": "revenue", "type": "quantitative", "format": "$,.0f"}
    ]
  }
}
```

رسم بياني شريطي مجمّع

مقارنة المبيعات ربع السنوية عبر ثلاثة خطوط إنتاج باستخدام أشرطة مجمّعة مع ترميز الألوان.

```vega-lite
{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Quarterly sales by product line",
  "width": 400,
  "height": 280,
  "data": {
    "values": [
      {"quarter": "Q1", "product": "Electronics", "sales": 120},
      {"quarter": "Q1", "product": "Clothing", "sales": 85},
      {"quarter": "Q1", "product": "Food", "sales": 95},
      {"quarter": "Q2", "product": "Electronics", "sales": 145},
      {"quarter": "Q2", "product": "Clothing", "sales": 92},
      {"quarter": "Q2", "product": "Food", "sales": 110},
      {"quarter": "Q3", "product": "Electronics", "sales": 160},
      {"quarter": "Q3", "product": "Clothing", "sales": 118},
      {"quarter": "Q3", "product": "Food", "sales": 105},
      {"quarter": "Q4", "product": "Electronics", "sales": 190},
      {"quarter": "Q4", "product": "Clothing", "sales": 140},
      {"quarter": "Q4", "product": "Food", "sales": 125}
    ]
  },
  "mark": "bar",
  "encoding": {
    "x": {"field": "product", "type": "nominal", "axis": {"title": null}},
    "y": {"field": "sales", "type": "quantitative", "axis": {"title": "Sales (thousands $)"}},
    "color": {"field": "product", "type": "nominal", "legend": {"title": "Product Line"}},
    "xOffset": {"field": "product", "type": "nominal"},
    "column": {"field": "quarter", "type": "ordinal", "header": {"title": "Quarter"}},
    "tooltip": [
      {"field": "quarter", "type": "ordinal"},
      {"field": "product", "type": "nominal"},
      {"field": "sales", "type": "quantitative"}
    ]
  }
}
```

رسم بياني شريطي مكدّس

مصادر حركة مرور الموقع مكدّسة حسب الشهر لإظهار مساهمات كل قناة والإجمالي.

```vega-lite
{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Monthly website traffic by source",
  "width": 450,
  "height": 280,
  "data": {
    "values": [
      {"month": "Jan", "source": "Organic Search", "visits": 12400},
      {"month": "Jan", "source": "Direct", "visits": 5800},
      {"month": "Jan", "source": "Social Media", "visits": 3200},
      {"month": "Jan", "source": "Referral", "visits": 2100},
      {"month": "Feb", "source": "Organic Search", "visits": 14200},
      {"month": "Feb", "source": "Direct", "visits": 6300},
      {"month": "Feb", "source": "Social Media", "visits": 4500},
      {"month": "Feb", "source": "Referral", "visits": 2400},
      {"month": "Mar", "source": "Organic Search", "visits": 16800},
      {"month": "Mar", "source": "Direct", "visits": 7100},
      {"month": "Mar", "source": "Social Media", "visits": 5800},
      {"month": "Mar", "source": "Referral", "visits": 3100},
      {"month": "Apr", "source": "Organic Search", "visits": 15500},
      {"month": "Apr", "source": "Direct", "visits": 6900},
      {"month": "Apr", "source": "Social Media", "visits": 6200},
      {"month": "Apr", "source": "Referral", "visits": 3500}
    ]
  },
  "mark": "bar",
  "encoding": {
    "x": {"field": "month", "type": "nominal", "sort": null, "axis": {"title": "Month"}},
    "y": {"field": "visits", "type": "quantitative", "axis": {"title": "Page Visits"}},
    "color": {
      "field": "source",
      "type": "nominal",
      "scale": {"scheme": "tableau10"},
      "legend": {"title": "Traffic Source"}
    },
    "tooltip": [
      {"field": "month", "type": "nominal"},
      {"field": "source", "type": "nominal"},
      {"field": "visits", "type": "quantitative", "format": ","}
    ]
  }
}
```

رسم بياني خطي

متوسط درجات الحرارة اليومية على مدى أسبوعين، معروض كسلسلة زمنية خطية سلسة.

```vega-lite
{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Daily average temperature",
  "width": 500,
  "height": 260,
  "data": {
    "values": [
      {"date": "2025-03-01", "temp": 4.2},
      {"date": "2025-03-02", "temp": 5.8},
      {"date": "2025-03-03", "temp": 3.1},
      {"date": "2025-03-04", "temp": 6.5},
      {"date": "2025-03-05", "temp": 8.9},
      {"date": "2025-03-06", "temp": 10.2},
      {"date": "2025-03-07", "temp": 9.7},
      {"date": "2025-03-08", "temp": 7.3},
      {"date": "2025-03-09", "temp": 5.4},
      {"date": "2025-03-10", "temp": 6.8},
      {"date": "2025-03-11", "temp": 11.3},
      {"date": "2025-03-12", "temp": 13.5},
      {"date": "2025-03-13", "temp": 12.1},
      {"date": "2025-03-14", "temp": 10.8}
    ]
  },
  "mark": {"type": "line", "point": true, "interpolate": "monotone"},
  "encoding": {
    "x": {"field": "date", "type": "temporal", "axis": {"title": "Date", "format": "%b %d"}},
    "y": {"field": "temp", "type": "quantitative", "axis": {"title": "Temperature (°C)"}},
    "tooltip": [
      {"field": "date", "type": "temporal", "format": "%B %d, %Y"},
      {"field": "temp", "type": "quantitative", "title": "Avg Temp (°C)"}
    ]
  }
}
```

رسم بياني خطي متعدد السلاسل

مقارنة أسعار الأسهم لثلاث شركات تقنية على مدى ستة أشهر.

```vega-lite
{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Stock price comparison",
  "width": 500,
  "height": 300,
  "data": {
    "values": [
      {"date": "2025-01", "company": "AlphaCorp", "price": 142},
      {"date": "2025-02", "company": "AlphaCorp", "price": 156},
      {"date": "2025-03", "company": "AlphaCorp", "price": 148},
      {"date": "2025-04", "company": "AlphaCorp", "price": 165},
      {"date": "2025-05", "company": "AlphaCorp", "price": 178},
      {"date": "2025-06", "company": "AlphaCorp", "price": 192},
      {"date": "2025-01", "company": "BetaTech", "price": 88},
      {"date": "2025-02", "company": "BetaTech", "price": 95},
      {"date": "2025-03", "company": "BetaTech", "price": 102},
      {"date": "2025-04", "company": "BetaTech", "price": 98},
      {"date": "2025-05", "company": "BetaTech", "price": 115},
      {"date": "2025-06", "company": "BetaTech", "price": 128},
      {"date": "2025-01", "company": "GammaIO", "price": 210},
      {"date": "2025-02", "company": "GammaIO", "price": 198},
      {"date": "2025-03", "company": "GammaIO", "price": 225},
      {"date": "2025-04", "company": "GammaIO", "price": 240},
      {"date": "2025-05", "company": "GammaIO", "price": 232},
      {"date": "2025-06", "company": "GammaIO", "price": 258}
    ]
  },
  "mark": {"type": "line", "point": true},
  "encoding": {
    "x": {"field": "date", "type": "temporal", "axis": {"title": "Month", "format": "%b %Y"}},
    "y": {"field": "price", "type": "quantitative", "axis": {"title": "Stock Price ($)"}},
    "color": {"field": "company", "type": "nominal", "legend": {"title": "Company"}},
    "tooltip": [
      {"field": "company", "type": "nominal"},
      {"field": "date", "type": "temporal", "format": "%b %Y"},
      {"field": "price", "type": "quantitative", "format": "$,.0f"}
    ]
  }
}
```

رسم بياني مساحي

تسجيلات المستخدمين التراكمية عبر الزمن، معروضة كرسم بياني مساحي مملوء مع تدرج لوني.

```vega-lite
{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Cumulative user signups",
  "width": 480,
  "height": 260,
  "data": {
    "values": [
      {"week": "Week 1", "users": 120},
      {"week": "Week 2", "users": 340},
      {"week": "Week 3", "users": 580},
      {"week": "Week 4", "users": 890},
      {"week": "Week 5", "users": 1250},
      {"week": "Week 6", "users": 1780},
      {"week": "Week 7", "users": 2450},
      {"week": "Week 8", "users": 3200},
      {"week": "Week 9", "users": 4100},
      {"week": "Week 10", "users": 5300}
    ]
  },
  "mark": {"type": "area", "line": true, "opacity": 0.6, "color": "#4c78a8"},
  "encoding": {
    "x": {"field": "week", "type": "ordinal", "sort": null, "axis": {"title": "Week"}},
    "y": {"field": "users", "type": "quantitative", "axis": {"title": "Total Users"}},
    "tooltip": [
      {"field": "week", "type": "ordinal"},
      {"field": "users", "type": "quantitative", "format": ",", "title": "Total Users"}
    ]
  }
}
```

رسم بياني نقطي

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

```vega-lite
{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Study hours vs exam score",
  "width": 400,
  "height": 300,
  "data": {
    "values": [
      {"hours": 2, "score": 55},
      {"hours": 3, "score": 62},
      {"hours": 4, "score": 68},
      {"hours": 4, "score": 72},
      {"hours": 5, "score": 74},
      {"hours": 5, "score": 78},
      {"hours": 6, "score": 76},
      {"hours": 6, "score": 82},
      {"hours": 7, "score": 85},
      {"hours": 7, "score": 80},
      {"hours": 8, "score": 88},
      {"hours": 8, "score": 91},
      {"hours": 9, "score": 90},
      {"hours": 10, "score": 95},
      {"hours": 10, "score": 92},
      {"hours": 1, "score": 42},
      {"hours": 3, "score": 58},
      {"hours": 6, "score": 79},
      {"hours": 9, "score": 93},
      {"hours": 11, "score": 97}
    ]
  },
  "mark": {"type": "point", "filled": true, "size": 80},
  "encoding": {
    "x": {"field": "hours", "type": "quantitative", "axis": {"title": "Study Hours per Week"}},
    "y": {"field": "score", "type": "quantitative", "axis": {"title": "Exam Score"}},
    "tooltip": [
      {"field": "hours", "type": "quantitative"},
      {"field": "score", "type": "quantitative"}
    ]
  }
}
```

رسم بياني فقاعي (نقطي مع لون وحجم)

بيانات على مستوى الدول تُظهر الناتج المحلي الإجمالي للفرد مقابل متوسط العمر المتوقع، مع حجم الفقاعة يعكس عدد السكان.

```vega-lite
{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "GDP per capita vs life expectancy by country",
  "width": 500,
  "height": 340,
  "data": {
    "values": [
      {"country": "United States", "gdp": 63540, "lifeExp": 78.9, "pop": 331, "region": "Americas"},
      {"country": "Germany", "gdp": 46208, "lifeExp": 81.3, "pop": 83, "region": "Europe"},
      {"country": "Japan", "gdp": 39286, "lifeExp": 84.6, "pop": 126, "region": "Asia"},
      {"country": "Brazil", "gdp": 8717, "lifeExp": 75.9, "pop": 213, "region": "Americas"},
      {"country": "India", "gdp": 2277, "lifeExp": 70.4, "pop": 1393, "region": "Asia"},
      {"country": "Nigeria", "gdp": 2085, "lifeExp": 54.7, "pop": 211, "region": "Africa"},
      {"country": "France", "gdp": 40494, "lifeExp": 82.7, "pop": 67, "region": "Europe"},
      {"country": "China", "gdp": 12556, "lifeExp": 77.1, "pop": 1412, "region": "Asia"},
      {"country": "Australia", "gdp": 51812, "lifeExp": 83.4, "pop": 26, "region": "Oceania"},
      {"country": "South Africa", "gdp": 6001, "lifeExp": 64.1, "pop": 60, "region": "Africa"},
      {"country": "Canada", "gdp": 43242, "lifeExp": 82.4, "pop": 38, "region": "Americas"},
      {"country": "South Korea", "gdp": 31489, "lifeExp": 83.5, "pop": 52, "region": "Asia"}
    ]
  },
  "mark": {"type": "circle", "opacity": 0.75},
  "encoding": {
    "x": {
      "field": "gdp",
      "type": "quantitative",
      "scale": {"type": "log"},
      "axis": {"title": "GDP per Capita ($, log scale)"}
    },
    "y": {
      "field": "lifeExp",
      "type": "quantitative",
      "scale": {"domain": [50, 90]},
      "axis": {"title": "Life Expectancy (years)"}
    },
    "size": {
      "field": "pop",
      "type": "quantitative",
      "scale": {"range": [50, 1200]},
      "legend": {"title": "Population (M)"}
    },
    "color": {
      "field": "region",
      "type": "nominal",
      "legend": {"title": "Region"}
    },
    "tooltip": [
      {"field": "country", "type": "nominal", "title": "Country"},
      {"field": "gdp", "type": "quantitative", "format": "$,", "title": "GDP/Capita"},
      {"field": "lifeExp", "type": "quantitative", "title": "Life Expectancy"},
      {"field": "pop", "type": "quantitative", "title": "Population (M)"}
    ]
  }
}
```

رسم بياني دائري (علامة القوس)

توزيع حصص السوق لمزوّدي البنية التحتية السحابية باستخدام علامات القوس مع ترميز الزاوية.

```vega-lite
{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Cloud infrastructure market share",
  "width": 300,
  "height": 300,
  "data": {
    "values": [
      {"provider": "AWS", "share": 31},
      {"provider": "Azure", "share": 25},
      {"provider": "Google Cloud", "share": 11},
      {"provider": "Alibaba Cloud", "share": 5},
      {"provider": "IBM Cloud", "share": 3},
      {"provider": "Others", "share": 25}
    ]
  },
  "mark": {"type": "arc", "innerRadius": 50},
  "encoding": {
    "theta": {"field": "share", "type": "quantitative", "stack": true},
    "color": {
      "field": "provider",
      "type": "nominal",
      "scale": {"scheme": "category10"},
      "legend": {"title": "Provider"}
    },
    "tooltip": [
      {"field": "provider", "type": "nominal"},
      {"field": "share", "type": "quantitative", "title": "Market Share (%)"}
    ]
  }
}
```

مدرج تكراري

توزيع أوقات الاستجابة من مجموعة بيانات مراقبة أداء API، مقسّمة إلى فترات.

```vega-lite
{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "API response time distribution",
  "width": 450,
  "height": 260,
  "data": {
    "values": [
      {"ms": 45}, {"ms": 52}, {"ms": 61}, {"ms": 48}, {"ms": 55},
      {"ms": 72}, {"ms": 68}, {"ms": 83}, {"ms": 91}, {"ms": 57},
      {"ms": 63}, {"ms": 78}, {"ms": 110}, {"ms": 95}, {"ms": 42},
      {"ms": 88}, {"ms": 76}, {"ms": 54}, {"ms": 67}, {"ms": 105},
      {"ms": 120}, {"ms": 59}, {"ms": 73}, {"ms": 81}, {"ms": 49},
      {"ms": 66}, {"ms": 98}, {"ms": 53}, {"ms": 71}, {"ms": 86},
      {"ms": 44}, {"ms": 62}, {"ms": 77}, {"ms": 94}, {"ms": 58},
      {"ms": 69}, {"ms": 85}, {"ms": 102}, {"ms": 47}, {"ms": 74}
    ]
  },
  "mark": "bar",
  "encoding": {
    "x": {
      "field": "ms",
      "type": "quantitative",
      "bin": {"maxbins": 12},
      "axis": {"title": "Response Time (ms)"}
    },
    "y": {
      "aggregate": "count",
      "type": "quantitative",
      "axis": {"title": "Frequency"}
    },
    "tooltip": [
      {"field": "ms", "bin": true, "type": "quantitative", "title": "Response Time (ms)"},
      {"aggregate": "count", "type": "quantitative", "title": "Count"}
    ]
  }
}
```

خريطة حرارية

خريطة حرارية أسبوعية للنشاط تُظهر عدد الالتزامات حسب يوم الأسبوع والساعة، باستخدام علامات المستطيل مع شدة اللون.

```vega-lite
{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Git commit activity heatmap",
  "width": 500,
  "height": 200,
  "data": {
    "values": [
      {"day": "Mon", "hour": "9am", "commits": 5},
      {"day": "Mon", "hour": "12pm", "commits": 3},
      {"day": "Mon", "hour": "3pm", "commits": 8},
      {"day": "Mon", "hour": "6pm", "commits": 2},
      {"day": "Tue", "hour": "9am", "commits": 7},
      {"day": "Tue", "hour": "12pm", "commits": 4},
      {"day": "Tue", "hour": "3pm", "commits": 12},
      {"day": "Tue", "hour": "6pm", "commits": 6},
      {"day": "Wed", "hour": "9am", "commits": 9},
      {"day": "Wed", "hour": "12pm", "commits": 2},
      {"day": "Wed", "hour": "3pm", "commits": 15},
      {"day": "Wed", "hour": "6pm", "commits": 8},
      {"day": "Thu", "hour": "9am", "commits": 6},
      {"day": "Thu", "hour": "12pm", "commits": 5},
      {"day": "Thu", "hour": "3pm", "commits": 10},
      {"day": "Thu", "hour": "6pm", "commits": 4},
      {"day": "Fri", "hour": "9am", "commits": 8},
      {"day": "Fri", "hour": "12pm", "commits": 6},
      {"day": "Fri", "hour": "3pm", "commits": 7},
      {"day": "Fri", "hour": "6pm", "commits": 1}
    ]
  },
  "mark": "rect",
  "encoding": {
    "x": {
      "field": "hour",
      "type": "ordinal",
      "sort": ["9am", "12pm", "3pm", "6pm"],
      "axis": {"title": "Time of Day"}
    },
    "y": {
      "field": "day",
      "type": "ordinal",
      "sort": ["Mon", "Tue", "Wed", "Thu", "Fri"],
      "axis": {"title": "Day of Week"}
    },
    "color": {
      "field": "commits",
      "type": "quantitative",
      "scale": {"scheme": "greens"},
      "legend": {"title": "Commits"}
    },
    "tooltip": [
      {"field": "day", "type": "ordinal"},
      {"field": "hour", "type": "ordinal"},
      {"field": "commits", "type": "quantitative"}
    ]
  }
}
```

رسم بياني صندوقي

توزيع رواتب الموظفين عبر الأقسام، يُظهر الوسيط والأرباع والقيم الشاذة.

```vega-lite
{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Salary distribution by department",
  "width": 450,
  "height": 300,
  "data": {
    "values": [
      {"dept": "Engineering", "salary": 95}, {"dept": "Engineering", "salary": 110},
      {"dept": "Engineering", "salary": 125}, {"dept": "Engineering", "salary": 130},
      {"dept": "Engineering", "salary": 140}, {"dept": "Engineering", "salary": 105},
      {"dept": "Engineering", "salary": 155}, {"dept": "Engineering", "salary": 98},
      {"dept": "Marketing", "salary": 65}, {"dept": "Marketing", "salary": 72},
      {"dept": "Marketing", "salary": 78}, {"dept": "Marketing", "salary": 85},
      {"dept": "Marketing", "salary": 90}, {"dept": "Marketing", "salary": 68},
      {"dept": "Marketing", "salary": 95}, {"dept": "Marketing", "salary": 60},
      {"dept": "Sales", "salary": 55}, {"dept": "Sales", "salary": 62},
      {"dept": "Sales", "salary": 70}, {"dept": "Sales", "salary": 75},
      {"dept": "Sales", "salary": 88}, {"dept": "Sales", "salary": 58},
      {"dept": "Sales", "salary": 120}, {"dept": "Sales", "salary": 65},
      {"dept": "Design", "salary": 80}, {"dept": "Design", "salary": 85},
      {"dept": "Design", "salary": 92}, {"dept": "Design", "salary": 98},
      {"dept": "Design", "salary": 105}, {"dept": "Design", "salary": 88},
      {"dept": "Design", "salary": 78}, {"dept": "Design", "salary": 110}
    ]
  },
  "mark": {"type": "boxplot", "extent": 1.5},
  "encoding": {
    "x": {"field": "dept", "type": "nominal", "axis": {"title": "Department"}},
    "y": {"field": "salary", "type": "quantitative", "axis": {"title": "Salary (thousands $)"}},
    "color": {"field": "dept", "type": "nominal", "legend": null}
  }
}
```

رسم بياني متعدد الطبقات (خط + نقطة)

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

```vega-lite
{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Monthly active users with trend",
  "width": 480,
  "height": 280,
  "data": {
    "values": [
      {"month": "2025-01", "mau": 12400},
      {"month": "2025-02", "mau": 14800},
      {"month": "2025-03", "mau": 13900},
      {"month": "2025-04", "mau": 16500},
      {"month": "2025-05", "mau": 19200},
      {"month": "2025-06", "mau": 21800},
      {"month": "2025-07", "mau": 20500},
      {"month": "2025-08", "mau": 24100},
      {"month": "2025-09", "mau": 27600},
      {"month": "2025-10", "mau": 31200},
      {"month": "2025-11", "mau": 29800},
      {"month": "2025-12", "mau": 34500}
    ]
  },
  "layer": [
    {
      "mark": {"type": "line", "color": "#4c78a8", "strokeWidth": 2}
    },
    {
      "mark": {"type": "point", "color": "#4c78a8", "filled": true, "size": 60}
    }
  ],
  "encoding": {
    "x": {"field": "month", "type": "temporal", "axis": {"title": "Month", "format": "%b"}},
    "y": {"field": "mau", "type": "quantitative", "axis": {"title": "Monthly Active Users"}},
    "tooltip": [
      {"field": "month", "type": "temporal", "format": "%B %Y"},
      {"field": "mau", "type": "quantitative", "format": ",", "title": "MAU"}
    ]
  }
}
```

تحديد تفاعلي

رسم بياني نقطي تفاعلي حيث يؤدي النقر على نقطة في وسيلة الإيضاح إلى تمييز تلك الفئة. يستخدم params في Vega-Lite للتحديد النقطي.

```vega-lite
{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Interactive car data explorer",
  "width": 480,
  "height": 320,
  "data": {
    "values": [
      {"name": "Civic", "mpg": 32, "hp": 158, "origin": "Japan"},
      {"name": "Corolla", "mpg": 35, "hp": 139, "origin": "Japan"},
      {"name": "Camry", "mpg": 29, "hp": 203, "origin": "Japan"},
      {"name": "Focus", "mpg": 30, "hp": 160, "origin": "USA"},
      {"name": "Mustang", "mpg": 21, "hp": 310, "origin": "USA"},
      {"name": "F-150", "mpg": 20, "hp": 290, "origin": "USA"},
      {"name": "Golf", "mpg": 31, "hp": 147, "origin": "Europe"},
      {"name": "3 Series", "mpg": 26, "hp": 255, "origin": "Europe"},
      {"name": "A4", "mpg": 27, "hp": 248, "origin": "Europe"},
      {"name": "Model 3", "mpg": 133, "hp": 283, "origin": "USA"},
      {"name": "Leaf", "mpg": 111, "hp": 147, "origin": "Japan"},
      {"name": "ID.4", "mpg": 97, "hp": 201, "origin": "Europe"}
    ]
  },
  "params": [
    {
      "name": "origin_select",
      "select": {"type": "point", "fields": ["origin"]},
      "bind": "legend"
    }
  ],
  "mark": {"type": "circle", "size": 120},
  "encoding": {
    "x": {"field": "hp", "type": "quantitative", "axis": {"title": "Horsepower"}},
    "y": {"field": "mpg", "type": "quantitative", "axis": {"title": "MPG (or MPGe)"}},
    "color": {"field": "origin", "type": "nominal", "legend": {"title": "Origin"}},
    "opacity": {
      "condition": {"param": "origin_select", "value": 1},
      "value": 0.15
    },
    "tooltip": [
      {"field": "name", "type": "nominal", "title": "Model"},
      {"field": "hp", "type": "quantitative", "title": "Horsepower"},
      {"field": "mpg", "type": "quantitative", "title": "MPG"},
      {"field": "origin", "type": "nominal"}
    ]
  }
}
```

رسم بياني شريطي أفقي

أكثر لغات البرمجة شعبية بين المطورين، مرتبة تنازلياً بأشرطة أفقية لسهولة قراءة التسميات.

```vega-lite
{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Top programming languages by popularity",
  "width": 400,
  "height": 300,
  "data": {
    "values": [
      {"language": "JavaScript", "percentage": 63.6},
      {"language": "Python", "percentage": 49.3},
      {"language": "TypeScript", "percentage": 38.5},
      {"language": "Java", "percentage": 35.4},
      {"language": "C#", "percentage": 29.7},
      {"language": "C++", "percentage": 22.4},
      {"language": "Go", "percentage": 14.3},
      {"language": "Rust", "percentage": 13.1},
      {"language": "Kotlin", "percentage": 9.5},
      {"language": "Swift", "percentage": 6.3}
    ]
  },
  "mark": "bar",
  "encoding": {
    "y": {
      "field": "language",
      "type": "nominal",
      "sort": "-x",
      "axis": {"title": null}
    },
    "x": {
      "field": "percentage",
      "type": "quantitative",
      "axis": {"title": "Developer Usage (%)"}
    },
    "color": {
      "field": "percentage",
      "type": "quantitative",
      "scale": {"scheme": "blues"},
      "legend": null
    },
    "tooltip": [
      {"field": "language", "type": "nominal"},
      {"field": "percentage", "type": "quantitative", "format": ".1f", "title": "Usage (%)"}
    ]
  }
}
```

رسم بياني شريطي (علامات Tick)

توزيع أوقات التسليم عبر طرق الشحن المختلفة، معروض كعلامات فردية لكشف الانتشار وكثافة القيم.

```vega-lite
{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "description": "Delivery time distribution by shipping method",
  "width": 450,
  "height": 200,
  "data": {
    "values": [
      {"method": "Standard", "days": 5}, {"method": "Standard", "days": 7},
      {"method": "Standard", "days": 6}, {"method": "Standard", "days": 8},
      {"method": "Standard", "days": 5}, {"method": "Standard", "days": 9},
      {"method": "Standard", "days": 7}, {"method": "Standard", "days": 6},
      {"method": "Standard", "days": 10}, {"method": "Standard", "days": 7},
      {"method": "Express", "days": 2}, {"method": "Express", "days": 3},
      {"method": "Express", "days": 2}, {"method": "Express", "days": 3},
      {"method": "Express", "days": 4}, {"method": "Express", "days": 2},
      {"method": "Express", "days": 3}, {"method": "Express", "days": 2},
      {"method": "Express", "days": 3}, {"method": "Express", "days": 4},
      {"method": "Overnight", "days": 1}, {"method": "Overnight", "days": 1},
      {"method": "Overnight", "days": 1}, {"method": "Overnight", "days": 2},
      {"method": "Overnight", "days": 1}, {"method": "Overnight", "days": 1},
      {"method": "Overnight", "days": 2}, {"method": "Overnight", "days": 1},
      {"method": "Overnight", "days": 1}, {"method": "Overnight", "days": 1}
    ]
  },
  "mark": {"type": "tick", "thickness": 2},
  "encoding": {
    "x": {"field": "days", "type": "quantitative", "axis": {"title": "Delivery Time (days)"}},
    "y": {"field": "method", "type": "nominal", "axis": {"title": "Shipping Method"}},
    "color": {"field": "method", "type": "nominal", "legend": null},
    "tooltip": [
      {"field": "method", "type": "nominal"},
      {"field": "days", "type": "quantitative", "title": "Days"}
    ]
  }
}
```

نصائح

الأبعاد: استخدم width و height للتحكم في أبعاد الرسم البياني. حذفها يجعل Vega-Lite تحدد الحجم تلقائياً بناءً على الحاوية.
مخططات الألوان: استخدم "scale": {"scheme": "category10"} أو مخططات مسماة أخرى (tableau10، dark2، viridis، blues، greens) للوحات ألوان تلقائية.
تلميحات الأدوات: أضف ترميز tooltip لجعل الرسوم البيانية تفاعلية عند التمرير. استخدم مصفوفة من تعريفات الحقول لإظهار قيم متعددة.
الترتيب: استخدم "sort": "-x" أو "sort": "-y" لترتيب الأشرطة حسب القيمة. استخدم "sort": null للحفاظ على ترتيب البيانات.
التجميع: يدعم Vega-Lite تجميعات مدمجة مثل count، sum، mean، median، min، max مباشرة في تعريفات الترميز.
التركيب: استخدم layer لتراكب العلامات، hconcat/vconcat للرسوم البيانية جنباً إلى جنب، و facet للمضاعفات الصغيرة.
التفاعلية: استخدم params مع "select" للتصفية التفاعلية والتمييز. اربط التحديدات بوسائل الإيضاح أو المحاور لسلوك النقر للتصفية.