در این مقاله، قصد داریم با استفاده از کتابخانه D3.js یک نقشه حبابی (Bubble Map) براساس جمعیت استان‌های ایران ایجاد کنیم. این نقشه حبابی به ما امکان می‌دهد که توزیع جمعیت در استان‌های مختلف ایران را به صورت بصری و جذاب مشاهده کنیم.   کد:   var width = 800; var height = 800;   var svg = d3.create("svg") .attr('width', width) .attr('height', height)   var projection = d3.geoMercator() .center([54, 32]) …

ادامه مطلب

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

ادامه مطلب

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

ادامه مطلب

در مقاله قبلی، نحوه ایجاد نقشه ایران با استفاده از 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) …

ادامه مطلب

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

ادامه مطلب

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

ادامه مطلب