Развитие компьютерной графики подталкивает нас к изобретению всё новых способов графического представления данных. Разрабатывались различные прикладные программы для визуализации данных на локальных компьютерах. Однако всё изменилось с развитием интернета: в нём содержатся колоссальные объёмы информации, которые нам постоянно хочется представить как-то удобнее, дружелюбнее, понятнее. Что же мы имеем на сегодняшний день?
Существует немалое число серверных библиотек и утилит, способных генерировать сложные графики. Однако я считаю, что такой подход не всегда оптимален. Если мы можем производить визуализацию на стороне клиента с помощью JavaScript, то почему бы нам не воспользоваться такой возможностью? Логика работы подобной связки проста: сервер генерирует данные, а клиент их визуализирует.
Разумеется, вы можете воспользоваться Flash, Silverlight или Java-апплетами, однако в этом обзоре я хотел бы вам показать библиотеки визуализации, написанные на чистом JavaScript.
1. JavaScript Information Visualization Toolkit (JIT)
JIT поставляется с четырьмя утилитами:
- RGraph — круговые деревья с симпатичной анимацией;
- Treemaps — отображение больших иерархичных структур на ограниченном пространстве;
- Hyperbolic Trees — метод визуализации, который лучше всего подходит для представления связанных данных;
- Spacetree — расширение контекстно-связанных узлов из общего дерева;
2. MIT Simile Web Widgets
С помощью данного набора инструментов можно создавать визуализации цифровых наборов данных (временные шкалы, например).
- Timeplot — визуализация происходящих событий с течением времени;
- Timeline — визуализирование событий (Google Maps для информации о событиях)
3. MooWheel
MooWheel предлагает красивый способ визуализации данных с помощью canvas. Вы можете использовать её для отображения связей между людьми, местами, вещами и т.д.
Посмотрите на домашнюю страницу проекта и на красивый пример.
4. JSViz
Данная библиотека упрощает вам жизнь при генерации 2D-представлений информации: сетевых графов, навигации и т.п. Стоит взглянуть на два примера:
Другие примеры и документация есть на домашней странице.
5. Chronoscope
Это, пожалуй, один из самых умных и мощных, но в то же время сложных средств визуализации. Он хорошо показал себя в работе с большими объёмами данных, обеспечив интуитивное представление данных. Вы можете применять Chronoscope четырьмя разными способами:
- Widget — позволяет поместить график на любую страницу;
- Microformats — самостоятельно распознаёт данные, заключённые в элементе table. Самый простой способ добавлять комментарии к графикам;
- JavaScript API — использование JavaScript для модификации графиков на лету;
- GWT API — интеграция с Google Web Toolkit.
6. Processing.js
Processing.js — это портированный в JavaScript Processing. Некоторые из методов, которые поддерживает библиотека:
- Рисование контуров;
- Математические функции;
- Доступ к мыши и клавиатуре;
- Рисование изображений;
- Управление цветом.
Выводы
Вы наверняка посмотрели примеры работы некоторых скриптов. Как вы могли заметить, некоторые из них ещё находятся в экспериментальной стадии своего развития, поэтому испытывают проблемы с производительностью. Тем не менее, я уверен, что настанет время, когда мы увидим гораздо больше скриптов для представления данных в Web, а браузеры научатся их быстро выполнять.