Визуализация данных с помощью HTML5 Canvas и SVG
(Обзорная статья по следам конференции по разработке ПО в Екатеринбурге и другим выступлениям. Видео-версию доклада в Екатеринбургесм. на techdays.ru) Что такое HTML5 Canvas и SVG? HTML5 Canvas <canvas> – элемент представляет собой холст для отрисовки растровой графики. Фактически, это пустой блок заданных размеров, на котором можно рисовать с помощью специальных API для JavaScript. API включает в себя 45 специальных методов и 21 атрибут, используемые для отображения графических примитивов, задания стилей, трансформаций, доступа к отдельным пикселям, проецирования изображений и видео. Сам <canvas> элемент определен непосредственно в спецификации HTML5. API для него описывается отдельным документом -- HTML Canvas 2D Context. SVG SVG = Scalable Vector Graphics. Отдельный стандарт для векторного описания изображений, базирующийся на XML, имеющий свою DOM (Document Object Model) для работы через JavaScript. В настоящий момент актуальная версия стандарта – SVG 1.1 проходит процесс обновления до второй редакции и буквально совсем недавно эта спецификация достигла статуса Proposed Recommendation. В рамках HTML5 определен специальный тег <svg> в дополнение к вставке в виде изображений и объектов:
позволяющий делать inline-вставку SVG-контента непосредственно в тело документа (и в этом виде с ним можно работать в том же контексте JavaScript, что и с другими элементами документа). Примеры Несколько примеров того, что позволяют сделать Canvas и SVG: Endless Mural То, что называется, generative art – динамичная генерация графических изображений (http://www.endlessmural.com/). Music Can Be Fun Красивая музыкально-графическая игра-визуализация (http://musiccanbefun.edankwan.com/). Примеры схем на SVG Схема человеческого скелета, переодических система химических элементов и респираторная система (http://ie.microsoft.com/testdrive/Graphics/RealWorldDataAndDiagrams/Default.xhtml). Карты Яндекс Более близкий пример из реальной жизни – при отрисовке маршрутов используется SVG (если браузер поддерживает). См. также доклад “Карты и SVG” с нашего HTML5 Camp. Еще примеры:
Разница между Canvas и SVG В различных сценариях для динамичной отрисовки графики может лучше подходить или Canvas или SVG – к этому вопросу мы еще вернемся в конце. А пока остановимся на ключевых различиях между одним и другим:
Эти различия необходимо учитывать при использовании той или иной технологии для визуализации данных. Например, отрисовка графика функции может быть легче с помощью Canvas, в то же время вывод подсказок (с определением объекта под указателем мыши), проще сделать с помощью SVG. На практике, правда, уже есть ряд готовых библиотек для визуализации данных, которые частично нивелируют эти различия. Я не буду вдаваться в основы работы с каждой из технологий, в качестве вводной рекомендую доклад Вадима Макеева (Opera) с HTML5 Camp “Динамическая графика: Canvas и SVG”. См. также доклады MIX 2011: Обработка изображений с помощью Canvas Одна из примечательных особенностей Canvas заключается в том, что эта технология обеспечивает попиксельный доступ к отображаемым данным и позволяет проектировать на холст различные графические элементы, включая видео. Хорошим примером того, где это нужно, являюется задача обработки/анализа изображений. Mihai Şucan в своей статье “SVG or Canvas? Choosing between the two” приводит как раз интересный пример построения гистограммы изображения с помощью Canvas. Анализ видео-изображения Давайте посмотрим, как с помощью Canvas можно заниматься обработкой видео. Начнем с простой задачи проектирования видео-контента на canvas-элемент.
Для решения этой задачи в Canvas есть специальный метод drawImage:
Если запустить проигрывание видео, изображение внутри canvas-элемента будет обновляться синхронно с обновлением видео: (Стоит отметить, что это не самый лучший способ отслеживания изменения позиции внутри видео-элемента, иногда больше подходит событие timeupdate.) Теперь, из canvas-элемента можно получить доступ к отдельным пикселям видео-изображения. Для этого мы проектирование видео перенесем на промежуточный canvas, хранящийся в памяти. Чтобы получить доступ к пикселям и записывать пиксели в canvas есть соответствующие методы getImageData и putImageData.
В качестве примера обработки видео-изображения в данном случае делается инверсия цвета пикселей по каждому из цветовых каналов. С готовым примером можно поиграться здесь http://silverbook.ru/projects/html5datavisualization/demo2-image-processing.htm (код выполнить можно из консоли – F12 в Internet Explorer). Библиотеки для визуализации с помощью Canvas Переходим непосредственно к визуализации данных. С одной из библиотек для работы с Canvas (EaselJS) мы уже ранее разбирались, делая открытку к 8 марта. Если ваша (динамическая) визуализация предполагает работу со спрайтами, рекомендую обратить на нее внимание. Здесь же мы остановимся на трех библиотеках для визуализации, представляющих собой различные подходы и направления для визуализации. Это, безусловно, не исчерпывающий список и есть много других библиотек со схожим и отличным функционалом. ProcessingJS Processing.js является портом на JS знаменитой библиотеки для визуализации данных Processing. Примеры работы можно найти тут http://processingjs.org/exhibition. Processing.js предлагает два подхода к описанию визуализации: промежуточный код, в дальнейшем разбираемый самой библиотекой (отдельным файлом или внутри страницы) и явный код на JavaScript. Например, чтобы нарисовать фрактал множество Мандельброта, можно использовать как вариант, указанный на странице с соответствующим примером, так и такой код на JavaScript:
Попробовать самостоятельно можно здесь: http://silverbook.ru/projects/html5datavisualization/demo3-processingjs.htm (копируем код, вставляем в консоль и выполняем). JavaScript InfoVis Toolkit (JIT) JIT – библиотека для визуализации данных, разрабатываемая в Sencha. Некоторые примеры визуализации можно посмотреть на сайте библиотеки в разделе Demos. Для отображения данных JIT принимает исходные значения в виде JSON:
Далее после небольшой настройки диаграммы (обратите внимание на подсказки – они выводятся поверх визуализации обычными html-блоками, с учетом стилизации в CSS):
достаточно вызвать отрисовку: pieChart.loadJSON(json); Тестовый пример можно найти тут http://silverbook.ru/projects/html5datavisualization/demo3-jit.htm. jQuery Sparklines jQuery Sparklines – еще одна интересная библиотека, позволяющая делать мини-визуализации массивов данных, похожих на функционал Sparklines в Excel. Библиотека использует в своей работе jQuery. Для визуализации достаточно вызвать соответствующую функцию:
В первом и последнем случаях данные указаны в коде страницы, во втором и третьем передаются при вызове функции. Попробовать самостоятельно можно тут http://silverbook.ru/projects/html5datavisualization/demo3-sparklines.htm Визуализация на карте с помощью SVG Переходим к SVG и начнем с простого примера. Представьте себе, что вам нужно отобразить какие-то данные на карте регионов, как это сделать проще всего? Если у вас есть готовая карта в виде SVG (я взял карту России с сайта Википедии), то это делается очень просто – достаточно, чтобы внутри SVG-документа у каждого региона был свой уникальный id, далее вставляем карту как inline svg и простым кодом раскрашиваем в нужный цвет:
Если сделать все то же самое в цикле, то уже можно раскрасить не просто область, но и целый регион или даже всю страну:
Готовый пример можной найти тут http://silverbook.ru/projects/html5datavisualization/demo6-visualization.htm. Библиотеки для визуализации данных с помощью SVG Как я уже говорил, для решения традиционной задачи визуализации числовых данных в виде графиков и диаграмм подходят как Canvas, так и SVG. В обоих случаях это достаточно легко делается с помощью соответствующих библиотек. Примеры с Canvas мы уже посмотрели, давайте теперь посмотрим на несколько библиотек для работы с SVG. (Это также не исчерпывающий список, но довольно качественные и популярные решения.) Raphaël Raphaël – известная библиотека для работы с SVG, написанная Дмитрием Барановским. Помимо того, что она просто делает жизнь легче, она интересная также тем, что в старых версиях IE реализует свой функционал с помощью VML. Оставляя за рамками данной статьи вопросы работы с самой библиотекой (в качестве интересного десерта, вот здесь http://raphaeljs.com/icons/ можно найти библиотеку векторных иконок для Raphaël), перейдем к расширению для работы с диаграммами и графиками -- http://g.raphaeljs.com/. Чтобы добавить простую круговую диаграмму достаточно такого кода:
Несколькими дополнительными операциями можно добавить легенду, подписи к диаграмме и интерактивные подсказки:
Аналогичным образом можно выводить и другие типы диаграмм, используя соответствующие методы. См. примеры непосредственно на сайте расширения http://g.raphaeljs.com/ Highcharts JS Наконец, еще одна интересная библиотека с богатым функционалом – Highcharts JS. Большое колиечество примеров можно найти в галерее на сайте. API библиотеки позволяет достаточно легко сгенерировать диаграмму по данным в JSON:
Немного более сложным скриптом можно указать дополнительные детали, например, вывести легенду, настроить подсказки:
При необходимости можно заменить стили по умолчанию на свои собственные. Что выбрать: Canvas или SVG? Как видно из примеров выше, для задач визуализации данных зачастую подходит и та, и другая технология. Многие вещи делаются схожим образом. В случаях, где нужен попиксельный вывод, очевидно, лучше подходит Canvas. Там, где диаграмма бьется на отдельные объекты, в которых нужно поддерживать интерактивность, лучше подходит SVG.
В графической форме это можно представить так: Наконец, еще один важный срез, который также важно учитывать в выборе технологии – производительность отрисовки при использовании Canvas и SVG: На практике Сanvas лучше работает при небольших размерах области отрисовки и на большом числе объектов, в SVG лучше подходит при необходимости масштабирования или вывода на большой экран и на не слишком большом количестве выводимых за раз объектов. Дополнительные материалы и инструменты Cheat Sheets:
Инструменты:
|