Plotly (Plotly)
«کتابخانه Plotly» ابزار رسم نمودار است. چند خط کد می نویسی و شکل می بینی. «ردندر (Render)» یعنی تبدیل داده به تصویر. پس با تمرین، حرفه ای می شوی.
ستونی عمودی با Plotly
«نمودار ستونی (Bar)» مقایسه دسته ها را نشان می دهد. مثل نمرات کلاس ها.
const xArray = [
"Italy",
"France",
"Spain",
"USA",
"Argentina"
];
const yArray = [
55,
49,
44,
24,
15
];
const data = [
{
x: xArray,
y: yArray,
type: "bar",
orientation: "v",
marker: { color: "rgba(0,0,255)" }
}
];
const layout = { title: "World Wide Wine Production" };
Plotly.newPlot("myPlot", data, layout);
ستونی افقی با Plotly
افقی کردن، خوانایی برخی برچسب ها را بهتر می کند. مخصوصاً متن های بلند.
const xArray = [
55,
49,
44,
24,
15
];
const yArray = [
"Italy",
"France",
"Spain",
"USA",
"Argentina"
];
const data = [
{
x: xArray,
y: yArray,
type: "bar",
orientation: "h",
marker: { color: "rgba(255,0,0,0.6)" }
}
];
const layout = { title: "World Wide Wine Production" };
Plotly.newPlot("myPlot", data, layout);
دایره ای (Pie) با Plotly
«دایره ای (Pie)» سهم هر بخش را نشان می دهد. مثل سهم فروش.
const data = [
{
labels: xArray,
values: yArray,
type: "pie"
}
];
const layout = { title: "World Wide Wine Production" };
Plotly.newPlot("myPlot", data, layout);
دونات (Donut) با Plotly
«دونات (Donut)» همان دایره ای است. فقط وسط خالی می شود.
const data = [
{
labels: xArray,
values: yArray,
hole: 0.4,
type: "pie"
}
];
const layout = { title: "World Wide Wine Production" };
Plotly.newPlot("myPlot", data, layout);
پراکندگی (Scatter) با Plotly
«پراکندگی (Scatter)» رابطه دو ویژگی را نشان می دهد. مثل قد و قیمت.
const xArray = [
50,
60,
70,
80,
90,
100,
110,
120,
130,
140,
150
];
const yArray = [
7,
8,
8,
9,
9,
9,
10,
11,
14,
14,
15
];
const data = [
{
x: xArray,
y: yArray,
mode: "markers",
type: "scatter"
}
];
const layout = {
xaxis: { range: [ 40, 160 ], title: "Square Meters" },
yaxis: { range: [ 5, 16 ], title: "Price in Millions" },
title: "House Prices vs. Size"
};
Plotly.newPlot("myPlot", data, layout);
خطی (Line) با Plotly
«خطی (Line)» روند تغییرات را نشان می دهد. مثل رشد فروش ماهانه.
const data = [
{
x: xArray,
y: yArray,
mode: "lines",
type: "scatter"
}
];
const layout = {
xaxis: { range: [ 40, 160 ], title: "Square Meters" },
yaxis: { range: [ 5, 16 ], title: "Price in Millions" },
title: "House Prices vs Size"
};
Plotly.newPlot("myPlot", data, layout);
حبابی (Bubble) با Plotly
«حبابی (Bubble)» بُعد سوم را با اندازه نقطه نشان می دهد. بسیار کاربردی است.
const xArray = [ 1, 2, 3, 4 ];
const yArray = [ 10, 20, 30, 40 ];
const trace1 = {
x: xArray,
y: yArray,
mode: "markers",
marker: {
color: [ "red", "green", "blue", "orange" ],
size: [ 20, 30, 40, 50 ]
}
};
const data = [ trace1 ];
const layout = { title: "Plotting Bubbles" };
Plotly.newPlot("myPlot", data, layout);
رسم معادله به صورت خط
می خواهی تابع ببینی؟ مقادیر بساز و خط را رسم کن.
let exp = "Math.sin(x)";
const xValues = [];
const yValues = [];
for (let x = 0; x <= 10; x += 0.1) {
xValues.push(x);
yValues.push(eval(exp));
}
const data = [ { x: xValues, y: yValues, mode: "lines" } ];
const layout = { title: "y = " + exp };
Plotly.newPlot("myPlot", data, layout);
رسم معادله به صورت نقطه ای
اگر نقطه ها را بخواهی، «markers» انتخاب کن. سپس مشاهده کن.
let exp = "Math.cos(x)";
const xValues = [];
const yValues = [];
for (let x = 0; x <= 10; x += 0.2) {
xValues.push(x);
yValues.push(eval(exp));
}
const data = [ { x: xValues, y: yValues, mode: "markers" } ];
const layout = { title: "y = " + exp };
Plotly.newPlot("myPlot", data, layout);
گام های عملی سریع
- داده ها را در آرایه بریز.
- type و mode مناسب انتخاب کن.
- layout را بساز و ترسیم کن.
نکته: نام محورها را دقیق بگذار. فهم نمودار بهتر می شود.
جمع بندی سریع
- Plotly تعاملی و قدرتمند است.
- Bar برای مقایسه دسته هاست.
- Pie سهم هر بخش را نشان می دهد.
- Scatter رابطه دو ویژگی را می دهد.
- Bubble بُعد سوم را نشان می دهد.
برای ادامه گرافیک، سر بزن به گرافیک جاوااسکریپت. همچنین صفحه Canvas دید بهتری از بوم می دهد.