Спалах | Візуалізація даних для Інтернету

Flare дозволяє легко створювати інтерактивні візуалізації даних

Щоб розпочати власну візуалізацію, завантажити відблиск - - і попрацюйте з підручником нижче. Потрібна додаткова допомога? Відвідайте довідковий форум (вам знадобиться SourceForge логін для публікації).

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

додатків

Сповіщення

• 2010.10.07: Розробка флеш-файлів відкрита для спільноти, а джерело перенесено з 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. Налаштування робочого середовища розробки флеш-пам'яті. Є два підходи. Ми рекомендуємо перший для простоти, але більш досвідчені користувачі можуть використовувати другий підхід.
   • Варіант 1 (простіший): Встановіть Adobe Flex Builder.
     • Це повноцінне середовище розробки програм ActionScript / Flex. Він доступний для всіх основних платформ (Windows, Mac, Unix). Користувачі, які вже використовують IDE Eclipse, можуть також встановити Flex Builder як плагін Eclipse.
     • Застереження щодо використання Flex Builder полягає в тому, що це комерційне програмне забезпечення, яке буде працювати лише протягом обмеженого пробного періоду. Однак Adobe надає безкоштовні ліцензії Flex Builder студентам університету, викладачам та персоналу.
   • Варіант 2 (більш складний): Встановіть безкоштовний Flex SDK
     • Це встановить базові компілятори ActionScript / Flex: mxmlc та compc. Потім ви можете налаштувати власне середовище збірки, наприклад, використовуючи make or ant будувати системи. Факел упакований з build.xml файл для використання з Апач Мураха побудувати систему. Після встановлення мурахи просто відкрийте build.xml файл у текстовому редакторі, змініть перші кілька рядків, щоб вказати на ваш Flex SDK встановлення та використання ant складати бібліотеки. Ми використовуємо мурашині завдання Adobe Labs для розробки Flex.
     • Перевага такого підходу полягає в тому, що все програмне забезпечення є безкоштовним і не втрачає чинність у вас. Однак ви втрачаєте такі функції, як автоматична компіляція, управління проектами та автозаповнення, надані Flex Builder.
2. Завантажте бібліотеки спалаху prefuse.
   • Завантажується zip-файл, що містить набір проектів бібліотеки ActionScript. Якщо ви використовуєте Flex Builder, розпакуйте файли у ваш основний каталог робочої області. Під час підручника ми будемо імпортувати їх у Flex Builder і використовувати для побудови візуалізацій!
   • На даний момент програмне забезпечення є альфа-версією, тому слід очікувати деяких помилок та обмежень. Ми усунемо проблеми якомога швидше, а посилання вище завжди вказуватиме на останню версію.

Вступ до Flash та ActionScript 3

Flash є чудовим середовищем для інтерактивної графіки, і з недавнім додаванням мови програмування ActionScript 3 він став набагато потужнішим та ефективнішим. Хоча повний вступ до AS3 виходить за рамки цього посібника, ось кілька корисних вам ресурсів:

• Adobe надає Огляд AS3 із посиланнями на додаткові ресурси.
• Основний ActionScript 3 Коліна Мука з видавництва O'Reilly - чудова книга, яка допоможе вам розпочати. Ти можеш отримати доступ до нього тут (деякі установи, наприклад університети, надають доступ безкоштовно).
• Посилання на API Adobe Flex є безцінним для розуміння різних доступних класів та методів. Ми будемо зосереджені лише на заняттях в 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 class є найбільш корисним, загальним візуальним об'єктом, що використовується Flash Player. Спрайти - це візуальні об'єкти, які містять як вміст малюнка, так і можуть служити контейнером для підвузлів у списку відображення ( Sprite підкласи класу flash.display.DisplayObjectContainer клас). На відміну від них Shape клас може містити вміст малювання, але не може містити підвузлів. Як результат, фігури витрачають менше пам'яті, але набагато менш гнучкі. Для простоти в цьому підручнику ми зупинимось на спрайтах.

Створіть новий додаток

