داده نگار

ایجاد نمودار میله‌ای با استفاده از کتابخانه D3

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

ما برای رسم نمودار میله‌ای در این مقاله از داده‌های جمعیتی ویکی‌پدیا استفاده کرده‌ایم، که فایلی شاملی آرایه‌ای از objectها که حاوی مقادیر province و population است.

کد ایجاد نمودار میله‌ای در کتابخانه D3:

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')
.attr('transform', `translate(20, ${height - 100})`)
.call(d3.axisBottom(xscale))
.selectAll('text')
.attr('transform', 'translate(-10,0)rotate(-45)')
.style('text-anchor', 'end');
var yscale = d3.scaleLinear()
.domain([0, d3.max(iranPopulation, d => d.population)])
.range([height - 100, 0]);
g.append('g')
.attr('transform', `translate(20, 0)`)
.call(d3.axisLeft(yscale));
var bars = g.selectAll('rect')
.data(iranPopulation)
.enter()
.append('g')
.attr('transform', `translate(20, 0)`);
bars.append('rect')
.attr('x', d => xscale(d.province))
.attr('y', d => yscale(d.population))
.attr('width', xscale.bandwidth())
.attr('height', d => height - 100 - yscale(d.population))
.attr('fill', "steelblue")
.append("title")
.text(d => d3.format(',')(d.population));
g.append('text')
.attr('x', width / 2)
.attr('text-anchor', 'middle')
.style('font-size', '16px')
.style('font-weight', 'bold')
.text('جمعیت به تفکیک استان');
g.append('text')
.attr('x', width / 2)
.attr('y', height - 30)
.attr('text-anchor', 'middle')
.style('font-size', '16px')
.style('font-weight', 'bold')
.text('استان');
 
g.append('text')
.attr('transform', 'rotate(-90)')
.attr('x', 0 - height / 2)
.attr('y', -50)
.attr('text-anchor', 'middle')
.style('font-size', '16px')
.style('font-weight', 'bold')
.text('جمعیت');
svg.node()

خروجی کد:

تنظیمات اولیه برای رسم نمودار میله‌ای در کتابخانه D3

در ابتدا SVG را ایجاد می‌کنیم و یک گروه داخلی (g) برای اضافه کردن محتوا به SVG تعریف می‌کنیم. این تنظیمات شامل مرزها و فضای پرشده می‌باشد.

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 width = 1000 مشخص کردن عرض svg
var height = 700 مشخص کردن ارتفاع svg
var svg = d3.create('svg') ایجاد تگ SVG
attr('width', width) مقداردهی به عرض SVG
attr('height', height) مقداردهی به ارتفاع SVG
var g = svg.append('g') -> ایجاد تگ g برای گروه‌بندی عناصری که به SVG اضافه خواهند شد
attr('transform', 'translate(70, 20)') جابجا کردن تگ g
var iranPopulation مقداردهی به متغیر با استفاده از داده‌ها

مقیاس‌بندی محورهای نمودار میله‌ای در کتابخانه D3

در مرحله بعد، مقیاس‌بندی برای محورهای x و y انجام می‌دهیم. این مقیاس‌ها به ترتیب برای تاریخ (ماه) و تعداد استفاده می‌شوند.

var xscale = d3.scaleBand()
.domain(iranPopulation.map(d => d.province))
.range([0, 900])
.padding(0.2);
 
var yscale = d3.scaleLinear()
.domain([0, d3.max(iranPopulation, d => d.population)])
.range([height - 100, 0]);

var xscale = d3.scaleBand() مشخص کردن محدوده مقیاس محور افقی با استفاده از تابع scaleBand
domain(iranPopulation.map(d => d.province)) مشخص کردن دامنه مقیاس محور افقی با استفاده از شروع و پایان داده‌ها
range([0, 900]) محدوده‌ای که lمحور افقی در svg اشغال می‌کند.
padding(0.2) فاصله بین میله‌ها (فاصله بین مقادیر)
var yscale = d3.scaleLinear() مشخص کردن مقیاس محور عمودی با استفاده از تابع scaleLinear
domain([0, d3.max(iranPopulation, d => d.population)]) مشخص کردن دامنه مقیاس محور عمودی با استفاده از شروع و پایان داده‌ها
range([height - 100, 0]) محدوده‌ای که محور عمودی در svg اشغال می‌کند

ایجاد محورهای نمودار میله‌ای در کتابخانه D3

