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

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

http://thejit.org/static/v20/img/marquee/sunburst.png

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

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

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

1. JavaScript Information Visualization Toolkit (JIT)


JIT

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

 

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

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

 

2. MIT Simile Web Widgets

 

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

 

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

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

 

3. MooWheel


MooWheel"

MooWheel предлагает красивый способ визуализации данных с помощью

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

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

 

4. JSViz

 

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

 

  1. Музыкальные рекомендации

    Направленный граф

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

домашней странице

.

 

5. Chronoscope


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, а браузеры научатся их быстро выполнять.

Автор перевода: dinamyte



Опубликовал admin
6 Авг, Пятница 2010г.



Программирование для чайников.