Вспышка | Визуализация данных для Интернета

Flare позволяет легко создавать интерактивные визуализации данных

Чтобы начать делать свои собственные визуализации, скачать вспышку и проработайте учебник ниже. Нужна дополнительная помощь? Посетить справочный форум (вам понадобится SourceForge войдите, чтобы оставлять сообщения).

Flare - это программное обеспечение с открытым исходным кодом, выпущенное по лицензии BSD, что означает, что его можно свободно развертывать и модифицировать (и даже продавать за $$). Дизайн Flare был адаптирован из его предшественника, инструментария визуализации для Java.

Приложения

Объявления

• 2010.10.07: Разработка Flare была открыта для сообщества, и источник переместился из SourceForge в новый дом на GitHub, вспышка 2009.01.24 это все еще последний официальный релиз и (по крайней мере, пока) учебники и документация отражают это. Разрабатываемая версия на GitHub теперь содержит лучшую поддержку Flash Player 10, а также множество других мелких исправлений и изменений.
• 2009.01.24: вспышка 2009.01.24 был выпущен. Это служебная версия с рядом исправлений и обновлений. Увидеть выпуск Больше подробностей. Это последний запланированный выпуск Flash Player 9 - будущие версии перейдут на версию 10.
• 2008.07.30: вспышка 2008.07.29 был выпущен. Это основной выпуск, представляющий множество новых функций и архитектурных улучшений. Увидеть выпуск Больше подробностей.
• 2008.07.30: вспышка 2008.08.08 был выпущен. Этот выпуск включает улучшенную поддержку легенды, именованные переходы, исправления ошибок и рефакторинг для уменьшения сцепления и консолидации служебных классов. Увидеть выпуск Больше подробностей.

учебник

Пошаговое руководство для изучения ActionScript и Flare.

Первые шаги

Первый шаг - настроить инструменты разработки.

1. Настройте рабочую среду разработки Flash. Есть два подхода. Мы рекомендуем первый для простоты, но более продвинутые пользователи могут использовать второй подход.
   • Вариант 1 (проще): Установить Adobe Flex Builder.
     • Это полная среда разработки для приложений ActionScript / Flex. Он доступен для всех основных платформ (Windows, Mac, Unix). Пользователи, которые уже используют Eclipse IDE, также могут установить Flex Builder в качестве подключаемого модуля Eclipse.
     • Подсказка к использованию Flex Builder заключается в том, что это коммерческое программное обеспечение, и оно будет работать только в течение ограниченного испытательного периода. Однако Adobe предоставляет бесплатные лицензии Flex Builder студентам, преподавателям и сотрудникам университетов.
   • Вариант 2 (более сложный): Установите бесплатный Flex SDK
     • Это установит базовые компиляторы ActionScript / Flex: mxmlc и compc, Затем вы можете настроить свою собственную среду сборки, например, используя make or ant строить системы. Flare упакован с build.xml файл для использования с Апачский муравей построить систему. Как только муравей установлен, просто откройте build.xml файл в текстовом редакторе, измените первые пару строк, чтобы указать на ваш Flex SDK установка, а затем использовать ant скомпилировать библиотеки. Мы используем муравьиные задачи Adobe Labs для разработки Flex.
     • Преимущество этого подхода заключается в том, что все программное обеспечение является бесплатным, и срок его действия не истечет. Однако вы теряете такие функции, как автоматическая компиляция, управление проектами и автоматическое заполнение, предоставляемые Flex Builder.
2. Загрузите библиотеки prefuse flare.
   • Загружаемый файл представляет собой zip-файл, содержащий набор проектов библиотеки ActionScript. Разархивируйте файлы в основной каталог рабочей области, если вы используете Flex Builder. Во время обучения мы импортируем их в Flex Builder и используем их для построения визуализаций!
   • Программное обеспечение в настоящее время является альфа-версией, поэтому следует ожидать некоторых ошибок и ограничений. Мы исправим проблемы, как только сможем, и ссылка выше всегда будет указывать на самую последнюю версию.

Введение в Flash и ActionScript 3

Flash - отличная среда для интерактивной графики, и с недавним добавлением языка программирования ActionScript 3 он стал намного более мощным и эффективным. Хотя полное введение в AS3 выходит за рамки этого руководства, вот несколько ресурсов, которые вы найдете полезными:

• Adobe предоставляет обзор AS3 со ссылками на дополнительные ресурсы.
• Основной ActionScript 3 Колин Мук из издательства O'Reilly - отличная книга, которая поможет вам начать работу. Вы можете получить доступ к онлайн здесь (некоторые учреждения, такие как университеты, предоставляют доступ бесплатно).
• Справочник по Adobe Flex API неоценим для понимания различных доступных классов и методов. Мы сосредоточимся только на занятиях в flash.* пакеты.

Это руководство предполагает базовое знакомство с синтаксисом и типами ActionScript, а также с концепциями объектно-ориентированного программирования.