پس از مقیاس‌بندی، محورهای x و y را با استفاده از توابع d3.axisBottom() و d3.axisLeft() ایجاد می‌کنیم و به مختصات SVG اضافه می‌کنیم.

g.append('g')
.attr('transform', `translate(20, ${height - 100})`)
.call(d3.axisBottom(xscale))
.selectAll('text')
.attr('transform', 'translate(-10,0)rotate(-45)')
.style('text-anchor', 'end');
 
g.append('g')
.attr('transform', `translate(20, 0)`)
.call(d3.axisLeft(yscale));

g.append('g') -> افزودن گروه g برای رسم محور افقی در svg
attr('transform', `translate(20, ${height - 100})`) جابجایی گروه g
call(d3.axisBottom(xscale)) برای ایجاد محور افقی
selectAll('text') انتخاب تمام متن‌های موجود در محور افقی برای چرخش آن‌ها
attr('transform', 'translate(-10,0)rotate(-45)') چرخش ۴۵ درجه‌ای خلاف عقربه‌های ساعت متن‌های محور افقی
style('text-anchor', 'end') قرارگیری متن در انتها
g.append('g') -> افزودن گروه g برای رسم محور عمودی در svg
attr('transform', `translate(20, 0)`) -> جابجایی گروه g
call(d3.axisLeft(yscale)) استفاده از axisLeft برای ایجاد محور عمودی و مقداردهی با آن با استفاده از مقیاس‌هایی که قبلا تعریف کرده‌ایم

رسم میله‌های نمودار میله‌ای در کتابخانه D3

در این بخش میله‌ها را برای هر دسته از داده‌ها ایجاد می‌کنیم.

var bars = g.selectAll('rect')
.data(iranPopulation)
.enter()
.append('g')
.attr('transform', `translate(20, 0)`);
bars.append('rect')
.attr('x', d => xscale(d.province))
.attr('y', d => yscale(d.population))
.attr('width', xscale.bandwidth())
.attr('height', d => height - 100 - yscale(d.population))
.attr('fill', "steelblue")

var bars = g.selectAll('rect') انتخاب تمام المان‌های با کلاس rect
data(iranPopulation) متصل کردن داده‌ها به المان‌های انتخاب شده
enter() برگرداندن داده‌ها به المان‌ها
append('g') اضافه کردن تگ g
attr('transform', `translate(20, 0)`) جابجا کردن تگ‌ها در محود افقی به اندازه ۲۰ پیکسل
bars.append('rect') اضافه کردن تگ rect
attr('x', d => xscale(d.province)) شروع رسم میله‌ها در محور افقی
attr('y', d => yscale(d.population)) شروع رسم میله‌ها در محور عمودی
attr('width', xscale.bandwidth()) مشخص کردن عرض میله‌ها
attr('height', d => height - 100 - yscale(d.population)) مشخص کردن ارتفاع میله‌ها
attr('fill', "steelblue") مشخص کردن رنگ میله‌ها

ایجاد عنوان نمودار میله‌ای در کتابخانه D3

در این بخش عنوان نمودار را اضافه می‌کنیم.

g.append('text')
.attr('x', width / 2)
.attr('text-anchor', 'middle')
.style('font-size', '16px')
.style('font-weight', 'bold')
.text('جمعیت به تفکیک استان');

g.append('text') اضافه کردن تگ text
.attr('x', width / 2) مشخص کردن محل نمایش متن در محور افقی
attr('text-anchor', 'middle') قرارگیری متن در وسط
style('font-size', '16px') مشخص کردن اندازه قلم
style('font-weight', 'bold') پررنگ کردن قلم
text('جمعیت به تفکیک استان') متن نمایش داده شده در عنوان

ایجاد برچسب‌های محور افقی و عمودی نمودار میله‌ای در کتابخانه D3

و در انتها برچسب محورهای عمودی و افقی را اضافه می‌کنیم.

g.append('text')
.attr('x', width / 2)
.attr('y', height - 30)
.attr('text-anchor', 'middle')
.style('font-size', '16px')
.style('font-weight', 'bold')
.text('استان');
 
g.append('text')
.attr('transform', 'rotate(-90)')
.attr('x', 0 - height / 2)
.attr('y', -50)
.attr('text-anchor', 'middle')
.style('font-size', '16px')
.style('font-weight', 'bold')
.text('جمعیت');