Спочатку створимо нову програму Flash. Для цього відкрийте Flex Builder і переконайтесь, що ви перебуваєте в перспективі “Flex Development” (часто досягається натисканням чорно-білого значка “Fx” у верхньому правому куті).
На панелі «Навігатор» ліворуч клацніть правою кнопкою миші на дисплеї та виберіть «Створити> Проект ActionScript». У діалоговому вікні, що з’явиться, введіть “Підручник” як назву проекту, а потім натисніть “Готово”. Це створить для вас новий проект.
Тепер ви повинні побачити папку “Підручник” на панелі “Навігатор”. У цій папці ви повинні побачити файл із назвою “Tutorial.as”. Це ваш основний файл програми. Відкрийте, якщо він ще не відкритий.
Усередині файлу ви побачите основні риштування для цього класу:

пакет {import flash.display.Sprite; підручник з публічного класу розширює Sprite {підручник з публічної функції () {}}}

Зверніть увагу, що цей клас розширює Sprite клас. Оскільки це наш основний клас програми, коли ми запускаємо програму екземпляром Tutorial клас буде автоматично доданий до списку відображення як його root (одна і єдина дитина Stage).
Також зверніть увагу, що конструктор було автоматично створено. Цей конструктор буде викликаний при запуску програми. Для тих, хто знайомий з мовами програмування, такими як C, C ++ або Java, конструктор для класу додатків діє як a main функціонують у цих інших мовах.
За допомогою цього нового додаткового лісу на місці ми можемо розпочати гру з візуальними об’єктами. Однак є одне, що ми хочемо зробити спочатку. Додайте новий рядок безпосередньо над оголошенням класу (”public class Tutorial…”) Рядок, який говорить:

[SWF (ширина = "800", висота = "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 в координатному просторі нашого спрайта.
• По-третє, ми додаємо спрайт як нащадок нашого основного додатка (a Tutorial спрайт).
• По-четверте, ми встановлюємо x та y положення нашого спрайту.
• По-п’яте, ми додаємо деякі результати налагодження. trace друкує рядок на консолі. Цей результат відображається лише під час запуску програми в режимі “налагодження”.

Ось код:

пакет {import flash.display.Sprite; [SWF (width = "800", height = "600", backgroundColor = "# ffffff", frameRate = "30")] підручник із відкритого класу розширює 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 (спрайт); спрайт.x = 50; спрайт.y = 50; trace ("наш спрайт знаходиться за адресою:" + sprite.x + "," + sprite.y); }}}

Запустіть програму (клацніть правою кнопкою миші “Tutorial.as” та виберіть “Запустити як> Flex Application”). У верхньому лівому куті ви побачите сіре коло з чорними контурами, центром якого є точка 50, 50. Якщо ви запускаєте програму в режимі налагодження (виберіть “Налагодження як> Flex додаток”), ви також побачите рядок “наш спрайт знаходиться на рівні: 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); спрайт.x = x; спрайт.y = y; повернути спрайт; }