Часть 1: DisplayObjects

Введение

Flash моделирует 2D визуальную сцену, используя дерева сцены, Визуальные объекты организованы в иерархию с дочерними объектами, определенными в координатном пространстве родителя. Вы часто будете видеть этот сценограф, называемый список отображения как в документации Adobe, так и в книгах по программированию Flash.
Узел в верхней части списка отображения всегда Stage объект. На сцене всегда есть один и только один ребенок. Это называется rootи все визуальные элементы находятся под корнем. Как правило, root - это ваше настоящее Flash-приложение. Мы скоро вернемся к этому.
Все визуальные элементы, которые можно добавить в список отображения, являются экземплярами DisplayObject учебный класс. Подклассы DisplayObject включают Bitmap (для изображений), TextField (для интерактивных текстовых областей) и Video (думаю, YouTube). Однако наиболее распространенными случаями являются Sprite и Shape классы. Для справки большинство этих классов можно найти в flash.display пакет (хотя в конечном итоге вы, вероятно, найдете flash.text Пакет использования тоже).
Ассоциация Sprite класс является наиболее полезным, общим визуальным объектом, используемым Flash Player. Спрайты - это визуальные объекты, которые содержат содержимое чертежа и могут служить контейнером для подузлов в списке отображения ( Sprite подклассы класса flash.display.DisplayObjectContainer учебный класс). В отличие от Shape Класс может содержать содержимое чертежа, но не может содержать подузлы. В результате Shapes занимают меньше памяти, но гораздо менее гибки. Для простоты мы сосредоточимся на спрайтах в этом уроке.

Создать новое приложение

Сначала давайте создадим новое приложение Flash. Для этого откройте Flex Builder и убедитесь, что вы находитесь в перспективе «Разработка Flex» (часто это достигается путем нажатия на черно-белый значок «Fx» в правом верхнем углу).
На панели «Навигатор» слева щелкните дисплей правой кнопкой мыши и выберите «Создать> Проект ActionScript». В появившемся диалоговом окне введите «Учебник» в качестве имени проекта, затем нажмите «Готово». Это создаст для вас новый проект.
Теперь вы должны увидеть папку «Tutorial» на панели «Navigator». В этой папке вы должны увидеть файл с именем «Tutorial.as». Это ваш основной файл приложения. Откройте его, если он еще не открыт.
Внутри файла вы увидите основные строительные леса для этого класса:

package {import flash.display.Sprite; Открытый класс Tutorial расширяет Sprite {public function Tutorial () {}}}

Обратите внимание, что этот класс расширяет Sprite учебный класс. Потому что это наш основной класс приложения, когда мы запускаем приложение экземпляр Tutorial класс будет автоматически добавлен в список отображения как его root (один и единственный ребенок Stage).
Также обратите внимание, что конструктор был создан автоматически. Этот конструктор будет вызываться при запуске приложения. Для тех, кто знаком с языками программирования, такими как C, C ++ или Java, конструктор для класса приложения действует очень похоже на main функционировать на этих других языках.
С этим новым приложением мы можем начать играть с визуальными объектами. Тем не менее, есть одна вещь, которую мы хотим сделать в первую очередь. Добавьте новую строку прямо над объявлением класса (”public class Tutorial…») Строка, которая говорит:

[SWF (width = "800", height = "600", backgroundColor = "# ffffff", frameRate = "30")]

Эта строка определяет настройки по умолчанию для вашего приложения (которое компилируется и сохраняется как файл .swf в каталоге вашего проекта bin). Выше мы устанавливаем размер, цвет фона и целевую частоту кадров (в кадрах в секунду) для нашего приложения.

Спрайты

Как и все DisplayObjects, Sprite поддерживает ряд визуальных свойств прямо из коробки. Это включает в себя x, y, scaleX, scaleY, rotationи alpha свойства. Они соответственно изменяют положение, размер, ориентацию и прозрачность спрайта (и всех его дочерних элементов! Помните, что здесь мы используем сценограф).
Однако эти значения еще мало что значат, так как спрайты по умолчанию ничего не содержат. Мы начнем с рисования нашего собственного контента.
Каждый спрайт также имеет graphics имущество. Мы можем использовать это для рисования графики для Sprite, graphics свойство является экземпляром flash.display.Graphics класс, который предоставляет ряд команд векторного рисования.
В приведенном ниже примере мы делаем несколько вещей.

• Сначала мы создаем новый Sprite.
• Во-вторых, мы используем спрайт graphics нарисовать круг с серой заливкой и черным контуром.
  • beginFill устанавливает текущий цвет заливки и стиль. Первый аргумент - это цвет в шестнадцатеричной записи, а второй аргумент - это альфа-значение, которое варьируется от 0 для полностью прозрачного до 1 для полностью непрозрачного.
  • lineStyle устанавливает текущий цвет и стиль обводки. Первый аргумент - это ширина линии, второй аргумент - это цвет.
  • drawCircle рисует круг радиуса 10 в точке 0,0 в координатном пространстве нашего спрайта.
