در این مقاله به شما نشان خواهیم داد که چگونه با استفاده از کتابخانه D3.js یک نمودار scatter plot ایجاد کنید. نمودارهای پراکندگی (scatter plot) ابزاری قدرتمند برای نمایش رابطه بین دو متغیر هستند. با استفاده از D3.js، می‌توان به سادگی داده‌ها را به عناصر گرافیکی متصل کرد و آن‌ها را به صورت پویا و تعاملی نمایش داد.   کد کامل نمودار:   var margin = {top: 10, right: 30, …

ادامه مطلب

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

ادامه مطلب

در این مقاله، نحوه ساخت نمودار Area با استفاده از کتابخانه D3.js برای نمایش داده‌های تورم به‌صورت بصری توضیح داده شده است. با ما همراه باشید تا مراحل مختلف این فرآیند را بررسی کنیم.   داده‌های این مقاله از وبگاه بانک مرکزی جمع‌آوری شده است. فرمت داده‌ها به صورت زیر می‌باشد:   { "date":"1401-12" "inflation":46.5 }, { "date":"1401-11" "inflation":43.6 }   کد کامل نمودار:   Inflation.forEach(d => d.date = new …

ادامه مطلب

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

ادامه مطلب

در مقاله ایجاد نمودار میله‌ای با استفاده از کتابخانه D3 نحوه ایجاد نمودار ساده میله‌ای را شرح دادیم، در این مقاله قصد داریم تا به این نمودار animation اضافه کنیم.   کد:   var width = 1000; var height = 700; var svg = d3.create('svg') .attr('width', width) .attr('height', height);   var g = svg.append('g') .attr('transform', 'translate(70, 20)');   var xscale = d3.scaleBand() .domain(iranPopulation.map(d => d.province)) .range([0, 900]) .padding(0.2);   g.append('g') …

ادامه مطلب

در این مقاله، قصد داریم نحوه ایجاد یک نمودار میله‌ای افقی را با استفاده از کتابخانه D3.js نشان دهیم. این نمودار، جمعیت استان‌های ایران را نمایش می‌دهد. مراحل زیر، کد کامل و توضیحات مربوط به هر قسمت را شامل می‌شود. پایه کدها بر گرفته از این آموزش می‌باشد.   کد کامل:   var margin = {top: 20, right: 30, bottom: 40, left: 90}; var width = 700 - margin.left - …

ادامه مطلب

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

ادامه مطلب

در این مقاله، قصد داریم با استفاده از کتابخانه 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);   …

ادامه مطلب