До сих пор в этой серии вы узнали, как создавать линейные диаграммы и гистограммы в Plotly.js. Как я уже упоминал во вводном руководстве серии, Plotly.js не ограничивается несколькими типами диаграмм. Существует более 20 различных видов диаграмм, которые вы можете создать с помощью библиотеки. Каждый из этих типов диаграмм имеет свой собственный набор параметров настройки, а также атрибуты, которые являются общими для нескольких диаграмм.
Из этого руководства вы узнаете, как создавать пузырьковые и точечные диаграммы в Plotly.js. Оба этих типа диаграмм используют те же scatter которые мы использовали при создании линейных диаграмм. Важным отличием на этот раз является то, что атрибут mode будет установлен на markers .
Создание пузырьковых диаграмм в Plotly.js
Пузырьковые диаграммы используются для отображения трех измерений данных на диаграмме. Данные, связанные с каждым объектом, строятся с использованием пузырьков или дисков, где положение диска на оси xy отмечает его значения xy, а область диска используется для построения графика значения третьей точки данных. Пузырьковые диаграммы представляют собой разновидность точечных диаграмм. По этой причине имеет смысл установить атрибут type scatter при создании пузырьковой диаграммы.
Есть несколько вещей, которые вы должны помнить при создании пузырьковых диаграмм. Во-первых, третье значение данной точки данных представлено площадью пузырька, а не его радиусом. Радиус фактически пропорционален квадратному корню из действительного значения. Во-вторых, вы можете использовать их только для построения положительных значений. Это имеет смысл, потому что площадь пузыря не может быть отрицательной или нулевой.
Теперь давайте создадим нашу первую пузырьковую диаграмму, установив для атрибута mode markers . Все атрибуты, которые контролируют появление пузырьков на графике, присутствуют под объектом-маркером. Атрибут size объекта- marker можно использовать для указания размера пузырьков в качестве третьей точки данных. Этот атрибут может быть числом или массивом чисел. При создании пузырьковых диаграмм очень редко все сущности имеют одинаковое значение для своей третьей точки данных. Таким образом, вы обычно устанавливаете атрибут size в виде массива.
Непрозрачность всех пузырьков можно контролировать с помощью атрибута opacity . Как и size , этот атрибут также принимает значения в виде числа или массива или чисел со значениями от 0 до 1. В случае линейных диаграмм значение непрозрачности по умолчанию для разных пузырьков или дисков было 1. В случае пузырьковых диаграмм значение непрозрачности по умолчанию становится 0,7.
Еще один очень полезный атрибут, который можно использовать для точного создания пузырьковых диаграмм, — это параметр sizemode . Этот атрибут определяет, следует ли считать значение, указанное в атрибуте size площадью пузырька или его диаметром. Значением по умолчанию для sizemode является diameter . Однако, если вы создаете пузырьковые диаграммы, имеет смысл установить значение sizemode для area . Таким образом, вам не придется делать какие-либо вычисления, чтобы определить правильный размер пузырька для значения самостоятельно. Вы можете использовать следующий код для создания пузырьковой диаграммы, используя параметры, которые мы только что обсудили.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
|
var bubbleDiv = document.getElementById(«bubble-chart»);
var traceA = {
type: «scatter»,
mode: «markers»,
x: [5, 13, 24, 35, 46, 60],
y: [40, 70, 65, 15, 75, 49],
marker: {
size: [100, 200, 800, 600, 500, 600],
sizemode: ‘area’
}
};
var data = [traceA];
var layout = {
title: «A Bubble Chart in Plotly»
};
Plotly.plot(bubbleDiv, data, layout);
|
Прямо сейчас каждый пузырь имеет одинаковый цвет. Цвет отдельных пузырьков или всего следа можно изменить сразу, используя атрибут color .
Другой способ установить цвет различных пузырьков — использование цветных полос. В таких случаях цвет пузырька определяется на основе числового значения, указанного в массиве, который вы передали атрибуту color объекта marker . Эта цветная полоса может выступать в качестве четвертой точки данных при построении диаграммы.
Например, предположим, что вы строите пузырьковую диаграмму, которая показывает расположение и площадь различных парков в большом городе. В этой ситуации пузырьковая диаграмма была бы идеальной. Однако плотность деревьев в каждом парке или среднее количество людей, которые посещают каждый парк, могут быть разными. Если цвет каждого пузырька указан как числовое значение, можно будет назначить отдельный цвет отдельным пузырькам, чтобы отобразить значение четвертой точки данных.
В нашем примере цвет, соответствующий различным значениям плотности дерева, может быть задан с colorscale атрибута colorscale . При использовании этого атрибута вы должны по крайней мере указать отображение для самых низких (0), а также самых высоких (1) значений. Примером допустимого значения colorscale является [[0, 'rgb(0, 0, 0)'], [1, 'rgb(0, 255, 0)']] . У вас также есть возможность использовать строку имени палитры в качестве значения colorscale . Серые , YlGnBu , Greens , YlOrRd , Bluered , RdBu , Reds , Blues , Picnic , Rainbow , Portland , Jet , Hot , Blackbody , Earth , Electric и Viridis считаются действительными значениями.
Вы можете указать самое низкое числовое значение цвета, с которым должно отображаться самое низкое значение цветовой шкалы, используя атрибут cmin . Аналогично, вы также можете указать самое высокое значение цвета, которому должно соответствовать самое высокое значение цветовой шкалы, используя атрибут cmax . Можно изменить цветовое отображение, установив значение параметра reversescale в значение true . В этом случае самый низкий цвет будет сопоставлен с самым высоким значением, а самый высокий цвет будет сопоставлен с самым низким значением.
Объект colorbar предоставляет множество параметров, которые можно использовать для управления его внешним видом. Ширина цветной полосы, созданной Plotly.js, может контролироваться с помощью параметра thickness . Толщина указывается в пикселях, и ее значение по умолчанию равно 30. Длина цветовой полосы, исключая отступы на обоих концах, может быть указана с помощью атрибута len . Положение x и y цветовой шкалы может быть установлено с помощью параметров x и y . Позиция указывается в терминах долей графика, и ее действительное значение может находиться в диапазоне от -2 до 3. Значение по умолчанию для x равно 1,02, а значение по умолчанию для y равно 0,5. xpad x и y цветовой шкалы можно контролировать аналогично, используя параметры xpad и ypad . Вы можете назначить заголовок цветовой панели, используя атрибут title . Положение этого заголовка может быть указано относительно цветовой шкалы с titleside параметра titleside . Допустимые значения для этого параметра: top , bottom и right . Значением по умолчанию является top .
Следующий код создаст пузырьковую диаграмму, в которой темнота зеленого цвета сопоставлена с плотностью деревьев в этом парке.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
var bubbleDiv = document.getElementById(«bubble-chart»);
var traceA = {
type: «scatter»,
mode: «markers»,
x: [5, 13, 24, 35, 46, 60],
y: [40, 70, 65, 15, 75, 49],
marker: {
color: [35, 10, 50, 40, 18, 30],
colorscale: [[0, ‘rgb(200, 255, 200)’], [1, ‘rgb(0, 100, 0)’]],
cmin: 0,
cmax: 50,
size: [600, 1200, 800, 400, 1500, 2000],
sizemode: ‘area’,
showscale: true,
colorbar: {
thickness: 10,
y: 0.5,
ypad: 0,
title: ‘Tree Density’,
titleside: ‘bottom’,
outlinewidth: 1,
outlinecolor: ‘black’,
tickfont: {
family: ‘Lato’,
size: 14,
color: ‘green’
}
}
}
};
var data = [traceA];
var layout = {
title: «A Bubble Chart in Plotly»
};
Plotly.plot(bubbleDiv, data, layout);
|
Создание точечного графика в Plotly.js
Точечный график — это диаграмма, которая используется для построения точек в очень простом масштабе. Следует помнить, что точечные графики подходят только для небольшого количества данных. Построение большого количества точек сделает график очень загроможденным. Точно так же, как пузырьковые диаграммы, точечный график также требует, чтобы вы установили атрибут type для scatter и атрибут mode для markers . Поскольку точечные графики также используют маркеры для построения точки, все параметры настройки для них также доступны под объектом marker .
Следующий код создает точечный график, который показывает оценки, полученные двумя лучшими студентами на экзамене каждый год. Я также использовал некоторые другие атрибуты, связанные с легендой и осью X, чтобы изменить общий вид нашего сюжета.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
|
var dotDiv = document.getElementById(«dot-chart»);
var traceA = {
type: «scatter»,
mode: «markers»,
x: [2011, 2012, 2013, 2014, 2015, 2016],
y: [789, 795, 760, 775, 780, 783],
name: ‘Highest Marks’,
marker: {
color: ‘rgba(156, 165, 196, 0.5)’,
line: {
color: ‘rgba(156, 165, 196, 1)’,
width: 1,
},
symbol: ‘circle’,
size: 20
},
hoverlabel: {
bgcolor: ‘black’,
}
};
var traceB = {
type: «scatter»,
mode: «markers»,
x: [2011, 2012, 2013, 2014, 2015, 2016],
y: [769, 755, 747, 770, 771, 781],
name: ‘Second Highest Marks’,
marker: {
color: ‘rgba(165, 196, 50, 0.5)’,
line: {
color: ‘rgba(165, 196, 50, 1)’,
width: 1,
},
symbol: ‘circle’,
size: 20
},
hoverlabel: {
bgcolor: ‘black’,
}
};
var data = [traceA, traceB];
var layout = {
title: ‘Marks Obtained by Top Two Students’,
xaxis: {
showgrid: false,
showline: true,
linecolor: ‘rgb(200, 0, 0)’,
ticks: ‘outside’,
tickcolor: ‘rgb(200, 0, 0)’,
tickwidth: 4
},
legend: {
bgcolor: ‘white’,
borderwidth: 1,
bordercolor: ‘black’,
orientation: ‘h’,
xanchor: ‘center’,
x: 0.5,
font: {
size: 12,
}
},
paper_bgcolor: ‘rgb(255, 230, 255)’,
plot_bgcolor: ‘rgb(255, 230, 255)’
};
Plotly.plot(dotDiv, data, layout);
|
Мы уже рассмотрели различные атрибуты объекта- marker в предыдущем разделе. На этот раз я внес некоторые изменения в макет диаграммы. Использование атрибута title для назначения заголовка вашей диаграмме сделает ее более информативной, быстро сообщив зрителям, о чем эта диаграмма. Я также изменил внешний вид линии оси X, чтобы она выделялась среди других линий. Как видите, ширину и цвет тиков можно контролировать с помощью tickcolor и tickwidth .
Положение легенды можно указать с помощью атрибутов x и y . Оба эти числа принимают значение от -2 до 3. Позиция указывается в виде дробей. Точка привязки для позиций x и y может быть указана с использованием xanchor и yanchor . Эти два атрибута определяют точки, которые следует использовать в качестве ориентира для измерения расстояния, заданного атрибутами x и y . В приведенном выше примере расстояние 0,5 атрибута x измеряется от центра легенды, потому что xanchor был установлен в center .
Последние мысли
В этом руководстве показано, как создавать пузырьковые диаграммы и точечные графики в Plotly.js, используя атрибуты одного и того же объекта маркера. Вы также узнали, как добавлять дополнительную информацию в свои пузырьковые диаграммы с помощью цветных полос и устанавливать цветовую шкалу этих полос в соответствии со своими требованиями.
Я попытался охватить почти все атрибуты маркера, которые вам, возможно, придется использовать в ваших проектах. Если вам нужно больше узнать о создании пузырьковых и точечных диаграмм, вы можете перейти в раздел ссылок на маркеры на сайте Plotly.js. В следующем уроке вы узнаете, как создавать круговые и измерительные диаграммы в Plotly.js.
Если у вас есть какие-либо вопросы, связанные с этим учебником, не стесняйтесь сообщать мне в комментариях.