Разработка модуля динамической визуализации системы обработки числовых данных

Размещено на http://www.allbest.ru

МИНИСТЕРСТВО ОБРАЗОВАНИЯ РЕСПУБЛИКИ БЕЛАРУСЬ

БЕЛОРУССКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ

Факультет прикладной математики и информатики

Кафедра технологий программирования

Разработка модуля динамической визуализации системы обработки числовых данных

Курсовая работа

студент 4 курса 8 группы

ЧИРКОВ ВЛАДИСЛАВ ВАЛЕРЬЕВИЧ

Минск 2014



Аннотация

Чирков В.В. Разработка модуля динамической визуализации системы обработки числовых данных. Курсовая работа / Минск: БГУ, 2014. - 22 с. 21 илл.

Анатацыя

Чыркоў У.В. Распрацоўка модуля дынамічнай візуалізацыі сістэмы апрацоўкі лікавых дадзеных. Курсавая праца / Мінск: БДУ, 2014. - 22 с. 21 мал.

Annotation

Chirkov V.V. Development of the module for dynamic visualization of numerical data processing system. Coursework / Minsk: BSU, 2014. - 22 p. 21 img.



СОДЕРЖАНИЕ

РЕФЕРАТ

ВВЕДЕНИЕ

1.ОБЗОР ИНСТРУМЕНТОВ

1.1CSS АНИМАЦИЯ В СОВРЕМЕННЫХ БРАУЗЕРАХ

1.2ФОРМАТ ВЕКТОРНОЙ ГРАФИКИ SVG

2.СТРУКТУРА МОДУЛЯ

2.1ИНТЕРФЕЙС МОДУЛЯ ВИЗУАЛИЗАЦИИ ДАННЫХ

2.2ФОРМАТ ДАННЫХ

2.3СТРУКТУРА МОДУЛЯ ВИЗУАЛИЗАЦИИ ДАННЫХ

3.МЕХАНИЗМ РАБОТЫ С МОДУЛЕМ

3.1ИНТЕРФЕЙС МОДУЛЯ ВИЗУАЛИЗАЦИИ ДАННЫХ

3.2РЕАЛИЗОВАННЫЕ ТИПЫ ВИЗУАЛИЗАЦИИ

3.3ОПРЕДЕЛЕНИЕ АНОМАЛЬНЫХ ДАННЫХ И ИХ ПРЕДСТАВЛЕНИЕ

ЗАКЛЮЧЕНИЕ

ЛИТЕРАТУРА



РЕФЕРАТ

модуль визуализация обработка данный

Курсовая работа, 22 с., 21 илл., 7 источников.

Ключевые слова: ВИЗУАЛИЗАЦИЯ, ЧИСЛОВЫЕ ДАННЫЕ, СИСТЕМА ОБРАБОТКИ, JAVASCRIPT.

Объектами исследований: система обработки числовых данных.

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

В результате исследования: освоены методы манипуляции параметрами SVG изображений при помощи JavaScript и возможности по анимации в современных браузерах.

Методы исследования - изучение электронных материалов, аналитический метод.

Область применения - web - страница.



ВВЕДЕНИЕ

Задачей работы является Разработка модуля динамической визуализации системы обработки числовых данных. Функциональной особенностью данного модуля должна являться возможность определения аномальных данных по заданному критерию и последующий вывод этих данных.

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

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

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



1. ОБЗОР ИНСТРУМЕНТОВ

1.1 CSS АНИМАЦИЯ В СОВРЕМЕННЫХ БРАУЗЕРАХ

Все современные браузеры, кроме IE<10 поддерживают «CSS transitions», которые позволяют реализовать анимацию средствами CSS, без привлечения JavaScript.

Рисунок 1. Поддержка анимации современными браузерами

CSS анимация - это плавное изменение одного и/или более свойств элемента по математической функции. Обычно анимации делаются на JS через функции setInterval и setTimeout. jQuery использует функцию animate, особо сложные эффекты делаются на flash, но это было раньше.

Использование CSS анимации на мобильных платформах приоритетно так, как они меньше нагружают процессор, нежели JS или flash решения.

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

Рисунок 2. Пример работы с CSS анимацией

1.2 ФОРМАТ ВЕКТОРНОЙ ГРАФИКИ SVG

SVG (Scalable Vector Graphics -- масштабируемая векторная графика) -- язык разметки масштабируемой векторной графики, созданный Консорциумом Всемирной паутины (W3C) и входящий в подмножество расширяемого языка разметки XML, предназначен для описания двумерной векторной и смешанной векторно/растровой графики в формате XML. Поддерживает как неподвижную, так и анимированную интерактивную графику -- или, в иных терминах, декларативную и скриптовую. Не поддерживает описание трёхмерных объектов (не путать с имитацией трёхмерности путём светотени). Это открытый стандарт, который является рекомендацией консорциума W3C -- организации, разработавшей такие стандарты, как HTML и XHTML.

Возможности языка:

Описание путей “path”. Позволяет задать любую фигуру компактной строкой, описывающей путь от начальной точки до конечной через любые промежуточные координаты.

