Визуализируем данные на JavaScript

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

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

Разумеется, вы можете воспользоваться Flash, Silverlight или Java-апплетами, однако в этом обзоре я хотел бы вам показать библиотеки визуализации, написанные на чистом JavaScript.

1. JavaScript Information Visualization Toolkit (JIT)

JIT поставляется с четырьмя утилитами:

1. RGraph — круговые деревья с симпатичной анимацией;
2. Treemaps — отображение больших иерархичных структур на ограниченном пространстве;
3. Hyperbolic Trees — метод визуализации, который лучше всего подходит для представления связанных данных;
4. Spacetree — расширение контекстно-связанных узлов из общего дерева;

Посетите домашнюю страницу или посмотрите на один из примеров.

2. MIT Simile Web Widgets

С помощью данного набора инструментов можно создавать визуализации цифровых наборов данных (временные шкалы, например).

1. Timeplot — визуализация происходящих событий с течением времени;
   
2. Timeline — визуализирование событий (Google Maps для информации о событиях)
   

На домашней странице проекта вы можете обнаружить документацию и посмотреть некоторые примеры работы библиотеки.

3. MooWheel

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

Посмотрите на домашнюю страницу проекта и на красивый пример.

4. JSViz

Данная библиотека упрощает вам жизнь при генерации 2D-представлений информации: сетевых графов, навигации и т.п. Стоит взглянуть на два примера:

1. Музыкальные рекомендации
   
   
2. Направленный граф
   
   
   

Другие примеры и документация есть на домашней странице.

5. Chronoscope

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

1. Widget — позволяет поместить график на любую страницу;
2. Microformats — самостоятельно распознаёт данные, заключённые в элементе table. Самый простой способ добавлять комментарии к графикам;
3. JavaScript API — использование JavaScript для модификации графиков на лету;
4. GWT API — интеграция с Google Web Toolkit.

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

6. Processing.js

Processing.js — это портированный в JavaScript Processing. Некоторые из методов, которые поддерживает библиотека:

1. Рисование контуров;
2. Математические функции;
3. Доступ к мыши и клавиатуре;
4. Рисование изображений;
5. Управление цветом.

Помимо них, есть и много других, о которых можно прочитать на странице проекта.

Выводы

Вы наверняка посмотрели примеры работы некоторых скриптов. Как вы могли заметить, некоторые из них ещё находятся в экспериментальной стадии своего развития, поэтому испытывают проблемы с производительностью. Тем не менее, я уверен, что настанет время, когда мы увидим гораздо больше скриптов для представления данных в Web, а браузеры научатся их быстро выполнять.