Далі ми замінюємо код у нашому конструкторі. Спочатку ми створюємо новий спрайт під назвою контейнер, який будемо використовувати для зберігання колекції кіл. Ми розміщуємо це в центрі нашої сцени. По-друге, ми використовуємо петлю для створення групи кіл. Тут ми симетрично вирівнюємо кола навколо точки 0,0 батьківського контейнера. Наш новий конструктор тепер виглядає так:

 загальнодоступна функція Підручник () {var контейнер: Sprite = новий Sprite (); контейнер.x = 400; контейнер.y = 300; this.addChild (контейнер); для (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.animate пакет, щоб допомогти зробити це легко. По-перше, нам потрібно імпортувати бібліотеки відблисків для використання у Flex Builder.

Імпорт бібліотек

Перш ніж продовжувати, переконайтеся, що бібліотеки відблисків завантажені як проекти в Flex Builder. Ви вже мали розпакувати файли відблисків у головному каталозі робочої області Flex Builder. Наступним кроком є ​​імпорт їх у середовище Flex Builder:

• Переконайтеся, що ви перебуваєте у перспективі “Flex Development”.
• Клацніть правою кнопкою миші панель навігатора ліворуч.
• Виберіть “Імпорт ...” у спливаючому меню.
• У діалоговому вікні виберіть «Загальне> Наявні проекти у робочій області» та натисніть кнопку «Далі».
• Використовуйте віджети “Вибір кореневого каталогу”, щоб перейти до каталогу робочої області Flex Builder
• Тепер ви повинні побачити факельні проекти, перелічені на панелі «Проекти:».
• Виберіть проекти «flare» та «flare.demos», а потім натисніть кнопку «Finish».

Тепер ви повинні побачити проекти відблиску на панелі Навігатора. Тепер ви можете переглядати вихідний код для кожної бібліотеки та демонстраційних версій.

Огляд бібліотеки факелів

Ось короткий огляд набору інструментів для спалаху. Всередині flare проекту, загляньте всередину папки “src / flare”. Ви знайдете ряд пакетів, що забезпечують різні функції:

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

Існує також flare.demos проект, який містить ряд прикладів створення компонентів Flare.

Імпорт бібліотеки в рамках іншого проекту

Щоб використовувати спалах у власних проектах, вам потрібно буде оновити налаштування проекту. Ось як це зробити:

1. На панелі Навігатора клацніть правою кнопкою миші верхню папку проекту “Підручник”
2. Клацніть «Властивості» у контекстному меню
3. У діалоговому вікні, що з’явиться, натисніть “Шлях побудови ActionScript” на лівій панелі (це повинен бути 3-й елемент зверху)
4. Клацніть на вкладці “Шлях бібліотеки” на правій панелі
5. Натисніть кнопку «Додати проект»
6. Тепер ви повинні побачити список проектів, включаючи спалах.
7. Виберіть “flare” і натисніть “OK”

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

Базова анімація: Твін, послідовність та паралель

Гаразд, тепер давайте оживляти! flare.animate.Transition class - базовий клас для всіх анімацій. Важливі підкласи Transition є Tween, Sequence та Parallel переходи. Твіни використовуються для анімації властивостей одного об'єкта. Послідовності використовуються для запуску серії анімацій по порядку. Паралельні переходи запускають колекцію переходів одночасно. Почнемо з Твіна.

Властивості об'єкта Tweening

Основи класу Tween прості: ми беремо об’єкт, надаємо набір значень властивостей, які ми хотіли б змінити з часом, і вказуємо тривалість часу для цієї зміни. Використовуючи програму «Підручник» з частини 1, повернемо об’єкт контейнера. Додайте наступний рядок у кінець конструктора класу Підручник:

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

Крім того, переконайтеся, що у вас є новий оператор імпорту у верхній частині вашого класу, щоб компілятор знав, про що ви говорите. Додайте це до списку імпорту:

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

(ПРИМІТКА: іноді Flex Builder автоматично додає для вас оператор імпорту, коли ви вводите нову назву класу. Якщо ні, інший спосіб полягає в тому, щоб навести курсор на В кінці нового назви класу та введіть “Ctrl-Space” - це має створити для вас новий імпорт для класу.)
Тепер запустіть свою програму - точки повинні обертатися по колу протягом 3 секунд.
Ось що робить конструктор Tween:

• Перший аргумент - це об’єкт, значення якого слід покращити
• Другим аргументом є тривалість анімації в секундах
• Третій аргумент - це екземпляр Object із переліком властивостей для анімації та їх цільових значень.
  • Назви властивостей повинні точно відповідати властивостям введеного об'єкта.
  • Вкладені властивості дозволені, але їх потрібно вкладати в лапки. Наприклад, {“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 = новий Tween (контейнер, 1, {y: 100}); var t2: Tween = новий Tween (контейнер, 1, {масштабX: 2}); var t3: Tween = новий Tween (контейнер, 1, {y: 300}); var t4: Tween = новий Tween (контейнер, 1, {масштабX: 1}); var seq: Послідовність = нова послідовність (нова паралель (t1, t2), нова паралель (t3, t4)); seq.play ();

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

 імпорт flare.animate.Parallel; імпорт flare.animate.Sequence;

Це створює чотири підлітка: t1, t2, t3 та t4. Потім він створює два паралельні переходи, які виконуються t1 та t2 разом і бігти t3 та t4 разом. Потім паралельні переходи виконуються один за одним послідовно. Таким чином, легко створювати більш складні анімації.
Щоб отримати більш досконалу композиційну анімацію, погляньте на FlareLogo та flare.demos.Animation заняття в flare.demos Проект.

Пакетна анімація з перехідниками

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

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

Цей приклад анімує всі спрайти в container до нового випадкового y положення і випадковий вертикальний коефіцієнт масштабу. Спочатку ми створюємо нове Transitioner що має створити 2-секундну анімацію. Потім ми прокручуємо кожен дочірній спрайт і використовуємо перехідник, щоб встановити властивості Tween.
Перехідника $ оператор вказує, що ми хочемо встановити цільове значення для вхідного об'єкта. За замовчуванням або новий Tween створюється або вже існує Tween знайдено для поточного елемента. $ Потім оператор повертає об'єкт, для якого встановлюється цільова властивість tween.
Крім того, перехідники можна використовувати для створення статичних (не анімованих) переходів. Якщо перехідник immediate властивість має значення true, це не створюватиме нових Tweens. Натомість оператор $ просто поверне введене значення. Це означає, що ви можете створювати методи, які оновлюють значення за допомогою перехідника, а потім пізніше контролювати, чи потрібно ці значення оновлювати. Стандартний “негайний режим” Transitioner отримується за допомогою статики Transitioner.DEFAULT майно. Таким чином, вам не потрібно виділяти нове Transitioner під час негайного оновлення.
Перехідники широко використовуються по всьому flare.vis пакет, що дозволяє дизайнерам візуалізації контролювати, які оновлення слід анімувати і як.

Частина 3: Візуалізації

Завантаження даних

Основне представлення даних для Flare просто використовує вбудовані типи даних Flash: Object та Array. Наприклад, таблицю даних можна просто представити у вигляді масиву об'єктів, котрий кожен об'єкт містить імена та значення кожного поля даних. Хоча можливі більш ефективні уявлення, цей підхід забезпечує найбільшу гнучкість, одночасно використовуючи переваги існуючих конвенцій про розробку Flash.
Для завантаження даних у програвач Flash існує кілька підходів. Простий підхід - це вбудування ваших даних у саму програму. Таким чином, дані завантажуються разом із додатком, що чудово для статичних наборів даних. Наприклад, ви можете використовувати нотацію об’єктів ActionScript, щоб визначити набір даних безпосередньо як змінну:

дані var: 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. На даний момент підтримуються формати файлів - текст, розділений табуляцією ("tab", стандартний формат файлу для експорту даних із таких інструментів, як Excel), Позначення об'єкта JavaScript (“Json”, загальний формат даних для веб-додатків) та GraphML (“Graphml”, an XML формат для представлення мереж з вузлами та ребрами).
Віддалені дані завантажуються відблиском за допомогою flare.data.DataSource клас. Ось приклад використання його для завантаження файлу даних, розділеного табуляцією:

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

Команда DataSource конструктор має два обов’язкові аргументи: url набору даних та рядок, що вказує формат файлу. Зараз підтримуються формати “tab” (з роздільниками табуляції), “json” (позначення об’єкта JavaScript) та “graphml” (GraphML).
Для наборів даних, схема яких (імена та типи даних полів) можуть бути незрозумілими, існує також третій, необов’язковий аргумент конструктора, який приймає DataSchema типу. Див flare.data.DataSchema та flare.data.DataField заняття для більше. Схема може бути корисною для забезпечення того, щоб значення даних були правильно названі (наприклад, для файлу, розділеного табуляцією, у якому відсутній рядок заголовка), і перетворені у відповідні типи даних (наприклад, для даних JSON, числові значення яких були загорнуті в лапки).
Для фактичного завантаження даних викликається метод завантаження DataSource, який повертає a flash.net.URLLoader інстанції. Завантажувач можна використовувати для відстеження прогресу завантаження (наприклад, якщо ви хочете надати індикатор прогресу) і надає повідомлення про подію, коли завантаження завершено. У наведеному вище прикладі ми додаємо прослуховувач подій, який отримуватиме повідомлення про завершення завантаження. DataSource автоматично проаналізує вхідні дані, відобразить їх на об'єкти ActionScript і збереже результати в flare.data.DataSet об'єкт. DataSet клас може представляти як табличні, так і мережеві (вузол / край) дані.

Створення та управління візуальними об'єктами

Тепер ми хотіли б візуалізувати набір даних. Для цього ми відображаємо окремі записи даних у візуальні елементи. Flare надає набір візуальних об’єктів, що представляють дані. Ось огляд основних класів, наданих flare.vis.data пакет.

• DataSprite: Базовий клас для спрайтів, які візуально представляють дані. DataSprite є підкласом Flash Player Sprite клас. DataSprite включає в себе a data властивість, де зберігається кортеж даних (об'єкт ActionScript), а також надає додаткові візуальні змінні, крім тих, що підтримуються основними спрайтами, включаючи кольори, форми та поля розміру та підтримку встановлення позицій у полярних координатах.
• NodeSprite: DataSprite екземпляр, що представляє вузол. Це тип за замовчуванням, який використовується для візуалізації даних. NodeSprite Екземпляри можуть бути з'єднані всередині мережевих або деревних структур за допомогою EdgeSprite екземпляри.
• EdgeSprite: DataSprite екземпляр, що представляє ребро. Ан EdgeSprite з'єднує два NodeSprites. Вузли доступні через source та target властивості. EdgeSprites використовуються для створення графіків та дерев, а також для подання ліній, наприклад у графіках часових рядів.

Як правило, NodeSprites та EdgeSprites створюються та зберігаються в flare.vis.data.Data клас, який керує усіма візуальними елементами для однієї візуалізації. Data Клас забезпечує методи створення нових візуальних об'єктів для кортежів даних та представлення структури графіків.
Команда Data клас також надає методи обходу та оновлення вміщених елементів даних. nodes та edges властивості повертають списки вузлів і ребер, що містяться в даних. Кожен із цих списків включає a visit метод, який дозволяє передавати функцію, яка потім буде викликана з кожним вузлом або ребром. Крім того, setProperty та setProperties методи дозволяють встановлювати значення властивостей для всіх вузлів або ребер одночасно. Ці методи додатково приймають a Transitioner як аргумент, щоб ви могли анімувати оновлення властивостей.
Наприклад, наступний код призводить до односекундної анімації, в якій колір рядка для всіх вузлів встановлений у синій. (Зверніть увагу, що шістнадцяткове позначення для DataSprite значення кольорів включають альфа-канал, а також червоний, зелений, синій канали).

data.nodes.setProperty ("lineColor", 0xff0000bb, новий перехідник (1)). play ();

Списки вузлів і ребер також підтримують значення властивостей за замовчуванням, використовуючи setDefault, setDefaults, removeDefault та clearDefaults методи. Значення за замовчуванням будуть встановлені для вузла або краю, щойно створеного за допомогою класу даних ' addNode or addEdgeFor методи
Команда Tree class є підкласом Data, спеціалізований для представлення дерева, а не загального графіка. Data клас підтримує автоматичне створення a Tree екземпляр шляхом обчислення охоплюючих дерев загального графіка. Ряд методів створення обширного дерева - включаючи алгоритми першого по ширині, глибинного та мінімального обширного дерев - можна передавати як параметр. Ці розрахунки виконуються за допомогою flare.analytics.graph.SpanningTree клас.
Для фактичного створення об'єктів вузлів та ребер ми використовуємо файл addNode та addEdgeFor методи

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

Ось простий приклад для створення NodeSprites для табличного набору даних, припускаючи, що ми маємо масив об’єктів даних:

var список: масив; // масив об’єктів даних, які ми вже завантажили var data: Data = new Data (); // новий контейнер даних для кожного (var o: Об’єкт у списку) {data.addNode (o); }

Результат - а Data об'єкт, заповнений візуально DataSprite (вузли або ребра).
На практиці не завжди потрібно заповнювати візуалізовані дані вручну. Для створення Data об'єкт для візуалізації завантаженого набору даних, ви часто можете використовувати замість цього зручний метод. Data.fromArray() функція створює a Data для табличних даних, що зберігаються як масив об'єктів ActionScript, тоді як Data.fromDataSet() метод аналогічним чином створює a Data екземпляр із завантаженого DataSet об'єкт

Побудова візуалізації

А тепер давайте складемо все це, щоб почати робити візуалізації. Visualization клас представляє одну візуалізацію, включаючи візуальні позначки (зберігаються в Data екземпляр) та осей. Для створення візуалізації ми завантажуємо набір даних, додаємо дані у візуалізацію та налаштовуємо оператори, які визначають спосіб візуалізації даних. Ось приклад. Спочатку перегляньте код, а потім читайте далі, щоб зрозуміти, що робить кожна частина.

пакет {import flare.data.DataSet; імпорт flare.data.DataSource; імпортувати flare.scale.ScaleType; імпорт flare.vis.Visualization; імпорт flare.vis.data.Data; імпортувати flare.vis.operator.encoder.ColorEncoder; імпортувати flare.vis.operator.encoder.ShapeEncoder; імпортувати 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")] підручник відкритого класу розширює Sprite {private var vis: Visualization; загальнодоступна функція Tutorial () {loadData (); } приватна функція loadData (): void {var ds: DataSource = new DataSource ("http://flare.prefuse.org/data/homicides.tab.txt", "tab"); завантажувач var: URLLoader = ds.load (); loader.addEventListener (Event.COMPLETE, функція (evt: Event): void {var ds: DataSet = loader.data as DataSet; visualize (Data.fromDataSet (ds));}); } приватна функція візуалізації (дані: Дані): void {vis = нова Візуалізація (дані); vis.bounds = новий прямокутник (0, 0, 600, 500); vis.x = 100; vis.y = 50; addChild (vis); vis.operators.add (новий 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с data власність
  • Ми додаємо кольорове кодування, щоб колір лінії вузла представляв змінну “причина” (причина смерті). Ми також повідомляємо кольоровому кодеру, що значення змінної “причина” представляють категорії (ScaleType.CATEGORIES). Кодер кольору використовуватиме цю інформацію для автоматичного вибору відповідної кольорової палітри. Як ми скоро побачимо, ви також можете запропонувати власну палітру кольорів.
  • Ми додаємо кодування фігури, щоб форма об’єкта представляла “расу” жертви.
  • Встановлюємо властивості за замовчуванням - встановлюємо колір заливки вузлів на повністю прозорий і встановлюємо ширину рядка на 2 пікселі.
  • Нарешті, ми називаємо update метод. Це запускає всі оператори в порядку.

Оновлення візуалізації

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

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

Цей спосіб:

1. Отримує другий оператор (оператор з індексом 1) і передає його в a ColorEncoder
2. Змінює source властивість кольорового кодера використовувати змінну “data.sex”
3. Встановлює нову кольорову палітру (у цьому випадку червоний для жінок, синій для чоловіків - порядок кольорів відповідає алфавітному порядку ярликів)
4. Анімує зміну, викликаючи оновлення за допомогою Transitioner встановлений для анімації на дві секунди. vis.update метод повертає Transitioner, тому ми можемо викликати відтворення на повернене значення оновлення. (Примітка: ви також можете опустити Transitioner і просто передайте число 2 як аргумент update, новий Transitioner буде створено автоматично та повернуто.)

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

 // додаємо натиснуту кнопку мітки var: TextSprite = new TextSprite ("Колір за статтю"); addChild (кнопка); button.x = 710; button.y = 50; button.buttonMode = true; button.addEventListener (MouseEvent.CLICK, функція (evt: MouseEvent): void {colorByGender ();});

Цей код:

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

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

 імпортувати flash.events.MouseEvent; імпорт flare.animate.Transitioner; імпортувати flare.display.TextSprite; імпортувати 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.

зв'язку

Завантаження

Tools

Інші технічні керівництва

Підтримайте

Джерело: https://blokt.com/tool/prefuse-flare