Описание основных геометрических фигур (многоугольники, прямоугольники, окружности и т. п.).

Широкий спектр визуальных свойств, которые можно применить к фигурам и путям: окраска, прозрачность, скругление углов и т. д.

Интерактивность. На каждый отдельный элемент и на целое изображение можно повесить обработчик событий.

Анимация и сценарии. С помощью ECMAScript или JavaScript можно описывать даже самые сложные сценарии, связанные с математическими вычислениями координат и пропорций фигур.

Масштабируемость -- SVG является векторным форматом. Существует возможность увеличить любую часть изображения SVG без потери качества.

SVG -- открытый стандарт. В отличие от некоторых других форматов, SVG не является чьей-либо собственностью.

SVG документы легко интегрируются с HTML и XHTML документами.

Рисунок 3. Текстовое представление изображения
Рисунок 4. Итоговое представление изображения

Эти преимущества позволяют создать легковесную быстро-расширяемую библиотеку по манипуляции векторными изображениями.

Один из наиболее часто используемых Фреймворков для работы с SVG является D3 (Data Driven Documents).



2. СТРУКТУРА МОДУЛЯ

2.1 ИНТЕРФЕЙС МОДУЛЯ ВИЗУАЛИЗАЦИИ ДАННЫХ

Целью работы является разработка структуры модуля визуализации числовых данных, который корректно реагирует на динамические изменение данных.

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

Рисунок 5. Use-case диаграмма модуля визуализации данных

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

Рисунок 6. Sequence диаграмма модуля визуализации данных

Для оперирования объектами модуля разработчику предоставляется глобальный объект “VIS” у которого он может запросить объект, отвечающий за представление данных в виде векторной картинки. Для этого разработчику необходимо вызвать метод “graph” и в качестве параметра передать имя того объекта

Рисунок 7. Глобальный объект модуля



После подключения библиотеки к главному HTML файлу страницы разработчику доступна глобальная переменная “VIS”. У этого объекта есть единственная функция “graph”, которая принимает в качестве аргумента имя функции визуализации, над которой будут производить манипуляции.

Функция “graph” возвращает объект, с которым предстоит работать разработчику. Важно указать, что разработчик впоследствии должен манипулировать исключительно этим объектом, так как создание каждый раз новой сущности не только сделает невозможным использование анимации, но и потребует больших затрат памяти.

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

Рисунок 8. Объект визуализации данных



После того, как эти параметры были заданы, разработчик может вызвать функцию “data”, в которую передаст объект с данными.

После того, как функция “data” была вызвана, на странице начинается перерисовка объекта визуализации. Пользователь библиотеки может в любой момент поменять данные и перерисовка объекта будет происходить плавно. Это будет достигаться за счёт того, что в случае замены данных в момент анимации, текущая анимация будет прерываться, а новая будет изменять объект из того состояния в котором он остался в момент изменения данных.

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

Модуль позволяет перерисовывать представление объекта визуализации данных без рывков не зависимо от частоты изменения данных. Формально процесс анимации можно представить как систему из начального состояния и конечного состояния, между которыми используется заданный эффект. Плавный эффект достигается за счёт того, что если новые данные поступят во время анимации, то текущая анимация прервётся, а состояние в котором анимация представления была прервана будет взято как начальное для следующего шага анимации.

2.2 ФОРМАТ ДАННЫХ

На работу модуля не влияет, каким образом были получены данные. Получение и приведение данных к конкретному виду делегируется разработчику, использующему библиотеку. Это позволяет абстрагироваться от разрабатываемого приложения, что делает модуль абсолютно независимым.

Разработчик может получать данные разными способами и в разных условиях, что ставит определённые ограничения:

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

Представление данных не должно зависеть от способа их получения.

Представление должно предсказуемо реагировать на некорректные данные.

Для решения 2 и 3 задан определённый формат данных, который поступает на вход функции “data” объекта визуализации. Таким образом, если разработчик, использующий библиотеку, имеет данные в другом виде, ему необходимо преобразовать их для соответствия предопределённым типам.

Данные для функции визуализации, передаются в формате JSON.

Каждый объект визуализации принимает данные удовлетворяющий определённым требованиям:

Данные приходят в виде объекта с определёнными полями или массива этих объектов;

Каждый объект должен содержать необходимые поля:

“x” - число или строка;

“y” - число;

Каждый объект может содержать поле:

“title” - число или строка;



Рисунок 9. Формат данных в виде массива. Рисунок 10. Формат данных в виде единичного значения.

При передаче некорректных данных объект не перерисовывается.

2.3 СТРУКТУРА МОДУЛЯ ВИЗУАЛИЗАЦИИ ДАННЫХ

Все функции и переменные являются параметрами глобального объекта “VIS”. Для работы с визуализациями разработчику необходимо вызвать функцию “graph”, которая возвращает объект визуализации.

Разработчик не может напрямую вызвать функцию перерисовки объекта (visualize()). Она является “private” функцией визуализации и каждый раз вызывается при изменении параметров или данных.

Рисунок 11. Диаграмма классов модуля визуализации данных

