Анимация перехода от глобуса к двумерной карте

[pavelpromin]

Математично!

[dom1n1k]

Греческие буквы в коде просто для наглядности или действительно можно использовать такие переменные?

[deNULL]

Можно, но не нужно.

[KoGor]

Для наглядности. Можно, но могут быть проблемы если где-то не используется UTF-encoding (например, откроете исходники в редакторе с другой кодировкой по умолчанию и можете ненадолго впасть в ступор).

[alexeibs]

В неминифицированном d3.js активно ипользуются греческие буквы для переменных. Столкнулся с этим, когда неправильно настроенный nginx отдавал браузеру d3.js как закодированный в win1251. В итоге, браузер стал материться :)

[KoGor]

Ну ведь этот «хак» реально помогает лучше разобраться в коде. Код гораздо понятнее, если используются общепринятые обозначения из предметной области =)

[alexeibs]

Ну так я не говорю, что греческие буквы в переменных плохо. В моем случае, проблема была в плохо настроенном nginx. Ну а в продакшене все равно код будет минифицирован и греческие буквы скорее всего пропадут

[exvel]

var λ = speed * (Date.now() - start),

Вот это я понимаю, UTF ворвался в нашу жизнь! :-)

[xdenser]

У меня все SVG варианты тормозят и глючат при переходе — часть стран становятся плоскими сразу. Firefox и Chrome одинаково.
В IE10 глюка при переходе нет в 3 варианте.
Похоже это связано с производительностью железа. У меня Intel i5 650 (первого поколения).
И в 3 и 2 варианте у меня глобус не крутится.
Canvas вариант выглядит приятней, но там страны не выделяются.
И у всех вариантов проблема — при клике вдруг появляются границы, что выглядит дергано. Надо бы как-то чтоб границы или все время были или все время не были.
Так что еще эффектов туда добавлять рано. Надо чтоб хоть это летало сначала.

[shushu]

Подтверждаю. Проблема с анимацией есть.

00:02.0 VGA compatible controller: Intel Corporation Haswell Integrated Graphics Controller (rev 06)
Ubuntu 13.04
Linux 3.8.0-31-generic #46-Ubuntu SMP Tue Sep 10 20:03:44 UTC 2013 x86_64 x86_64 x86_64 GNU/Linux

Скрытый текст

[KoGor]

Может железо слабенькое, а может быть и bl.ocks.org не тянет, попробуйте у себя на локальной машине. Да, часть стран становятся плоскими сразу (в I и II примерах), это особенности встроенного transition(). Почему глобус не крутится у вас, я затрудняюсь ответить. В canvas варианте страны выделяться и не должны, а поведение границ можно легко отредактировать.

[xdenser]

Что может не тянуть bl.ocks.org? Все файлы с него загружаются и в анимации он не участвует.

особенность встроенного transition

— куда встроенного? А как ее обойти?
Я имел ввиду, что глобус не крутится по таймеру. А не крутится он потому что во 2 и 3 варианте нет кода, для того чтоб он крутился.
Видимо, у вас тоже тормозит. :-)

[KoGor]

— куда встроенного? А как ее обойти?

Встроенного в d3.js, а обошли мы его в III и IV примерах, сделав совсем иную анимацию.

А не крутится он потому что во 2 и 3 варианте нет кода, для того чтоб он крутился.

Да, просто я хотел показать разные примеры, вы легко можете собрать нужный вам вариант, ознакомившись со всеми примерами и скомпоновав соответствующие блоки кода из них.

Видимо, у вас тоже тормозит. :-)

Нет, у меня всё плавно работает (AMD A10-5800K APU).

[Razario777]

Россию выбираешь, она сначала отварачивает ее назад, затем разбивает на кусочки что то и раскрывается. В общем косячит при выборе России (тестировал здесь).

[KoGor]

Всё так и должно быть, в статье объяснено почему сделано именно так (абзац, где упоминается антимеридиан).

[Razario777]

Да, прочитал, выглядит не очень, когда распадается на островки, в любом случае за статью огромный плюс.

[KoGor]

Это не островки, а страны, отредактируйте CSS

.mapData {
  fill: #E6E6E6;
  stroke: #ffffff;
  stroke-width: 1px;
}

соответствующим образом (stroke: #E6E6E6; или удалите границы вовсе) и будет вам счастье =)