Как создавать потрясающую визуализацию на JavaScript с библиотекой Stardust

Как известно, получить данные недостаточно. Важно уметь эффектно их презентовать. Юный друг, представь, что ты отправляешь в браузер данные в JSON, сторонняя библиотечка их подхватывает и рендерит классную визуализацию в 3D, да еще задействуя GPU, что значит, что картинку можно повращать и ничего тормозить не будет. Да все девки на селе будут твои!

Stardust — построение графиков на JavaScript

Stardust library

Библиотека называется Stardust, написана полностью на JS, работает в любом современном браузере и понимает стандарт WebGL. Голый Open Source на 146%. Насколько это круто можно понять, только лично заценив интерактивную графику. Тыкай в картинку и вперед!

Визуализация графа

Выше пример визуализации графа дружеских связей между вконтактными вшами.

Подключение Stardust

Тут без сюрпризов:

HTML Canvas

Запилим холст нужных размером и свяжем его с библиотекой:

Загрузка данных в Stardust

Предположим, что данные лежат в массиве data. Тогда:


// var data = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];

// Для примера нарисуем график в виде кругов в стиле русский авангард
var circleSpec = Stardust.mark.circle();
var circles = Stardust.mark.create(circleSpec, platform);

// Настроим внешний вид (параметры в документации)
circles.attr("center", (d) => [ d * 80, 250 ]);
circles.attr("radius", (d) => d * 3);
circles.attr("color", [ 0, 0, 0, 1 ]);

// Приаттачим данные
circles.data(data);

Вуаля!

Рендеринг графики

Теперь самое время показать свою крутую графику девкам. Рендерим:


circles.render();

А в чем профит?

Пользоваться просто и удобно, а эффект ошеломляющий. Можно наглядно показывать статистику сайта, продажи, да что угодно. Хоть данные из курсовика. Stardust — стильно, модно, молодежно.
field_vote: 
Ваша оценка: Нет Средняя: 5 (4 оценки)
Программное обеспечение: 
Языки программирования: 

Комментировать

Filtered HTML

  • Use [fn]...[/fn] (or <fn>...</fn>) to insert automatically numbered footnotes.
  • Доступны HTML теги: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <blockquote> <strike> <code> <h2> <h3> <h4> <h5> <del> <img>
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Строки и параграфы переносятся автоматически.

Plain text

  • HTML-теги не обрабатываются и показываются как обычный текст
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Строки и параграфы переносятся автоматически.