Продвинутая визуализация данных на JavaScript

31 июля 2009, 13:04 Павел Марковнин JavaScript рейтинг +20-

Визуализация информацииПривет!

Сегодня у нас в программе различные библиотеки для непростой визуализации данных. Почему непростой? Ну потому что про простую мы уже писали, когда рассматривали скрипты для построения диаграмм и графиков.

В этой же статье мы рассмотрим более сложные штуковины, например, построение графов и временных шкал.

InfoViz

InfoViz

Классная библиотека для построения и манипуляции графами и деревьями. Кроме того, она так же позволяет делать анимацию этих самых деревьев. Для чего вам может понадобиться такая библиотека? Ну, например, для построения наглядных связей между любыми объектами (людьми, событиями и так далее) или, скажем, нахождения равновесия в игре в развернутой форме.

Timeline от Simile Web Widgets

Simile Timeline

Потрясающий скрипт для визуализации событий, которые так или иначе привязаны к времени. Вам нужно вывести график событий компании на ближайший год? Или посмотреть свое расписание на сегодня? Этот скрипт поможет вам без проблем сделать красивый график и того, и другого.

Так же обратите внимание на TimePlot, Runway и Exhibit — отличные скрипты.

MooWheel для Mootools

mooWheel

Плагин для фреймворка Mootools, который так же позволит вам показать связь между разными объектами, событиями или людьми. Скрипт использует объект <canvas> для вывода.

Скрипт вам понравился, но в своем проекте вы используете jQuery? Нет проблем, есть плагин и для этого фреймворка — jConnecter.

JSViz

JSViz

Скрипт позволит вам без труда представить динамичную информацию, будь то графы, сети или любые другие данные. Посмотрите эти два примеры и вы все поймете сами:

Chronoscope

Chronoscope

Отличный скрипт для построения сложных графиков. В свой проект его можно добавить как виджет, с помощью микроформатов, с помощью JS API или интегрировать с вашим проектом на Google Web Toolkit.

Processing.js

processing.js

Это своеобразный фреймворк для манипуляции картинками, создания анимации и представления информации без использования флеша или Java апплетов. С помощью javascript, элемента <canvas> и простого языка вы можете создавать интерактивные веб-интерфейсы, представлять информацию в удобном и понятном виде, и создавать игры.

Посмотрите на некоторые примеры, чтобы оценить все возможности этого фреймворка:

Sparklines для jQuery 

Sparklines

Этот плагин позволяет вам создавать маленькие графики прямо внутри текста. Для чего такое может пригодиться? Например для баннеров, виджетов, индикаторов и многого другого.

Рекламное место, которое может стать вашим

Понравилась статья?

Тогда подпишись на обновления через RSS или воспользуйся
другими способами подписки.

Читать в Яндекс.Ленте Добавить в Google Добавить в Netvibes
  •  

Комментарии — 7

RSS
  • Аватарка
    31 июля 2009 в 14:00 Сашко
    Мой моск не выдержал и лопнул :)
    Буду вникать заново
  • Аватарка
    31 июля 2009 в 22:42 ]]>adw0rd]]>
    Веселые шары :)
  • Аватарка
    1 августа 2009 в 11:58 ]]>Glam]]>
    визуализация активности читателей и летающий шарики взрывают моск :)
    По поводу читателей, можно было бы их еще приближать - вот тогда я бы сделал пару приложений для своих сайтов, но пока сыровато, а может и я не вникал.
  • Аватарка
    3 августа 2009 в 9:49 ]]>mongoose]]>
    Timeline от Simile Web Widgets - хоршпя вещь. Юзали на одном проекте.
  • Аватарка
    9 сентября 2009 в 9:28 Face
    Ну визуализация активности читателей ясна для чего, а шарики?
  • Аватарка
    9 сентября 2009 в 12:49 ]]>Grin]]>
    А шарики просто как иллюстрация возможностей )
  • Аватарка
    18 мая в 10:12 ]]>Эсъюдс]]>
    Мне очень нравится MooWheel для Mootools и даже пробовал ее в ДЕНВЕР. Однако, дальше этого не пошло, ведь хотел показывать результаты в WordPress блоге, а тут начались проблемы.
  • Эл. почта (используется для Граватарки)
  • Домашняя страница
  • Имя в Твиттере
  • Разрешенные теги Текст сообщения (надо бы заполнить это поле)
  • как выглядит какой тег
    жирный текст <b>жирный текст</b>
    курсивный тект <i>курсивный тект</i>
    зачеркнутый текст <s>зачеркнутый текст</s>
    подчеркнутый текст <u>подчеркнутый текст</u>
    ссылка <a href="адрес">ссылка</a>
    function foo() { ... }
    <pre><code>function foo() { ... } </code></pre>