Выбор библиотеки для разработки веб-сервиса визуализации когнитивной карты Текст научной статьи по специальности «Компьютерные и информационные науки»

УДК 004.92;004.89

Выбор библиотеки для разработки веб-сервиса визуализации когнитивной карты

О.Ю. Лазарева, Т.С. Грушина

Московский государственный университет печати имени Ивана Федорова 127550, Москва, ул. Прянишникова, 2А e-mail: lazarevaoy@gmail.com, spk.grushina@yandex.ru

В исследованиях и разработках в области электронных обучающих систем все чаще поднимается вопрос использования интеллектуальных технологий. Использование технологии искусственного интеллекта позволяет разрабатывать интеллектуальные обучающие системы (ИОС) [1-3]. Одной из составных частей ИОС является модель предметной области (МПО). Под МПО понимается система, имитирующая структуру или функционирование исследуемой предметной области и отвечающая основному требованию - быть адекватной этой области [5]. Основные требования к МПО [5]:

• формализация, которая обеспечивает однозначное описание структуры предметной области;

• понятность для разработчиков и заказчиков с помощью применения графических средств отображения модели;

• наличие средств физической реализации модели предметной области в информационной системе.

Модель предметной области состоит из перечня взаимосвязанных понятий, используемых для описания этой области (изучаемой дисциплины). Эти понятия являются минимальными структурными единицы учебного материала и могут быть названы дидактическими единицами (ДЕ).

МПО может быть визуально представлена в виде семантической сети - графа с отношениями «предыдущий-последующий» между ДЕ. Если этим отношениям назначены веса, характеризующие важность знания одной ДЕ при изучении другой, то такая семантическая сеть будет являться когнитивной картой [3].

116

Для отображения структуры модели предметной области удобно применять графические методы, так как графическое изображение нередко оказывается наиболее емкой формой представления информации [4].

В связи с этим актуальна разработка веб-сервиса, позволяющего в процессе работы с ИОС эксперту-преподавателю строить когнитивную карту учебной дисциплины в графическом режиме. Подобный веб-сервис позволит в режиме реального времени визуализировать когнитивную карту предметной области в виде графа дидактических единиц (ДЕ), визуально редактировать ее и устанавливать отношения «предыдущий-последующий» между ДЕ с помощью технологии drag-and-drop.

При разработке сервиса визуализации когнитивной карты могут использоваться следующие языки и технологии:

• HTML (стандартный язык разметки интернет-документов),

• CSS (формальный язык описания внешнего вида интернетдокумента),

• SVG (язык разметки масштабируемой векторной графики),

• JavaScript (интерпретируемый язык, часто позиционируемый как язык сценариев);

• AJAX (технология-подход к построению интерактивных пользовательских интерфейсов веб-приложений: «фоновый» обмен данных браузера с веб-сервером).

На сегодняшний день существует большое количество вспомогательных ресурсов, которые облегчают задачу разработчикам. Плагины, библиотеки и приложения с открытым и закрытым доступом написаны под разные области применения различных языков программирования. Для создания и визуализации когнитивной карты могут быть использованы библиотеки, которые могут работать с JavaScript, HTML5, CSS и SVG.

На данный момент можно выделить следующие библиотеки для визуализации данных [8-13]:

• D3.js - для обработки и визуализации данных. Библиотека предоставляет удобные утилиты для обработки и загрузки массивов данных;

• Jit.js - для создания интерактивных визуализаций для Web;

• Arbor.js - для визуализации графов;

• Amcharts - расширенная библиотека для создания диаграмм, графиков, карт;

• Dygraph-combined.js - быстрая библиотека для графиков;

• Protovis - библиотека для нативной визуализации.

При имеющемся наборе библиотек с открытым доступом выбрана именно D3, так как она обладает рядом преимуществ по сравнению с остальными библиотеками (табл. 1).

117

Таблица 1

Сравнение библиотек визуализации данных

Библио- тека Доступ- ность Обработка большого объема данных Скорость загрузки данных Интер- активность Спецификация

