Обзор
Дерево слов изображает несколько параллельных последовательностей слов. Его можно использовать, чтобы показать, какие слова чаще всего следуют за целевым словом или предшествуют ему (например, «Кошки...») или для отображения иерархии терминов (например, дерева решений).
Деревья слов Google способны быстро обрабатывать большие объемы текста. Современные системы должны быть способны обрабатывать большие объемы текста без значительных задержек.
Примечание. Дерево слов находится на стадии бета-тестирования и может подвергнуться существенным изменениям в будущих версиях Google Charts.
Деревья слов отображаются в браузере с использованием SVG , что означает, что они будут работать во всех современных браузерах (например, Chrome, Firefox, Opera и Internet Explorer 9+). Как и все диаграммы Google, деревья слов отображают всплывающие подсказки, когда пользователь наводит курсор на данные.
Простой пример
Предположим, вы собрали набор фраз о кошках (например, «кошки едят мышей», «кошки лучше котят») и хотите выделить из набора наиболее важные атрибуты.
Это дерево слов представляет собой дерево фраз, размер слов пропорционален их использованию. В этом наборе фраз фраза «кошки едят мышей» встречается четыре раза, а фраза «кошки едят» — шесть раз (четыре раза со словом «мыши» и дважды со словом «корм»).
Попробуйте навести курсор на слова, чтобы увидеть информацию о частоте их использования.
Вот веб-страница, которая генерирует приведенное выше дерево слов:
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages:['wordtree']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable(
[ ['Phrases'],
['cats are better than dogs'],
['cats eat kibble'],
['cats are better than hamsters'],
['cats are awesome'],
['cats are people too'],
['cats eat mice'],
['cats meowing'],
['cats in the cradle'],
['cats eat mice'],
['cats in the cradle lyrics'],
['cats eat kibble'],
['cats for adoption'],
['cats are family'],
['cats eat mice'],
['cats are better than kittens'],
['cats are evil'],
['cats are weird'],
['cats eat mice'],
]
);
var options = {
wordtree: {
format: 'implicit',
word: 'cats'
}
};
var chart = new google.visualization.WordTree(document.getElementById('wordtree_basic'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="wordtree_basic" style="width: 900px; height: 500px;"></div>
</body>
</html>
Деревья слов чувствительны к регистру . Если вы хотите, чтобы слова «Кошки» и «кошки» обрабатывались одинаково, используйте методы JavaScript toLowerCase() или toUpperCase() для вашего текста, прежде чем передавать его в дерево слов.
Неявные и явные деревья слов
Существует два способа создания деревьев слов: неявно и явно . Выбор указывается опцией wordtree.format .
-
format: 'implicit' - Дерево слов возьмет набор фраз в любом порядке и построит дерево в соответствии с частотой слов и подфраз.
-
format: 'explicit' - Вы указываете дереву слов, что с чем связано, насколько большим должен быть каждый подфраз и какие цвета использовать.
Дерево слов в предыдущем разделе представляло собой неявное дерево слов: мы просто указали массив фраз, а дерево слов определило, насколько большим должно быть каждое слово.
В явном дереве слов создатель диаграммы напрямую предоставляет информацию о том, какие слова ссылаются на какие, их цвет и размер.
Между двумя деревьями слов, которые мы видели до сих пор, есть несколько различий. Структура первого дерева слов была рассчитана неявно на основе набора фраз, но в этом дереве слов мы указали, какие слова появляются, где они появляются и насколько они велики.
Это дерево слов настолько велико, что вряд ли поместится на экране. В этом случае слово «дерево» исчезает по краям. Вы можете перемещаться по дереву, нажимая на любое слово.
function drawSimpleNodeChart() {
var nodeListData = new google.visualization.arrayToDataTable([
['id', 'childLabel', 'parent', 'size', { role: 'style' }],
[0, 'Life', -1, 1, 'black'],
[1, 'Archaea', 0, 1, 'black'],
[2, 'Eukarya', 0, 5, 'black'],
[3, 'Bacteria', 0, 1, 'black'],
[4, 'Crenarchaeota', 1, 1, 'black'],
[5, 'Euryarchaeota', 1, 1, 'black'],
[6, 'Korarchaeota', 1, 1, 'black'],
[7, 'Nanoarchaeota', 1, 1, 'black'],
[8, 'Thaumarchaeota', 1, 1, 'black'],
[9, 'Amoebae', 2, 1, 'black'],
[10, 'Plants', 2, 1, 'black'],
[11, 'Chromalveolata', 2, 1, 'black'],
[12, 'Opisthokonta', 2, 5, 'black'],
[13, 'Rhizaria', 2, 1, 'black'],
[14, 'Excavata', 2, 1, 'black'],
[15, 'Animalia', 12, 5, 'black'],
[16, 'Fungi', 12, 2, 'black'],
[17, 'Parazoa', 15, 2, 'black'],
[18, 'Eumetazoa', 15, 5, 'black'],
[19, 'Radiata', 18, 2, 'black'],
[20, 'Bilateria', 18, 5, 'black'],
[21, 'Orthonectida', 20, 2, 'black'],
[22, 'Rhombozoa', 20, 2, 'black'],
[23, 'Acoelomorpha', 20, 1, 'black'],
[24, 'Deuterostomia', 20, 5, 'black'],
[25, 'Chaetognatha', 20, 2, 'black'],
[26, 'Protostomia', 20, 2, 'black'],
[27, 'Chordata', 24, 5, 'black'],
[28, 'Hemichordata', 24, 1, 'black'],
[29, 'Echinodermata', 24, 1, 'black'],
[30, 'Xenoturbellida', 24, 1, 'black'],
[31, 'Vetulicolia', 24, 1, 'black']]);
var options = {
colors: ['black', 'black', 'black'],
wordtree: {
format: 'explicit',
type: 'suffix'
}
};
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages:['wordtree']});
google.charts.setOnLoadCallback(drawSimpleNodeChart);
function drawSimpleNodeChart() {
var nodeListData = new google.visualization.arrayToDataTable([
['id', 'childLabel', 'parent', 'size', { role: 'style' }],
[0, 'Life', -1, 1, 'black'],
[1, 'Archaea', 0, 1, 'black'],
[2, 'Eukarya', 0, 5, 'black'],
[3, 'Bacteria', 0, 1, 'black'],
[4, 'Crenarchaeota', 1, 1, 'black'],
[5, 'Euryarchaeota', 1, 1, 'black'],
[6, 'Korarchaeota', 1, 1, 'black'],
[7, 'Nanoarchaeota', 1, 1, 'black'],
[8, 'Thaumarchaeota', 1, 1, 'black'],
[9, 'Amoebae', 2, 1, 'black'],
[10, 'Plants', 2, 1, 'black'],
[11, 'Chromalveolata', 2, 1, 'black'],
[12, 'Opisthokonta', 2, 5, 'black'],
[13, 'Rhizaria', 2, 1, 'black'],
[14, 'Excavata', 2, 1, 'black'],
[15, 'Animalia', 12, 5, 'black'],
[16, 'Fungi', 12, 2, 'black'],
[17, 'Parazoa', 15, 2, 'black'],
[18, 'Eumetazoa', 15, 5, 'black'],
[19, 'Radiata', 18, 2, 'black'],
[20, 'Bilateria', 18, 5, 'black'],
[21, 'Orthonectida', 20, 2, 'black'],
[22, 'Rhombozoa', 20, 2, 'black'],
[23, 'Acoelomorpha', 20, 1, 'black'],
[24, 'Deuterostomia', 20, 5, 'black'],
[25, 'Chaetognatha', 20, 2, 'black'],
[26, 'Protostomia', 20, 2, 'black'],
[27, 'Chordata', 24, 5, 'black'],
[28, 'Hemichordata', 24, 1, 'black'],
[29, 'Echinodermata', 24, 1, 'black'],
[30, 'Xenoturbellida', 24, 1, 'black'],
[31, 'Vetulicolia', 24, 1, 'black']]);
var options = {
colors: ['black', 'black', 'black'],
wordtree: {
format: 'explicit',
type: 'suffix'
}
};
var wordtree = new google.visualization.WordTree(document.getElementById('wordtree_explicit'));
wordtree.draw(nodeListData, options);
}
</script>
</head>
<body>
<div id="wordtree_explicit" style="width: 900px; height: 500px;"></div>
</body>
</html>
В приведенном выше коде вы можете видеть, что мы создаем DataTable вручную. Сначала мы объявляем наши пять столбцов:
- Индексный номер (используется для идентификации родителя слова).
- Текст, который будет отображаться в дереве. (Это не обязательно должно быть слово.)
- Родитель слова, где -1 означает «нет родителя».
- Размер слова.
- Цвет слова.
Затем мы добавляем строку для каждого слова. Вот пример:
nodeListData.addRow([9, 'Amoebae', 2, 1, 'black']);
Это строка №9, в которой к дереву слов добавляется слово Amoebae . Родителем является строка 2 ( Eukarya ), размер — 1 (без конкретной единицы измерения), а цвет — 0. Все цвета в этом дереве слов черные, но размеры разные.
Размер текста
В неявных деревьях слов на фактический размер отображения каждого слова влияют две вещи: размер, указанный для слова, и размер, указанный для всех слов ниже него (то есть справа) в дереве. В приведенном выше дереве слов у Life три дочерних элемента: Archaea (размер 1), Eukarya (размер 5) и Bacteria (размер 1).
Поскольку мы не выделили много места по вертикали для этого дерева слов, 21 тип бактерий, скорее всего, переполнит доступное пространство. Слово «дерево» сворачивает их, и вы видите усик с надписью «еще 21». Если вы нажмете Bacteria , дерево слов переместится в центр, и вы сможете увидеть 21 тип. Повторное нажатие на « Bacteria » приведет к повторному центрированию дерева.
Если в результате автоматического расчета размера текста некоторые слова становятся слишком большими, вы можете установить верхнюю границу с помощью параметра maxFontSize :
var options = {
maxFontSize: 14,
wordtree: {
format: 'explicit',
type: 'suffix'
}
};
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages:['wordtree']});
google.charts.setOnLoadCallback(drawSimpleNodeChart);
function drawSimpleNodeChart() {
var nodeListData = new google.visualization.arrayToDataTable([
['id', 'childLabel', 'parent', 'size', 'weight'],
[0, 'Life', -1, 1, 0],
[1, 'Archaea', 0, 1, 0],
[2, 'Eukarya', 0, 5, 0],
[3, 'Bacteria', 0, 1, 0],
[4, 'Crenarchaeota', 1, 1, 0],
[5, 'Euryarchaeota', 1, 1, 0],
[6, 'Korarchaeota', 1, 1, 0],
[7, 'Nanoarchaeota', 1, 1, 0],
[8, 'Thaumarchaeota', 1, 1, 0],
[9, 'Amoebae', 2, 1, 0],
[10, 'Plants', 2, 1, 0],
[11, 'Chromalveolata', 2, 1, 0],
[12, 'Opisthokonta', 2, 5, 0],
[13, 'Rhizaria', 2, 1, 0],
[14, 'Excavata', 2, 1, 0],
[15, 'Animalia', 12, 5, 0],
[16, 'Fungi', 12, 2, 0],
[17, 'Parazoa', 15, 2, 0],
[18, 'Eumetazoa', 15, 5, 0],
[19, 'Radiata', 18, 2, 0],
[20, 'Bilateria', 18, 5, 0],
[21, 'Orthonectida', 20, 2, 0],
[22, 'Rhombozoa', 20, 2, 0],
[23, 'Acoelomorpha', 20, 1, 0],
[24, 'Deuterostomia', 20, 5, 0],
[25, 'Chaetognatha', 20, 2, 0],
[26, 'Protostomia', 20, 2, 0],
[27, 'Chordata', 24, 5, 0],
[28, 'Hemichordata', 24, 1, 0],
[29, 'Echinodermata', 24, 1, 0],
[30, 'Xenoturbellida', 24, 1, 0],
[31, 'Vetulicolia', 24, 1, 0],
[32, 'Actinobacteria', 3, 1, 0],
[33, 'Firmicutes', 3, 1, 0],
[34, 'Tenericutes', 3, 1, 0],
[35, 'Aquificae', 3, 1, 0],
[36, 'Deinococcus-Thermus', 3, 1, 0],
[37, 'Fibrobacteres-Chlorobi/Bacteroidetes', 3, 1, 0],
[38, 'Fusobacteria', 3, 1, 0],
[39, 'Gemmatimonadetes', 3, 1, 0],
[40, 'Nitrospirae', 3, 1, 0],
[41, 'Planctomycetes-Verrucomicrobia/Chlamydiae', 3, 1, 0],
[42, 'Proteobacteria', 3, 1, 0],
[43, 'Spirochaetes', 3, 1, 0],
[44, 'Synergistetes', 3, 1, 0],
[45, 'Acidobacteria', 3, 1, 0],
[46, 'Chloroflexi', 3, 1, 0],
[47, 'Chrysiogenetes', 3, 1, 0],
[48, 'Cyanobacteria', 3, 1, 0],
[49, 'Deferribacteres', 3, 1, 0],
[50, 'Dictyoglomi', 3, 1, 0],
[51, 'Thermodesulfobacteria', 3, 1, 0],
[52, 'Thermotogae', 3, 1, 0]]);
var options = {
maxFontSize: 14,
wordtree: {
format: 'explicit',
type: 'suffix'
}
};
var wordtree = new google.visualization.WordTree(
document.getElementById('wordtree_explicit_maxfontsize'));
wordtree.draw(nodeListData, options);
}
</script>
</head>
<body>
<div id="wordtree_explicit_maxfontsize" style="width: 900px; height: 500px;"></div>
</body>
</html>
Префикс, суффикс и двойные деревья слов
Все деревья слов, которые мы видели до сих пор, представляют собой суффиксные деревья слов: корневое слово находится слева, а слова, следующие сразу за корнем, — справа. В префиксном дереве слов корень находится справа, а в двойном дереве слов — в центре. Вот адрес Линкольна в Геттисберге в виде префиксного дерева слов, кульминацией которого является слово «нация»:
Вот та же речь, что и суффиксное дерево слов, также основанное на слове «нация»:
Вы указываете суффиксное дерево, указав type: 'suffix' в параметрах диаграммы:
var options = {
wordtree: {
format: 'implicit',
type: 'suffix',
word: 'nation'
}
};
Двойное дерево слов объединяет деревья префиксных и суффиксных слов:
Вы указываете дерево двойных слов, указав type: 'double' в параметрах диаграммы. Обратите внимание, что деревья двойных слов всегда должны указывать корневое слово и всегда иметь format: 'implicit' .
var options = {
wordtree: {
format: 'implicit',
type: 'double',
word: 'nation'
}
};
Корень дерева указан в опции word , поэтому с помощью небольшого количества HTML мы можем дать пользователям возможность выбирать корень на своей веб-странице:
Полная веб-страница этого дерева слов:
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages:['wordtree']});
google.charts.setOnLoadCallback(drawSimpleNodeChart);
function drawSimpleNodeChart() {
var data = google.visualization.arrayToDataTable(
[ ['Phrases'],
['Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal. Now we are engaged in a great civil war, testing whether that nation, or any nation so conceived and so dedicated, can long endure. We are met on a great battle-field of that war. We have come to dedicate a portion of that field, as a final resting place for those who here gave their lives that that nation might live. It is altogether fitting and proper that we should do this. But, in a larger sense, we can not dedicate -- we can not consecrate -- we can not hallow -- this ground. The brave men, living and dead, who struggled here, have consecrated it, far above our poor power to add or detract. The world will little note, nor long remember what we say here, but it can never forget what they did here. It is for us the living, rather, to be dedicated here to the unfinished work which they who fought here have thus far so nobly advanced. It is rather for us to be here dedicated to the great task remaining before us -- that from these honored dead we take increased devotion to that cause for which they gave the last full measure of devotion -- that we here highly resolve that these dead shall not have died in vain -- that this nation, under God, shall have a new birth of freedom -- and that government of the people, by the people, for the people, shall not perish from the earth.']
]
);
var options = {
wordtree: {
format: 'implicit',
type: 'double',
word: 'nation'
}
};
var wordtree = new google.visualization.WordTree(document.getElementById('wordtree_double'));
wordtree.draw(data, options);
}
</script>
</head>
<body>
<div id="wordtree_double" style="width: 900px; height: 500px;"></div>
</body>
</html>
Стилизация деревьев слов
Вы можете управлять шрифтом и цветами деревьев слов. Гарнитуры шрифтов задаются опцией fontName :
Вот раздел параметров для приведенной выше диаграммы:
var options = {
format: 'implicit',
word: 'cats',
fontName: 'Times-Roman'
}
Цвет более нежный. Как и размер, его можно использовать для обозначения некоторых атрибутов слов в дереве. Если мы хотим раскрасить слова в нашем дереве слов «кошки», чтобы указать тональность, мы можем указать это в нашей таблице данных.
В приведенном выше дереве слов мы создаем нашу DataTable следующим образом:
var data = new google.visualization.arrayToDataTable([ ['phrase', 'size', 'value'], ['cats are better than dogs', 1, 8], ['cats eat kibble', 1, 5], ...
Мы устанавливаем размеры всех наших слов равными 1, но позволяем цвету (произвольно помеченному как 'value' в приведенном выше фрагменте) варьироваться от 0 («кошки злые») до 10 («кошки потрясающие»), чтобы указать настроение. Затем в наших опциях мы указываем три цвета: самый низкий, нейтральный и самый высокий:
var options = {
format: 'implicit',
word: 'cats',
colors: ['red', 'black', 'green']
};
Цвета также можно указать явно. Вот дерево слов, показывающее возможные ходы в шахматной игре. Помимо установки цветов слов на 'white' и 'black' , для цвета фона устанавливается шестнадцатеричное значение '#cba' с помощью параметра backgroundColor :
DataTable для этого дерева слов объявляется следующим образом:
function drawChart() {
var data = new google.visualization.arrayToDataTable([
['id', 'childLabel', 'parent', 'weight', { role: 'style' }],
[0, 'PK4', -1, 1, 'white'],
[1, 'PK4', 0, 1, 'black'],
...
Обратите внимание, что столбец, содержащий цвета, идентифицируется не текстовой меткой, такой как 'parent' или 'weight' , а ролью стиля: { role: 'style' } .
Цвет фона задаем в опциях:
var options = {
format: 'explicit',
backgroundColor: '#cba'
};
Токенизация предложений
Неявные деревья слов разбиваются на предложения и слова по простым правилам, выраженным в виде регулярных выражений. В редких случаях вам может потребоваться переопределить поведение по умолчанию, и в этих случаях вы можете использовать параметры wordSeparator и sentenceSeparator .
Если вы свободно владеете регулярными выражениями, значения по умолчанию могут иметь для вас смысл:
- предложениеРазделитель:
\s*(.+?(?:[?!]+|$|\.(?=\s+[AZ]|$)))\s* - wordSeparator:
([!?,;:.&"-]+|\S*[AZ]\.|\S*(?:[^!?,;:.\s&-]))
Примечание. Разделение регулярных выражений не является стандартным в Internet Explorer 8 и может привести к неожиданным результатам.
Загрузка
Имя пакета google.charts.load — "wordtree" :
google.charts.load("current", {packages: ["wordtree"]});
Имя класса визуализации — google.visualization.WordTree :
var visualization = new google.visualization.WordTree(container);
Формат данных
Строки: каждая строка в DataTable представляет отображаемый текст. Для неявных деревьев слов текст всех строк объединяется и маркируется перед отображением.
Столбцы для неявных деревьев слов:
| Столбец 0 | Столбец 1 | Столбец 2 | |
|---|---|---|---|
| Цель: | Текст | Размер (необязательно) | Стиль (необязательно) |
| Тип данных: | нить | число | нить |
| Роль: | домен | данные | данные |
Столбцы для явных деревьев слов:
| Столбец 0 | Столбец 1 | Столбец 2 | Столбец 3 | Столбец 4 | |
|---|---|---|---|---|---|
| Цель: | ИДЕНТИФИКАТОР | Текст | Родитель | Размер | Стиль |
| Тип данных: | число | нить | число | число | нить |
| Роль: | домен | данные | данные | данные | данные |
Варианты конфигурации
| Имя | |
|---|---|
| цвета | Список из трех цветов, заданный либо английским названием, либо шестнадцатеричным значением. Цвета для слов будут взяты из спектра, который начинается с первого цвета (низкое значение), проходит через средний цвет (нейтральный) и заканчивается последним цветом (высокое). Тип: Массив строк. По умолчанию: цвета по умолчанию |
| сила IFrame | Рисует диаграмму внутри встроенного фрейма. (Обратите внимание, что в IE8 этот параметр игнорируется; все диаграммы IE8 рисуются в i-кадрах.) Тип: логический По умолчанию: ложь |
| имя шрифта | Шрифт слова «дерево». Тип: строка По умолчанию: по умолчанию |
| высота | Высота диаграммы в пикселях. Тип: номер По умолчанию: высота содержащего элемента. |
| МаксФонтСизе | Верхний предел размера шрифта отображаемых слов. Тип: номер По умолчанию: ноль |
| ширина | Ширина диаграммы в пикселях. Тип: номер По умолчанию: ширина содержащего элемента. |
| wordtree.format | Если Тип: строка По умолчанию: 'implicit' |
| wordtree.sentenceSeparator | Для неявных деревьев слов — регулярное выражение, используемое для разбиения текста на предложения. Затем предложения разбиваются на слова с помощью опции Тип: регулярное выражение По умолчанию: \s*(.+?(?:[?!]+|$|\.(?=\s+[AZ]|$)))\s* |
| wordtree.type | Является ли дерево слов префиксным деревом (корневое слово справа), суффиксным деревом (слева) или двойным деревом (в центре). Тип: строка По умолчанию: «суффикс» |
| словодерево.слово | Для неявных деревьев слов: какое слово использовать в качестве корня дерева. (Обратите внимание, что деревья слов чувствительны к регистру.) Эту опцию необходимо указать для деревьев двойных слов. Тип: строка По умолчанию: ноль |
| wordtree.wordSeparator | Для неявных деревьев слов — регулярное выражение, используемое для разбиения предложений на отдельные отображаемые слова. Тип: регулярное выражение По умолчанию: /([!?,;:.&"-]+|\S*[AZ]\.|\S*(?:[^!?,;:.\s&-])) |
Методы
| Метод | |
|---|---|
draw(data, options) | Рисует диаграмму. Диаграмма принимает дальнейшие вызовы методов только после запуска события Тип возврата: нет |
clearChart() | Очищает диаграмму и освобождает все выделенные ей ресурсы. Тип возврата: нет |
События
| Имя | |
|---|---|
ready | Диаграмма готова для вызовов внешних методов. Если вы хотите взаимодействовать с диаграммой и вызывать методы после ее рисования, вам следует настроить прослушиватель этого события до вызова метода Свойства: нет |
select | Запускается, когда пользователь выбирает слово, чтобы «увеличить» дерево или отдалить его. Свойства: слово, цвет, вес. |
Политика данных
Весь код и данные обрабатываются и отображаются в браузере. Никакие данные не отправляются ни на один сервер.