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

ادامه مطلب

در این مقاله، قصد داریم نحوه رسم نقشه ایران با استفاده از کتابخانه D3.js را در داده نگار به شما آموزش دهیم. کتابخانه D3 به ما امکان می‌دهد تا با استفاده از داده‌های GeoJSON، نقشه‌های تعاملی ایجاد کنیم. در این مثال، از داده‌های GeoJSON برای نمایش نقشه استان‌های ایران استفاده خواهیم کرد.   کد:   var width = 800; var height = 800;   var svg = d3.create("svg") .attr('width', width) …

ادامه مطلب

در این مقاله قصد داریم یک نمودار دایره‌ای (Pie Chart) با استفاده از کتابخانه D3 رسم کنیم که درصد جمعیت استان‌های مختلف ایران را نمایش می‌دهد.   کد نمودار دایره‌ای (Pie Chart):   var width = 600; var height = 400; var svg = d3.create('svg') .attr('width', width) .attr('height', height);   var g = svg.append('g') // افزودن تگ g .attr('transform', 'translate(300, 190)');   var iranPopulation = [ {province: 'تهران', population: 13267637}, …

ادامه مطلب

      در این مقاله قصد داریم نحوه ایجاد نمودار میله‌ای گروه‌بندی شده را در کتابخانه D3 آموزش دهیم، پس با ما همراه باشید.   در ابتدا باید اشاره کنیم که برای رسم این نمودار از مجموعه داده زیر استفاده کرده‌ایم:   var colorsData = [ {year: 1396, red: 154080, blue: 132751}, {year: 1397, red: 370450, blue: 238893}, {year: 1398, red: 637979, blue: 419548}, {year: 1399, red: 642944, blue: 394671}, …

ادامه مطلب

   در این مقاله قصد داریم نحوه ایجاد نمودار میله‌ای را در کتابخانه D3 آموزش دهیم، پس با ما همراه باشید. ما برای رسم نمودار میله‌ای در این مقاله از داده‌های جمعیتی ویکی‌پدیا استفاده کرده‌ایم، که فایلی شاملی آرایه‌ای از objectها که حاوی مقادیر province و population است.   کد ایجاد نمودار میله‌ای در کتابخانه D3:   var width = 1000; var height = 700; var svg = d3.create('svg') .attr('width', width) …

ادامه مطلب

در این مقاله قصد داریم نحوه ایجاد نمودار چند خطی را در کتابخانه D3 آموزش دهیم، پس با ما همراه باشید. ما برای رسم نمودار چند خطی در این مقاله از فایلی شاملی آرایه‌ای از objectها که حاوی مقادیر month, year و count است استفاده کرده‌ایم.   کد ایجاد نمودار چند خطی در کتابخانه D3:   var margin = {top: 10, right: 30, bottom: 30, left: 60}; var width = 700 …

ادامه مطلب

در این مقاله نحوه ایجاد نمودار خطی در کتابخانه 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 ایجاد کرده و پس از آن شروع به مصورسازی …

ادامه مطلب