Как стать автором
Обновить

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

JavaScript
Перевод
Автор оригинала: Richard Wong

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

Существует немалое число серверных библиотек и утилит, способных генерировать сложные графики. Однако я считаю, что такой подход не всегда оптимален. Если мы можем производить визуализацию на стороне клиента с помощью 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 — визуализация происходящих событий с течением времени;
  2. Timeline — визуализирование событий (Google Maps для информации о событиях)
На домашней странице проекта вы можете обнаружить документацию и посмотреть некоторые примеры работы библиотеки.

3. MooWheel


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

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

4. JSViz


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

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

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




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

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, а браузеры научатся их быстро выполнять.
Теги:JavaScriptvisualizationdatalibraryanother funny tag
Хабы: JavaScript
Всего голосов 74: ↑72 и ↓2 +70
Просмотры4K

Похожие публикации

JavaScript Developer
от 2 700 €DiscoМожно удаленно
JavaScript разработчик
от 170 000 до 300 000 ₽WeMakeTeamМожно удаленно
Javascript разработчик
от 160 000 до 220 000 ₽ArtezioМосква
Javascript разработчик
от 2 000 $ArtezioВитебск
JavaScript разработчик
от 180 000 ₽SportrecsМоскваМожно удаленно

Лучшие публикации за сутки