• В-третьих, мы добавляем спрайт в качестве дочернего элемента нашего основного приложения ( Tutorial спрайт).
• В-четвертых, мы устанавливаем x и y позиция нашего спрайта.
• В-пятых, мы добавляем отладочный вывод. trace выводит строку на консоль Этот вывод отображается только при запуске приложения в режиме «отладки».

Вот код:

package {import flash.display.Sprite; [SWF (width = "800", height = "600", backgroundColor = "# ffffff", frameRate = "30")] Tutorial открытого класса расширяет Sprite {public function Tutorial () {var sprite: Sprite = new Sprite () ; sprite.graphics.beginFill (0xcccccc, 0.5); sprite.graphics.lineStyle (1, 0x000000); sprite.graphics.drawCircle (0, 0, 10); this.addChild (спрайты); sprite.x = 50; sprite.y = 50; trace ("наш спрайт находится по адресу:" + sprite.x + "," + sprite.y); }}}

Запустите приложение (щелкните правой кнопкой мыши «Tutorial.as» и выберите «Запуск от имени> Приложение Flex»). Вы должны увидеть серый круг с черным контуром в верхнем левом углу с центром в точках 50, 50. Если вы запустите приложение в режиме отладки (выберите «Отладка как> Flex Application»), вы также должны увидеть строку «наш спрайт находится по адресу: 50, 50 дюймов в выходной консоли.

Вложенные спрайты

Теперь давайте сделаем нашу сцену немного интереснее. Давайте начнем с переноса нашего кода генерации Sprite на новый метод. Мы добавим этот метод в наш класс:

 приватная функция createCircle (x: Number, y: Number): Sprite {var sprite: Sprite = new Sprite (); sprite.graphics.beginFill (0xcccccc, 0.5); sprite.graphics.lineStyle (1, 0x000000); sprite.graphics.drawCircle (0, 0, 10); sprite.x = x; sprite.y = y; вернуть спрайт; }

Далее мы заменим код в нашем конструкторе. Сначала мы создаем новый спрайт с именем container, который мы будем использовать для хранения коллекции окружностей. Мы помещаем это в центр нашей сцены. Во-вторых, мы используем цикл для создания группы кругов. Здесь мы выстраиваем круги симметрично вокруг точки 0,0 родительского контейнера. Наш новый конструктор теперь выглядит так:

 общедоступная функция Tutorial () {контейнер var: Sprite = new Sprite (); container.x = 400; container.y = 300; this.addChild (контейнер); for (var i: int = 0; i <10; ++ i) {var x: Number = (i / 5 <1? 1: -1) * (13 + 26 * (i% 5)); container.addChild (createCircle (x, 0)); }}

Запустите новую версию приложения. Вы должны увидеть линию из десяти кружков в середине приложения.
Теперь мы можем изменить контейнер для обновления всех окружностей внутри него. Попробуйте поиграть с настройкой различных визуальных переменных на спрайте контейнера. Например, измените x, y, scaleX, scaleY, rotationи alpha свойства.

Другие темы

Вы можете сделать намного больше с основными опциями, которые предоставляет Flash. К сожалению, они немного превышают то, на что у нас есть время. Некоторые вещи для изучения включают фильтры изображений (см. flash.filters пакет), которые позволяют добавлять визуальные эффекты для отображения объектов, используя их filters свойства, и различные варианты, доступные в flash.display.Graphics класс, включая стили заливки и линии, и многие другие процедуры рисования 2D.

Часть 2: Анимация

Теперь, когда мы можем создавать визуальные объекты, пришло время дать им немного жизни. Flare включает в себя flare.animate пакет, чтобы помочь сделать это легко. Во-первых, нам нужно импортировать библиотеки flare для использования в Flex Builder.

Импорт библиотек

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

• Убедитесь, что вы находитесь в перспективе «Flex Development».
• Щелкните правой кнопкой мыши панель навигатора слева.
• Выберите «Импорт…» во всплывающем меню.
• В диалоговом окне выберите «Общие> Существующие проекты в рабочую область» и нажмите кнопку «Далее».
• Используйте виджеты «Выбор корневого каталога» для перехода в каталог рабочего пространства Flex Builder.
• Теперь вы должны увидеть факельные проекты, перечисленные на панели «Проекты:».
• Выберите проекты «flare» и «flare.demos», а затем нажмите кнопку «Готово».

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

Обзор факельной библиотеки

Вот краткий обзор факельного инструментария. Внутри flare проект, загляните в папку «src / flare». Вы найдете несколько пакетов с различными функциями:

