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

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

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

Stardust library

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

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

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

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

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

<script type="text/javascript" src="//stardust-vis.github.io/stardust/stardust.bundle.min.js">
</script>

HTML Canvas

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

<script type="text/javascript">
    // Найдем на странице холст по Id
    var canvas = document.getElementById("main-canvas");
 
    // Зададим размеры
    var width = 960;
    var height = 500;
 
    // Запилим платформу типа WebGL 2D для выбранного холста
    var platform = Stardust.platform("webgl-2d", canvas, width, height);
 
    // И перейдем к загрузке данных...
</script>

Загрузка данных в 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 — стильно, модно, молодежно.
Ваша оценка: Нет Средняя оценка: 5 (4 votes)
Отправить комментарий
КАПЧА
Вы человек? Подсказка: зарегистрируйтесь, чтобы этот вопрос больше никогда не возникал. Кстати, анонимные ссылки запрещены.
CAPTCHA на основе изображений
Enter the characters shown in the image.