D3 Бесплатно Да Высокая Высокая Карты, графики, древовидные графы и обычные, диаграммы, схемы, трансформация объектов

Arbor Бесплатно Нет Низкая Низкая Графы

Dygraph- combined Бесплатно Да Высокая Низкая Графики разных видов

Jit (JavaScript InfoVis Toolkit) Бесплатно Да Низкая Средняя Графики, диаграммы, иерархические схемы, графы разных видов

Amcharts Бесплатно или за 99$ без логотипа Да Высокая Высокая Численные данные, графики, диаграммы

Protovis Бесплатно Да Средняя Средняя Древовидные схемы, графики, диаграммы, графы

При сравнении также учитывалось разнообразие методов, команд и инструментов для работы с мультимедийными данными, самый большой выбор которых имеется у библиотеки D3.

D3 (Data-Driven Documents) - это JavaScript-библиотека, с помощью которой можно создавать как статичные, так и динамичные визуализации сложных данных. Основная задача этой библиотеки - это наглядная визуализация больших массивов данных для лучшего восприятия информации и поиска закономерностей. Библиотека D3.js обладает возможностью подключения к абсолютно любой HTML-странице с использованием JavaScript.

В библиотеке используется стандартная DOM-модель (Document Object Model - объектная модель документа). Любой элемент (например, HTML-документ) определенной структуры может быть представлен в виде дерева узлов, каждый из которых - это образец данных (текстовый, графический или другой объект). Узлы связаны между

118

собой отношением «родитель-потомок», что позволяет программам получать доступ к документам, изменять их структуру, содержимое и оформление [6].

Четыре принципа работы библиотеки D3

1. Возможность выбора (выделения) нужного набора DOM-узлов, чтобы затем использовать операторы преобразования этих данных.

2. Функция перехода применяется к объектам для постепенного перехода одного значения некоего атрибута к другому (например, текст изменяет свой цвет с синего на черный).

3. Привязка данных. Для более сложных задач создается ситуация, когда загрузка данных провоцирует создание элементов.

4. Добавление узлов. Когда созданы все объекты, библиотека добавляет на страницу DOM-узлы, обеспечивая ей желаемый внешний вид.

D3 использует стандартные функции языка для выделения элементов, создания SVG-объектов, стилей и анимации. При этом библиотека может использовать данные в любом формате при условии, что все используемые форматы должны быть прописаны в коде.

Библиотека D3 состоит из следующих частей:

• Core - выборки, переходы, данные, локализации, цвета и т.д;

• Scales - масштабирование данных и цветовых кодировок;

• SVG - инструменты для создания масштабируемой векторной графики;

• Time - синтаксический анализ временных форматов, вычисление календарных интервалов и т.п;

• Layouts - получение вторичных данных для позиционирования элементов;

• Geography - проектно-специфичные координаты, вычисления над широтой и долготой;

• Geometry - утилиты для 2D-геометрии;

• Behaviors - формы поведения взаимодействия.

Все возможности библиотеки, команды, утилиты, методы и элементы прописаны в официальной документации [13].

Установить библиотеку можно двумя способами: скачать с официального сайта исходник [9] и прописать путь к нему в коде программы или же прописать в пути адрес электронного ресурса:

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

Основные особенности библиотеки D3 и ее методы. В D3 может использоваться техника цепочки методов, в которой методы вызываются последовательно один за другим в одной строке кода, выполняя несколько действий [7]. Многие методы возвращают выбранные

119

элементы (ссылку на них), это открывает возможность создавать цепочки методов. В листинге 1 показан пример исполнения этой техники.

Листинг 1

d3.select("body")

.append("p")

.text("Text");

В данном примере d3 ссылается на D3 объект, из которого имеется доступ к методам D3:

• d3.select - выборка элемента из текущего документа. d3.select("body") находит body элемент в документе и передает ссылку на него следующему методу в цепочке (для получения группы объектов используют метод selectAll);

• .append("p") - метод .append() создает любой элемент, указанный внутри скобок и добавляет его в конец выборки. В данном случае, создается новый параграф p внутри тега body, который выступает как аргумент функции. Она вызывается у элемента body, выбранного вызовом метода select();

