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

Тип работы:
Реферат
Предмет:
Общие и комплексные проблемы естественных и точных наук


Узнать стоимость

Детальная информация о работе

Выдержка из работы

УДК 004. 92−004. 89
Выбор библиотеки для разработки веб-сервиса визуализации когнитивной карты
О. Ю. Лазарева, Т.С. Грушина
Московский государственный университет печати имени Ивана Федорова 127 550, Москва, ул. Прянишникова, 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] и прописать путь к нему в коде программы или же прописать в пути адрес электронного ресурса:
& lt-script src=& quot-http://d3js. org/d3. v3. min. js"- charset=& quot-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 () возвращает ссылку на новый тег р, то этот код вставляет переданный текст между тегами & lt-р>- и & lt-/р>--
• - - указывает на окончание цепочки методов (строки кода).
Необходимо запомнить, что порядок следования методов
важен. Следующий вызываемый метод должен соответствовать методу объекта, возвращаемого текущим методом.
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

ПоказатьСвернуть
Заполнить форму текущей работой