در این مقاله نحوه ایجاد نمودار خطی در کتابخانه D3 را آموزش خواهیم داد.   در این نمونه، ابتدا یک svg ایجاد کرده و داخل آن یک گروه (g) را با استفاده از append ایجاد کرده‌ایم. سپس داده‌هایی که برای نمودار لازم داریم را تعریف می‌کنیم. با استفاده از توابع مقیاس‌بندی (scale)، محدوده‌های مقیاس‌های محورهای x و y را تعیین می‌کنیم. سپس محورهای x و y را با استفاده از  …

ادامه مطلب

در این مقاله قصد داریم نحوه ایجاد محورهای عمودی و افقی در کتابخانه D3 را آموزش دهیم.   برای ایجاد محورهای افقی و عمودی در کتابخانه D3  باید از توابع axisBottom و axisLeft استفاده کنیم. که کد کامل آن به شکل زیر است:   خروجی کد:     ابتدا متغییرهای حاشیه، عرض و ارتفاع را مقداردهی می‌کنیم. var margin = {top: 30, right: 40} -> مقداردهی به متغییرهای حاشیه بالا …

ادامه مطلب

  در بخش نخست ایجاد اشکال هندسی در کتابخانه D3، ایجاد خط، دایره و مستطیل را آموزش دادیم. در این بخش به آموزش ایجاد بیضی، چندضلعی و قوس (arc) خواهیم پرداخت.   ایجاد بیضی در کتابخانه D3   برای ایجاد بیضی در کتابخانه D3 ابتدا یک تگ svg ایجاد کرده و با استفاده از شکل (shape) بیضی و دادن ویژگی‌های مورد نیاز آن را ایجاد کنیم. که کد آن به …

ادامه مطلب

  در این مقاله قصد داریم نحوه ایجاد اشکال هندسی را در کتابخانه D3 آموزش دهیم. در این بخش نخست ایجاد خط، دایره و مستطیل را آموزش خواهیم داد.   در ابتدا باید خاطر نشان کنیم که کتابخانه D3 برای مصورسازی از تگ svg استفاده می‌کند، برای همین برای هر نوع مصورسازی با این کتابخانه در ابتدا باید یک تگ svg ایجاد کرده و پس از آن شروع به مصورسازی …

ادامه مطلب

در ادامه سری آموزش های کتابخانه observablehq plot ، در این مقاله با آموزش یکی از بخش‌های پیشرفته این کتابخانه برای رسم نمودارها در خدمت شما هستیم. در این نوشته، سعی شده تا 2 مفهوم دسته‌بندی یا پارتیشن بندی داده (faceting) و گروه‌بندی و اعمال توابع گروهی روی داده (grouping) توضیح داده شود. برای درک بهتر موارد، از مثال‌های مختلفی استفاده شده است که توضیحات هر نمودار را در همان بخش می‌بینیم. …

ادامه مطلب

در مقالات قبلی از آموزش کار با کتابخانه observablehq plot، در مورد رسم نمودار خطی توضیح دادیم. در این نوشته، قصد داریم تا یک نمودار میله‌ای رسم کنیم.   در ابتدا داده مورد نظر خود را تعریف می‌کنیم. در این مورد، از روش آپلود فایل داده استفاده شده که آموزش آن در این قسمت موجود است.   برای رسم نمودار میله‌ای از تابع Plot.barY استفاده می‌شود. کد رسم نمودار را …

ادامه مطلب

در مقاله قبلی از آموزش کار با کتابخانه observable plot، در مورد رسم نمودار خطی توضیح دادیم. در این نوشته قصد داریم تا نمودار چند خطی (چند سری) را در یک صفحه نمودار رسم کنیم.   قبل از شروع به کار، نیاز به تعریف داده داریم که هم به صورت تعریف متغیر داخل کد و هم به صورت بارگذاری فایل داده، امکان پذیر است (آموزش را می‌توانید در این قسمت …

ادامه مطلب

نمودار خطی یکی از انواع اصلی و پرکاربرد نمودار می‌باشد که در ادامه، نحوه رسم آن را با استفاده از کتابخانه observable plot با هم می‌بینیم.   در ابتدا داده نمونه خود را تعریف می‌کنیم. این کار هم در ادیتور قابل انجام است و هم با آپلود فایل داده که نحوه آپلود فایل را در اینجا می‌توانید مطالعه کنید.     سپس شروع به نوشتن کد plot مربوط به نمودار …

ادامه مطلب

در این مقاله قصد داریم تا با ساختار اصلی و پایه رسم نمودار کتابخانه observable plot آشنا شویم. در آموزش‌های بعدی، وارد جزئیات بیشتر و انواع نمودار می‌شویم.   همان طور که در عکس زیر قابل مشاهده است، تابع plot مسئول اصلی رسم نمودار می‌باشد. این تابع، objectای را دریافت می‌کند که ساختار نمودار را معلوم می‌کند.     این شی شامل انواع تنظیمات مربوط به نمودار می‌باشد. به طور …

ادامه مطلب

در این مقاله، نحوه استفاده از داده و وارد کردن داده‌ها با کمک فایل را با هم می‌بینیم.   بلاک کد مورد استفاده ما، بر مبنای javascript  می‌باشد. بنابراین می‌توانید با این زبان در آن کد بزنید و داده‌ها را دستکاری کنید. بر همین اساس، نحوه تعریف متغیر داده‌ای با کمک عبارات let,const,var به این صورت است:     همچنین امکان استفاده از فایل‌های json و csv وجود دارد. برای …

ادامه مطلب