Интерактивный глобус — SVG versus Canvas

[Devgru]

Спасибо за прекрасный пост перед началом рабочей недели :)

D3 — очень мощная библиотека, некоторые идеи и элементы из неё использую и в других проектах. Всячески советую её для любых визуализаций, графиков и прочего. Если кому нужно — закидаю ссылками в личку, для затравки — прекрасная презентация, объясняющая суть d3 и список работ автора библиотеки, в котором почти каждый день появляются сложные на первый взгляд и реализующиеся несколькими десятками строк JS-кода с использованием d3.

К сожалению, в чистом виде использовать d3 не получается, для себя я цикл enter-update-exit заменил на написанный вручную SVG с привязкой к angular. Это помогает интереснее привязаться к модели (в частности анимировать добавление/удаление элементов в списке) и полноценно взаимодействовать с пользователем. Кроме того, можно эти привязки переиспользовать как ng-директивы.

P.S. А слабо реализовать в Canvas-версии тот же функционал, что и с SVG? :-)

[KoGor]

Рад, что вам понравилось. Пост опубликовал перед началом рабочей недели, потому что на неделе не до этого было бы, а откладывать до следующих выходных не хотелось. Было бы интересно посмотреть на ваш подход и его преимущества в живую, на примере :-)

P.S. Реализовать центровку на выбранную из списка страну довольно легко, как и вращение мышкой, а вот показывать tooltip при наведении мыши…

[Zoberg]

Можно каждый регион нарисовать в отдельном canvas'е, наложить их друг на друга и tooltip показывать когда пиксели под мышкой непрозрачные :)

[ZweiAndersdenkenden]

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

[KoGor]

Это хорошо, значит одна из главных целей статьи достигнута, удачи вам в ваших начинаниях and «May the Force be with you».

[leshaogonkov]

В Хроме на Андроид ужасные тормоза. Это особенность библиотеки или конкретной реализации?

[catlion]

Why mobile web apps are slow?

[NekR]

Тут скорее — Why SVG is slow…

[KoGor]

Как тут уже заметили, это скорее всего неповоротливость SVG (174 страны всё же) + отсутствие оптимизации под touch интерфейсы, что, на сколько я помню, увеличивает время обработки событий примерно на 300 мс.

[track]

Оффтопик: Как неестественно выглядит вид планеты «из космоса» с нанесенными на нее государственными границами, существующими только в воображении (некоторых) людей.

[KoGor]

Согласен с вами, для анимации хорошо бы покрыть всё тайлами, но это тянет на отдельную статью, в принципе в планах есть рассказать про это.

[bolk]

Это какая-то новая форма безграмотности на «Хабре», я чувствую. Всё больше постов с полумегабайтными, а то и мегабайтными картинками там, где в этом никакой нужды нет. JPEG тут бы раз в 5—10 меньше получился.

[KoGor]

Вы правы, в самой анимации используется JPEG, а для иллюстрации к статье я что-то упустил этот момент. Спасибо за бдительность, пережал. (размер уменьшился почти в 5 раз)

[Delphist2008]

Если перевернуть глобус «вверх ногами», то лево и право меняются местами. Тянешь влево — глобус крутится вправо.

[KoGor]

Вы, видимо, имеете ввиду поворот вверх ногами планшета, оптимизация под этот класс устройств не проводилась, так что всё в ваших руках =)

[Delphist2008]

Не, я про

вот это

[KoGor]

Хехе, теперь понял, Месье знает толк в извpащениях. Надо будет программно запретить так издеваться над глобусом =).

[nekt]

Панельки справа очень не хватает:
sites.psu.edu/jmrrclr1b5/files/2013/03/xcom_geoscape.png

[guyfawkes]

А где можно подробнее посмотреть на работу функций origin и interpolate? Не вполне ясно, как именно они работают.

[KoGor]

Вот API Reference тут есть всё. Про origin я объяснял в статье, он нужен чтобы перейти от координат холста к координатам нашей системы (то бишь географическим координатам), а по interpolate вопрос видимо связан с параметром t. Вот что про него написано в API:

Given a parameter t in the range [0,1], returns the associated interpolation value.