• analytics: операторы для вычисления статистики и анализа данных
• animate: инструменты для создания анимации
• data: методы чтения и записи наборов данных
• display: DisplayObject типы, которые расширяют предоставляемые flash.display
• flex: оболочка для встраивания визуализаций Flare в приложения Flex
• physics: физический движок для физических эффектов или силовой направленности
• query: обработчик запросов для объектов ActionScript
• scale: классы для обработки шкал данных, таких как линейные, логарифмические и временные шкалы
• util: набор служебных классов, предоставляющих часто необходимые функции
• vis: компоненты и операторы визуализации вспышек

Существует также flare.demos Проект, который предоставляет ряд примеров того, как создавать компоненты Flare.

Импорт библиотеки в другом проекте

Чтобы использовать вспышку в ваших собственных проектах, вам необходимо обновить настройки проекта. Вот как это сделать:

1. На панели «Навигатор» щелкните правой кнопкой мыши верхнюю папку проекта «Учебное пособие».
2. Нажмите «Свойства» в контекстном меню.
3. В появившемся диалоговом окне нажмите «Путь сборки ActionScript» на левой панели (это должен быть третий элемент сверху)
4. Нажмите вкладку «Путь к библиотеке» на правой панели.
5. Нажмите кнопку «Добавить проект»
6. Теперь вы должны увидеть список проектов, в том числе Flare.
7. Выберите «вспышка» и затем нажмите «ОК»

Теперь вы добавили библиотеки flare в свой проект и можете использовать любой из классов, которые он предоставляет.
Стоит отметить одну вещь о компиляторе Flex - по умолчанию он включает только те классы, которые вы фактически используете в своем приложении. Таким образом, даже если вы импортируете очень большую библиотеку, размер вашего окончательного .swf-файла все равно может быть довольно маленьким. Однако следует помнить, что это может вызвать проблемы, если вы используете отражение для выполнения динамической загрузки классов в вашем приложении (более продвинутая функция, не описанная в этом руководстве).

Основная анимация: анимация, последовательность и параллель

Хорошо, теперь давайте оживим! flare.animate.Transition класс является базовым классом для всех анимаций. Важные подклассы Transition являются Tween, Sequenceи Parallel переходы. Подростки используются для анимации свойств одного объекта. Последовательности используются для запуска серии анимаций по порядку. Параллельные переходы запускают коллекцию переходов одновременно. Давайте начнем с Tween.

Свойства объекта анимации

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

 var tween: Tween = new Tween (контейнер, 3, {вращение: 360}); tween.play ();

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

 импорт flare.animate.Tween;

(ПРИМЕЧАНИЕ. Иногда Flex Builder автоматически добавляет оператор импорта для вас при вводе имени нового класса. Если нет, другой метод - поместить текстовый курсор на В конце нового имени класса и введите «Ctrl-Space» - это должно создать для вас новый импорт для класса.)
Теперь запустите ваше приложение - точки должны вращаться по кругу в течение 3 секунд.
Вот что делает конструктор Tween:

• Первый аргумент - это объект, значения которого должны быть анимацией
• Второй аргумент - длина анимации в секундах.
• Третий аргумент - это экземпляр объекта со списком свойств для анимации и их целевых значений.
  • Имена свойств должны точно соответствовать свойствам входного объекта.
  • Вложенные свойства допускаются, но должны быть заключены в кавычки. Например, {“data.profit”:50} является допустимым вводом, если входной объект имеет свойство с именем data, которое, в свою очередь, имеет свойство с именем profit.

Ассоциация play Затем метод запускает анимацию. play Метод также может быть вызван с одним логическим параметром, указывающим, следует ли запускать анимацию в обратном порядке.
Возможно, вы заметили, что анимация вращения демонстрирует некоторое ускорение. Это потому, что настройка по умолчанию для Tween Например, использовать «замедленную» замедленную анимацию. Вы можете контролировать это поведение, используя Easing функции. Эти функции принимают в качестве входных данных текущий прогресс анимации в виде доли от 0 до 1. Затем они возвращают манипулированную дробь прогресса для изменения темпа анимации, часто нелинейным образом.
Чтобы удалить замедление (т. Е. Использовать функцию линейного замедления), вы можете написать: tween.easing = Easing.none, Просто убедитесь, что вы импортируете flare.animate.Easing класс в верхней части файла.
Не стесняйтесь экспериментировать с другими функциями замедления. Например, функции замедления могут включать в себя замедление (манипулирование только началом анимации), ослабление (манипулирование только концом анимации) или оба. Например, попробуйте это: tween.easing = Easing.easeOutBounce, Это должно заставить вращение отскочить в конце.
Прежде чем двигаться дальше, попробуйте анимировать другие свойства контейнера, например, положение, масштаб или альфа-значения.

Композитные анимации