• .text("Text") - метод .text() в качестве аргумента принимает строку и вставляет ее между открывающимся и закрывающимся тегами выборки. Так как метод .append() возвращает ссылку на новый тег р, то этот код вставляет переданный текст между тегами <р> и </р>;

• ; - указывает на окончание цепочки методов (строки кода).

Необходимо запомнить, что порядок следования методов

важен. Следующий вызываемый метод должен соответствовать методу объекта, возвращаемого текущим методом.

D3 позволяет привязывать входные значения данных к элементам. Привязка - это прикрепление данных с конкретными элементами, чтобы в дальнейшем можно было ссылаться на эти значения и применять правила преобразования.

Одними из ключевых методов при работе с данными в библиотеке D3 являются:

• метод .style() используется для установки CSS-свойств и значений напрямую HTML-элементу;

• метод .attr() используется для получения или установления значения атрибута;

• метод .data() получает или устанавливает данные для группы элементов при вычислениях реляционного соединения, то есть считает количество значений и анализирует их;

• метод .classed() добавляет или удаляет CSS класс;

120

• метод .enter() возвращает ссылки на шаблоны новых элементов.

Таким образом, ввиду того, что библиотека D3 является свободной, обладает высокой скоростью загрузки данных и интерактивностью, а также большим набором методов, команд и инструментов для работы с мультимедийными данными, данную библиотеку удобно использовать при разработке сервиса визуализации когнитивной карты предметной области для использования в интеллектуальной обучающей системе.

Библиографический список

1. Лазарева О.Ю. Архитектура интеллектуальной обучающей системы для оценки компетенций учащихся вузов. // Известия высших учебных заведений. Проблемы полиграфии и издательского дела. -2014. - № 5. - С. 55-64.

2. Лазарева О.Ю. Использование SWI-Prolog в веб-ориентированной интеллектуальной обучающей системе / Актуальные проблемы современной науки: сборник статей Международной научно-практической конференции (1 августа 2014г., г. Уфа). - Уфа: Аэтерна, 2014. -С. 11-16.

3. Лазарева О.Ю. Когнитивная карта предметной области в интеллектуальной обучающей системе / Научно-образовательная информационная среда XXI века: материалы VI11 Международной науч.-практ. конф. (15-18 сентября 2014 года). - Петрозаводск, 2014. -С. 134-137.

4. Лазарева О.Ю, Грушина Т.С. Визуализация когнитивной карты предметной области в интеллектуальной обучающей системе / Мобильные системы обработки медиаконтента: сборник материалов ; Моск. гос. ун-т печати имени Ивана Федорова. - М. : МГУП имени Ивана Федорова, 2015.

5. Технология разработки прикладного программного обеспечения / Соловьев С.В., Цой Р.И., Гринкруг Л.С. - Изд-во «Академия Естествознания», 2011.

6. Scott Murray. Interactive Data Visualization for the Web -USA: O'Reilly Media, 2013.

7. D3. Краткое руководство на русском языке (перевод Иванов Сергей) [Электронный ресурс]. URL: http://serganbus.github.io/ d3tutorials/setup.html (Дата обращения: 21.03.2015).

8. Библиотека Arborjs [Электронный ресурс]. URL: http:// arborjs.org (Дата обращения: 21.03.2015).

9. Библиотека D3 [Электронный ресурс]. URL: http://d3js.org (Дата обращения: 21.03.2015).

10. Библиотека Dygraphs [Электронный ресурс]. URL: http:// dygraphs.com (Дата обращения: 21.03.2015).

121

11. Библиотека Jit (JavaScript InfoVis Toolkit) [Электронный ресурс]. URL: http://philogb.github.io/jit (Дата обращения: 21.03.2015).

12. Библиотека Protovis [Электронный ресурс]. URL: http:// mbostock.github.io/protovis (Дата обращения: 21.03.2015).

13. Официальная документация по библиотеке D3 [Электронный ресурс]. URL: http://github.com/mbostock/d3/wiki/API-Reference (Дата обращения: 21.03.2015).

122