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

ادامه مطلب

در این مقاله، به شما آموزش می‌دهیم که چگونه با استفاده از کتابخانه Observable Plot و داده‌های GeoJSON، یک نقشه حبابی ایران رسم کنید که در آن حباب‌های هر استان براساس جمعیت آن استان نمایش داده شوند. این نوع نمودار می‌تواند ابزاری مفید برای نمایش اطلاعات جمعیتی به‌صورت بصری و مؤثر باشد.   مقدمه   نقشه حبابی (Bubble Map) نوعی نمودار جغرافیایی است که در آن از دایره‌هایی با اندازه‌های …

ادامه مطلب

در این مقاله به بررسی و توضیح خط به خط کدی می‌پردازیم که با استفاده از کتابخانه Observable Plot یک نمودار scatterplot رسم می‌کند. این کتابخانه به شما اجازه می‌دهد به سادگی و به صورت بسیار مختصر نمودارهای گرافیکی رسم کنید.   کد کامل:   plotly.plot({ marks: [ plotly.dot(education, {x: "age", y: "men", fill: "steelblue", r: 5, title: d => `Men: ${d.men}`}), plotly.dot(education, {x: "age", y: "women", fill: "orange", r: …

ادامه مطلب

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

ادامه مطلب

در این مقاله به شما نشان خواهیم داد که چگونه با استفاده از کتابخانه 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 - …

ادامه مطلب