Преимущества данной структуры:

Позволяет расширять библиотеку без влияния на структуру программных продуктов, которые уже её используют.

Простая в освоении сторонним разработчиком.

Занимает не большой объём, что позволяет быстрее загружать её на пользовательский компьютер.

Недостатки данной структуры:

Поставляет ограниченный набор объектов визуализации.

Требовательна к интерфейсу при расширении.



3. МЕХАНИЗМ РАБОТЫ С МОДУЛЕМ

3.1 ИНТЕРФЕЙС МОДУЛЯ ВИЗУАЛИЗАЦИИ ДАННЫХ

Для того чтобы иметь доступ к управляющим объектам модуля необходимо подключить JavaScript файл к HTML странице на которой будет отображаться визуальное представление данных.

Рисунок 12. Подключение модуля к странице.

После подключения файла модуля разработчик имеет доступ к глобальному объекту «vis». При помощи этого объекта он может получить доступ к объекту управляющему представлением данных.

Для получения определённого типа объекта, необходимо вызвать функцию, определяющую поведение представления:

linear() - линейный график.

bar() - столбчатая диаграмма.

circular() - круговая диаграмма.

Единственным параметром, передаваемым этой функции должен быть объект определяющий контейнер для представления данных.

Параметр может быть:

ID элемента.

CSS селектор, определяющий путь к объекту.

DOM объект.

jQuery объект.

D3 объект.

В данном примере был использован линейный график, который

будет находится внутри объекта с ID «#chart-container-linear».

Рисунок 13. Получение объекта для работы с представлением данных.

После получения доступа к объекту управляющему представлением данных, разработчик может установить различные параметры. Их список представлен в UML диаграмме (Рисунок 11).

Рисунок 14. Установка параметров представления данных.

В любой момент времени разработчик может подставить новые данные либо как массив (Рисунок 14) либо как объект (Рисунок 15).

Рисунок 14. Данный в виде массива.

Рисунок 15. Данные в виде объекта.

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

3.2 РЕАЛИЗОВАННЫЕ ТИПЫ ВИЗУАЛИЗАЦИИ

Рисунок 16. Линейный график.

Рисунок 17. Столбчатая диаграмма.

Рисунок 18. Круговая диаграмма.



3.3 ОПРЕДЕЛЕНИЕ АНОМАЛЬНЫХ ДАННЫХ И ИХ ПРЕДСТАВЛЕНИЕ

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

Рисунок 19. Установка критерия.

В данном примере критерием является разница в поле «y» более чем на три тысячных. Количество одновременно рассматриваемых элементов равно десяти. Это означает, что если любые два элемента из 10 удовлетворяют критерию, то они будут сохранены. С одной стороны, это создаёт избыточность данных, с другой это даёт разработчику возможность самому определять какие данные ему нужны.

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

Аномальные данные можно получить в виде массива элементами, которого являются массивы, где каждый дочерний массив - это набор аномальных данных.

Особенностью работы с аномальными данными является возможность изменения критерия в любой момент, как и получение данных. Это даёт возможность гибко работать с представлением данных не требуя создания новой реализации объекта визуализации.

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

Рисунок 20. Получение и отображение аномальных данных.

Для данного примера первые аномальные данные повторно используются для того же объекта визуализации.

Размещено на http://www.allbest.ru

Рисунок 21. Получение и отображение аномальных данных.



ЗАКЛЮЧЕНИЕ

Изучены основные принципы анимации в современных браузерах и язык разметки масштабируемой векторной графики SVG.

Реализован модуль динамической визуализации системы обработки числовых данных. Решена проблема изменения визуального представления при поступлении новых данных. Для улучшения восприятия были использованы возможности современных браузеров по анимации элементов представления.

Реализована возможность определения аномальных данных по заданному критерию и последующего представления этих данных.

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

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

Разработано демонстрационное приложение, показывающее возможности основных типов представления данных.



ЛИТЕРАТУРА

модуль визуализация анимация данный

Visualize This: The Flowing Data Guide to Design, Visualization, and Statistics - Nathan Yau, pages 35-38 , San Francisco, CA, USA, 2012.

Interactive Data Visualization for the Web - Scott Murray, pages 10-12, Sheffield, UK, 2013.

Инфографика [Электронный ресурс]. - Режим доступа: http://brainwashing.pro/dataviz, 05.12.13, свободный - Загл. с экрана.

JavaScript. Подробное руководство, 5-е издание - Дэвид Флэнаган, страницы 11-12 , Символ-Плюс, Москва, 2012.

Анимация в современных браузерах [Электронный ресурс]. - Режим доступа: http://learn.javascript.ru/animation, 05.12.13, свободный - Загл. с экрана.

Инфографика - Википедия [Электронный ресурс]. - Режим доступа: http://ru.wikipedia.org/wiki/Инфографика, 05.12.13, свободный - Загл. с экрана.

CSS3 анимация [Электронный ресурс]. - Режим доступа: http://www.2webgo.ru/post/13/css3-animatsiya/, 05.12.13, свободный - Загл. с экрана.

Размещено на Allbest.ru