Ассоциация Sequence и Parallel классы позволяют группировать анимации вместе. Последовательность запускает набор анимаций одна за другой. Например, попробуйте это:

 var t1: Tween = new Tween (контейнер, 1, {y: 100}); var t2: Tween = new Tween (контейнер, 1, {scaleX: 2}); var t3: Tween = new Tween (контейнер, 1, {y: 300}); var t4: Tween = new Tween (контейнер, 1, {scaleX: 1}); var seq: Sequence = новая последовательность (новая параллель (t1, t2), новая параллель (t3, t4)); seq.play ();

Вам также необходимо добавить несколько новых операторов импорта в верхней части файла:

 импорт flare.animate.Parallel; import flare.animate.Sequence;

Это создает четыре подростка: t1, t2, t3и t4, Затем он создает два параллельных перехода, которые выполняются t1 и t2 вместе и бежать t3 и t4 все вместе. Затем параллельные переходы выполняются один за другим в последовательности. Таким образом, легко создавать более сложные анимации.
Для более сложных композитных анимаций, посмотрите на FlareLogo и flare.demos.Animation занятия в flare.demos проект.

Пакетная анимация с переходниками

Посмотрите на график Tween, Parallelи Sequence классы, вы можете сделать любое количество анимированных переходов. Однако при работе с большими коллекциями объектов (что характерно для визуализации) может быть затруднительно вручную обрабатывать такой же большой набор анимаций. Кроме того, должно быть легко запускать отдельные подпрограммы для кодирования визуальных свойств, таких как макет, цвет, размер, форма и не беспокоиться об обработке анимации. Возможно, вы хотите анимировать изменения или статическое обновление. В любом случае, вы должны иметь возможность повторно использовать один и тот же код для присвоения значений.
Для решения этих проблем Flare предоставляет Transitioner учебный класс. Переходники упрощают процесс создания анимации для коллекций объектов. Вы просто берете объект и устанавливаете желаемые свойства по одному. За кулисами, переходник будет автоматически генерировать и повторно использовать необходимые анимации для моделирования полной анимации. Кроме того, если анимация нежелательна, переходник может быть настроен на немедленную установку значений свойств. Короче говоря, переходник обеспечивает уровень косвенности для обновления свойств объекта - эти обновления можно собирать и затем анимировать или применять немедленно.
Вот простой пример использования переходника в нашем учебном приложении.

 var t: Transitioner = новый переходник (2); для (var j: int = 0; j

Этот пример анимирует все спрайты в container на новый случайный y положение и случайный вертикальный масштабный коэффициент. Сначала мы создаем новый Transitioner это должно создать 2-секундную анимацию. Затем мы перебираем каждый дочерний спрайт и используем переход для установки свойств в Tween.
Переходный $ Оператор указывает, что мы хотим установить целевое значение для объекта ввода. По умолчанию либо новый Tween создан или существующий Tween найден для текущего элемента. $ Затем оператор возвращает объект, для которого нужно установить целевое свойство анимации.
Кроме того, переходы могут использоваться для создания статических (не анимированных) переходов. Если переходный immediate свойство установлено в true, оно не будет создавать новых Tweens. Вместо этого оператор $ просто вернет входное значение. Это означает, что вы можете создавать методы, которые обновляют значения с помощью переходника, а затем в дальнейшем контролируют, хотите ли вы, чтобы эти значения обновлялись. Стандартный «немедленный режим» Transitioner извлекается с использованием статического Transitioner.DEFAULT имущество. Таким образом, вам не нужно выделять новый Transitioner при выполнении немедленных обновлений.
Переходники широко используются на протяжении flare.vis пакет, позволяющий дизайнерам визуализации контролировать, какие обновления должны быть анимированы и как.

Часть 3: Визуализации

Загрузка данных

Базовое представление данных для Flare просто использует встроенные типы данных Flash: Object и Array, Например, таблица данных может быть просто представлена ​​в виде массива объектов, каждый из которых содержит имена и значения каждого поля данных. Хотя возможны более эффективные представления, этот подход обеспечивает наибольшую гибкость, а также использует преимущества существующих соглашений по разработке Flash.
Для загрузки данных во Flash player существует несколько подходов. Простой подход - встроить ваши данные в само приложение. Таким образом, данные загружаются вместе с приложением, что хорошо для статических наборов данных. Например, вы можете использовать объектную нотацию ActionScript, чтобы определить набор данных непосредственно как переменную:

var data: Array = [{id: "Q1", продажи: 10000, прибыль: 2400}, {id: "Q2", продажи: 12000, прибыль: 2900}, {id: "Q3", продажи: 15000, прибыль : 3800}, {id: "Q4", продажи: 15500, прибыль: 3900}];

Тем не менее, во многих случаях вы захотите загружать свои данные динамически, либо с веб-страницы (вы можете использовать JavaScript в браузере для передачи значений во Flash), либо с сервера в Интернете. Есть много подходов к этому, и вы должны выбрать то, что лучше всего подходит для вашего конкретного приложения. Например, ActionScript предоставляет дополнительные типы данных и синтаксис для работы с XML данные с использованием ECMAScript для XML (E4X) стандарт.
Flare также предоставляет некоторые утилиты для загрузки внешних наборов данных. Он поддерживает загрузку данных с любого сервера в Интернете и преобразование этих данных во внутренние объекты ActionScript. В настоящее время поддерживаются следующие форматы файлов: текст с разделителями табуляции («табуляция», стандартный формат файлов для экспорта данных из таких инструментов, как Excel), Обозначение объекта JavaScript («Json», общий формат данных для веб-приложений) и Графмл («GraphML», XML формат для представления сетей с узлами и ребрами).
Удаленные данные загружаются вспышкой с использованием flare.data.DataSource учебный класс. Вот пример использования его для загрузки файла данных с разделителями табуляции:

var ds: DataSource = new DataSource ("http://flare.prefuse.org/data/test.tab.txt", "tab"); var loader: URLLoader = ds.load (); loader.addEventListener (Event.COMPLETE, function (evt: Event): void {// функция для обработки данных после завершения загрузки var ds: DataSet = loader.data as DataSet; // теперь что-то делаем с данными ...} );

Ассоциация DataSource Конструктор имеет два обязательных аргумента: URL-адрес набора данных и строку, указывающую формат файла. В настоящее время поддерживаются следующие форматы: «tab» (с разделителями табуляции), «json» (нотация объектов JavaScript) и «graphml» (GraphML).
Для наборов данных, чья схема (имена и типы данных полей) может быть неясной, существует также третий необязательный аргумент конструктора, который принимает DataSchema тип. Увидеть flare.data.DataSchema и flare.data.DataField классы для большего. Схема может быть полезна для обеспечения правильного именования значений данных (например, для файла с разделителями табуляции без строки заголовка) и преобразования в надлежащие типы данных (например, для данных JSON, в которых числовые значения были заключены в кавычки).
Для фактической загрузки данных вызывается метод загрузки DataSource, возвращающий flash.net.URLLoader пример. Загрузчик может использоваться для отслеживания хода загрузки (например, если вы хотите указать индикатор выполнения) и предоставляет уведомление о завершении загрузки. В приведенном выше примере мы добавляем прослушиватель событий, который будет уведомлен о завершении загрузки. DataSource автоматически проанализирует входные данные, отобразит их в объекты ActionScript и сохранит результаты в flare.data.DataSet объект. DataSet Класс может представлять как данные таблицы, так и сети (узел / ребро).

Создание и управление визуальными объектами

Теперь мы хотели бы визуализировать набор данных. Для этого мы сопоставляем отдельные записи данных в визуальные элементы. Flare предоставляет набор визуальных объектов для представления данных. Вот обзор основных классов, предоставляемых flare.vis.data пакет.

• DataSprite: Базовый класс для спрайтов, которые визуально представляют данные. DataSprite является подклассом Flash Player Sprite класса. DataSprite включает data свойство, в котором хранится кортеж данных (объект ActionScript), а также предоставляет дополнительные визуальные переменные помимо тех, которые поддерживаются базовыми спрайтами, включая поля цвета, формы и размера, а также поддержку установки позиций в полярных координатах.
• NodeSprite: DataSprite экземпляр, представляющий узел. Это тип по умолчанию, используемый для визуализации данных. NodeSprite экземпляры могут быть связаны внутри сети или древовидных структур EdgeSprite экземпляров.
• EdgeSprite: DataSprite экземпляр, представляющий ребро. EdgeSprite соединяет два NodeSprites, Узлы доступны через source и target свойства. EdgeSprites используются для создания графиков и деревьев, а также для представления линий, таких как графики временных рядов.

Как правило, NodeSprites и EdgeSprites создаются и хранятся в flare.vis.data.Data класс, который управляет всеми визуальными элементами для одной визуализации. Data Класс предоставляет методы для создания новых визуальных объектов для кортежей данных и для представления структуры графа.
Ассоциация Data Класс также предоставляет методы для обхода и обновления содержащихся элементов данных. nodes и edges свойства возвращают списки узлов и ребер, содержащихся в данных. Каждый из этих списков включает в себя visit метод, который позволяет вам передать функцию, которая затем будет вызываться с каждым узлом или ребром. Так же setProperty и setProperties методы позволяют вам устанавливать значения свойств для всех узлов или ребер одновременно. Эти методы необязательно принимают Transitioner в качестве аргумента, так что вы можете анимировать обновление свойства.
Например, следующий код приводит к односекундной анимации, в которой цвет линии для всех узлов установлен на синий. (Обратите внимание, что шестнадцатеричное обозначение для DataSprite значения цвета включают альфа, а также красный, зеленый, синий каналы).

data.nodes.setProperty ("lineColor", 0xff0000bb, new Transitioner (1)). play ();

Списки узлов и ребер также поддерживают значения свойств по умолчанию, используя setDefault, setDefaults, removeDefaultи clearDefaults методы. Значения по умолчанию будут установлены для узла или ребра, вновь созданного с использованием класса данных addNode or addEdgeFor методы.
Ассоциация Tree класс является подклассом Dataспециализируется для представления дерева, а не общего графа. Data класс поддерживает автоматическое создание Tree Например, вычисляя охватывающие деревья общего графа. В качестве параметра может быть передан ряд методов создания связующего дерева, в том числе алгоритмы шириной первого, глубиной и минимальным связующим деревом. Эти расчеты выполняются с использованием flare.analytics.graph.SpanningTree класса.
Для создания объектов узлов и ребер мы используем addNode и addEdgeFor методы.

• addNode принимает кортеж входных данных ( Object) и создает новый NodeSprite для визуализации этих данных.
• addEdgeFor занимает два существующих NodeSprites и добавляет EdgeSprite соединяя их. Метод также необязательно исключает кортеж данных (опять же, Object представляя любые поля данных) для края.

Вот простой пример для создания NodeSprites для табличного набора данных, предполагая, что у нас есть массив объектов данных:

var list: Array; // массив объектов данных, которые мы уже загрузили var data: Data = new Data (); // новый контейнер данных для каждого (var o: Object in list) {data.addNode (o); }

Результатом является Data объект, заполненный визуальным DataSprite (узлы или ребра) экземпляры.
На практике вам не всегда нужно заполнять визуализированные данные вручную. Чтобы создать Data Объект для визуализации загруженного набора данных, вы можете использовать вместо этого удобный метод. Data.fromArray() функция создает Data экземпляр табличных данных, хранящихся в виде массива объектов ActionScript, а Data.fromDataSet() Метод аналогично создает Data экземпляр из загруженного DataSet объект.

Построение визуализации

Теперь давайте соединим все это, чтобы начать делать визуализации. Visualization класс представляет отдельную визуализацию, включая визуальные метки (хранятся в Data экземпляр) и топоры. Чтобы создать визуализацию, мы загружаем набор данных, добавляем данные в визуализацию и настраиваем операторы, определяющие способ визуализации данных. Вот пример. Сначала просмотрите код, а затем продолжайте читать, чтобы понять, что делает каждая часть.

package {import flare.data.DataSet; import flare.data.DataSource; import flare.scale.ScaleType; импорт факел.вис.визуализация; импорт flare.vis.data.Data; import flare.vis.operator.encoder.ColorEncoder; import flare.vis.operator.encoder.ShapeEncoder; import flare.vis.operator.layout.AxisLayout; импорт flash.display.Sprite; импорт flash.events.Event; импорт flash.geom.Rectangle; импорт flash.net.URLLoader; [SWF (width = "800", height = "600", backgroundColor = "# ffffff", frameRate = "30")] Открытый класс Tutorial extends Sprite {private var vis: Visualization; публичная функция Tutorial () {loadData (); } закрытая функция loadData (): void {var ds: DataSource = new DataSource ("http://flare.prefuse.org/data/homicides.tab.txt", "tab"); var loader: URLLoader = ds.load (); loader.addEventListener (Event.COMPLETE, function (evt: Event): void {var ds: DataSet = loader.data как DataSet; визуализировать (Data.fromDataSet (ds));}); } приватная функция визуализации (данные: данные): void {vis = new Visualization (data); vis.bounds = новый прямоугольник (0, 0, 600, 500); vis.x = 100; vis.y = 50; AddChild (VIS); vis.operators.add (new AxisLayout ("data.date", "data.age")); vis.operators.add (новый ColorEncoder ("data.cause", Data.NODES, "lineColor", ScaleType.CATEGORIES)); vis.operators.add (новый ShapeEncoder ("data.race")); vis.data.nodes.setProperties ({fillColor: 0, lineWidth: 2}); vis.update (); }}}

Давайте посмотрим на каждый метод.
Конструктор прост: он просто вызывает loadData метод.
Ассоциация loadData Метод создает новый источник данных и загружает его, используя методы, описанные ранее. В этом случае набор данных об убийствах в округе Лос-Анджелес в 2007 году хранится в формате с разделителями табуляции. Когда загрузка завершена, загруженные кортежи данных добавляются в Data экземпляр с использованием fromDataSet удобный метод. Под капотом это приводит к созданию NodeSprites для визуализации каждого элемента данных. Наконец, visualize метод называется.
Ассоциация visualize Метод настраивает визуализацию. Вот что происходит на каждом этапе:

• Часть 1. Инициализация
  • Новая визуализация создана для данных
  • Мы устанавливаем границы для визуализации. Это определяет область макета.
  • Мы устанавливаем x и y положение нашей визуализации и добавить визуализацию в список отображения.
• Часть 2. Указание визуальных кодировок
  • Мы используем макет оси, помещая «дату» на оси X и «возраст» на оси Y. AxisLayout Оператор также автоматически настраивает оси для визуализации. Мы используем синтаксис «data.date» для обозначения переменных данных, так как они расположены внутри NodeSprite«s data имущество.
  • Мы добавляем цветовую кодировку, чтобы цвет линии узла представлял переменную «причина» (причина смерти). Мы также сообщаем цветовой кодировке, что значения переменной «причина» представляют категории (ScaleType.CATEGORIES). Цветовой кодер будет использовать эту информацию для автоматического выбора подходящей цветовой палитры. Как мы скоро увидим, вы также можете предоставить свою собственную цветовую палитру.
  • Мы добавляем кодировку формы, чтобы форма объекта представляла «расу» жертвы.
  • Мы устанавливаем свойства по умолчанию - мы устанавливаем цвет заливки узлов в полностью прозрачный и устанавливаем ширину линии 2 пикселя.
  • Наконец, мы называем update метод. Это запускает все операторы по порядку.

Обновление визуализации

Как только визуализация была создана, мы можем захотеть обновить ее. Например, может быть, мы хотели бы изменить цветовую кодировку, чтобы вместо этого визуализировать пол людей.
Сначала добавим новый метод в класс:

 приватная функция colorByGender (): void {var color: ColorEncoder = ColorEncoder (vis.operators [1]); color.source = "data.sex"; color.palette = new ColorPalette ([0xffff5555, 0xff8888ff]); vis.update (новый Transitioner (2)). play (); }

Этот способ:

1. Получает второй оператор (оператор с индексом 1) и переводит его в ColorEncoder
2. Изменяет source свойство цветового кодера для использования переменной «data.sex»
3. Устанавливает новую цветовую палитру (в данном случае красный для женщин, синий для мужчин - порядок цветов соответствует алфавитному порядку надписей)
4. Анимирует изменения, вызывая обновление с Transitioner установить для двухсекундной анимации. vis.update метод возвращает Transitioner, поэтому мы можем вызвать play на возвращаемое значение обновления. (Примечание: вы также можете опустить Transitioner и просто передайте число 2 в качестве аргумента update, новый Transitioner будет создан автоматически и возвращен.)

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

 // добавить кликабельную метку var button: TextSprite = new TextSprite ("Color by Gender"); AddChild (кнопка); button.x = 710; button.y = 50; button.buttonMode = true; button.addEventListener (MouseEvent.CLICK, function (evt: MouseEvent): void {colorByGender ();});

Этот код:

1. Создает новую текстовую метку (TextSprite это вспомогательный класс из flare.display пакет)
2. Добавляет метку в приложение и устанавливает ее позицию
3. Наборы buttonMode в значение true (при наведении курсора на ярлык появляется курсор в виде руки)
4. Добавляет прослушиватель событий, который срабатывает при нажатии метки. Мы добавляем функцию обратного вызова, которая вызывает colorByGender метод.

Чтобы приведенный выше код работал, нам нужно включить эти дополнительные операторы импорта в верхней части файла:

 импорт flash.events.MouseEvent; импорт flare.animate.Transitioner; import flare.display.TextSprite; import flare.util.palette.ColorPalette;

Теперь вы сможете скомпилировать и запустить приложение. Нажатие на метку «Цвет по полу» должно оживить изменение цветовой кодировки.

Следующие шаги

Приведенные выше примеры показывают основы Flash и библиотеки Flare, но есть еще много функций, которые еще предстоит рассмотреть. В дальнейшем мы рекомендуем (а) осмотреть вспышку и вспышку API документация, чтобы получить представление обо всех доступных классах, и (b) копаться в демонстрационных материалах Flare, чтобы увидеть, как те же принципы, показанные здесь, могут быть использованы для построения ряда других визуализаций. Или, что еще лучше, покопайтесь в исходном коде Flare, чтобы узнать, что происходит внутри.
Чтобы помочь в этом процессе, вот общий обзор подпакетов в flare.vis:

• flare.vis.axis: предоставляет оси, метки и линии сетки
• flare.vis.controls: обработчики взаимодействия для выбора, масштабирования и многого другого
• flare.vis.data: визуальные объекты, которые представляют элементы данных
• flare.vis.data.render: сменные рендеры, которые рисуют DataSprites
• flare.vis.events: типы событий, используемые в рамках вспышки
• flare.vis.legend: представляет легенды для описания визуальных кодировок
• flare.vis.operator: строительные блоки для определения визуализаций
• flare.vis.palette: палитры для значений цвета, формы и размера
• flare.vis.util: общие служебные классы

Теперь вы должны знать достаточно, чтобы разобраться в демо в flare.demos пакет. Не стесняйтесь играть, изменять, копировать, вставлять и создавать демонстрационные версии, чтобы лучше понять, как работают Flash и Flare.

Ссылки

Скачать

Инструменты

Другие технические руководства

Поддержка

Источник: https://blokt.com/tool/prefuse-flare