d3.js
Прогнозы D3

Меркаторные прогнозы

Проекция Меркатора является одним из самых узнаваемых прогнозов, используемых в картах. Как и все проекции карты, он имеет искажения, а для Меркатора проекция наиболее заметна в полярных регионах. Это цилиндрическая проекция, меридианы работают вертикально, а широты движутся горизонтально.

Масштабирование зависит от размера вашего svg, для этого примера все используемые весы имеют ширину 960 пикселей и высоту 450 пикселов.

На приведенной ниже карте показана индикатриса Tissot для проекции Меркатора, каждый круг на самом деле того же размера, но проекция, очевидно, показывает, что некоторые больше, чем другие:

Это искажение связано с тем, что проекция пытается избежать одномерного растяжения карты. Когда меридианы начинают сливаться на Северном и Южном полюсах, расстояние между ними начинает приближаться к нулю, но поверхность проекции прямоугольная (не карта, хотя она тоже прямоугольная) и не позволяет изменять расстояние между меридианами в проекции. Это растянуло бы функции вдоль оси х вблизи полюсов, искажая их форму. Чтобы противостоять этому, Меркатор растягивает ось y, а также приближается к полюсам, что делает индикаторы круглыми.

Проекция для вышеприведенной карты по существу является по умолчанию проекцией Меркатора, немного сдвинутой:

var projection = d3.geoMercator()
    .scale(155)
    .center([0,40]) // Pan north 40 degrees
    .translate([width/2,height/2]);

Чтобы центрировать проекцию на заданную точку с известной широтой и известной долготой, вы можете легко перейти к этой точке, указав центр:

var projection = d3.geoMercator()
    .center([longitude,latitude])

Это будет панорамировать эту функцию (но не масштабировать) на проецируемой поверхности (которая выглядит как карта выше).

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

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

Например, для Индии мы могли бы использовать:

var projection = d3.geoMercator()
    .scale(800)
    .center([77,21])
    .translate([width/2,height/2]);

Что дает нам (опять же с индикатрисой Tissot, чтобы показать искажение):

Это имеет низкий уровень искажений, но круги в основном имеют одинаковый размер (вы можете увидеть большее перекрытие между двумя верхними строками, чем нижние две строки, поэтому видны искажения). В целом, хотя карта показывает знакомую форму для Индии.

Искажение в области не линейно, оно сильно преувеличено по отношению к полюсам, поэтому Канада с довольно отдаленными северными и южными экстремумами и положение, довольно близкое к полюсам, означает, что искажение может быть несостоятельным:

var projection = d3.geoMercator()
    .scale(225)
    .center([-95,69.75])
    .translate([width/2,height/2]);

Эта проекция делает Гренландию такой большой, как Канада, когда на самом деле Канада почти в пять раз больше, чем в Гренландии. Это просто потому, что Гренландия находится дальше на север, чем основная часть Канады (извините Онтарио, я, кажется, отрезал некоторые из ваших южных оконечностей).

Поскольку ось y значительно растянута вблизи полюсов в Меркаторе, эта проекция использует точку, значительно северную от географического центра Канады. Если вы имеете дело с областями высокой широты, вам может потребоваться настроить точку центрирования для учета этого растяжения.

Если вам нужна проекция Mercator для полярных областей, вы можете свести к минимуму искажения и использовать Mercator Projection. Вы можете добиться этого, вращая земной шар. Если вы повернете ось x по умолчанию Mercator, вы окажетесь для ее панорамирования влево или вправо (вы просто вращаете глобус в цилиндре, на котором вы проецируете), если, однако, вы меняете ось y по умолчанию Mercator, вы можете поверните землю сбоку или на любой другой угол. Вот Меркатор с поворотом -90 градусов:

var projection = d3.geoMercator()
.scale(155)
.rotate([0,-90]);
.translate([width/2,height/2]);

Точки индикатрисы находятся в тех же местах, что и первая карта выше. Искажение по-прежнему увеличивается по мере того, как они достигают верхней или нижней части карты. Так будет отображаться карта Меркатора по умолчанию, если бы Земля вращалась вокруг Северного полюса на [0,0] и Южного полюса в [180,0], поворот повернул цилиндр, который мы проецируем на 90 градусов относительно полюсов. Обратите внимание, что у полюсов больше нет несостоятельных искажений, это представляет собой альтернативный метод проектных областей вблизи полюсов без чрезмерного искажения в области.

Используя Канаду в качестве примера снова, мы можем повернуть карту в координату центра, и это позволит свести к минимуму искажения в области. Для этого мы снова можем повернуть в центрирующую точку, но для этого требуется один дополнительный шаг. С центрированием мы переходим к функции, с поворотом мы перемещаем землю под нами, поэтому нам нужен отрицательный результат нашей координаты центрирования:

var projection = d3.geoMercator()
    .scale(500)
    .rotate([96,-64.15])
    .translate([width/2,height/2]);    

Обратите внимание, что индикатриса Tissot показывает низкие искажения в области сейчас. Масштабный коэффициент также намного больше, чем раньше, потому что эта Канада сейчас находится в начале проекции, а по середине карты объекты меньше, чем сверху или снизу (см. Первую индикатрису выше). Нам не нужно центрироваться, потому что центральная точка или происхождение этой проекции находится в [-96,64.15] , центровка приведет нас к этому.

Прогнозы Альберса

Проекция Альберса, или, более точно, коническая проекция, равная площади Альберса, является общей конической проекцией и официальной проекцией ряда юрисдикций и организаций, таких как Бюро переписи населения США и провинция Британская Колумбия в Канаде. Он сохраняет область за счет других аспектов карты, таких как форма, угол и расстояние.

Общие свойства

Общее преобразование записывается в следующем виде:

(Основано на блоке Майка Бостока)

Проекция Albers минимизирует искажения вокруг двух стандартных параллелей. Эти параллели представляют собой то, где коническая проекция пересекается с земной поверхностью.

В этом примере все шкалы используются с размерами svg высотой 960 пикселов на 450 пикселов, масштаб будет изменяться с этими размерами

На приведенной ниже карте показана индикатриса Tissot для проекции Альберса со стандартными параллелями 10 и 20 градусов на север. Каждый круг на самом деле того же размера и формы, но проекция карты будет искажать их по форме (а не области). Обратите внимание, что примерно на 10-20 градусов к северу индикаторы более крутые, чем в других местах:

Это было создано со следующей проекцией:

var projection = d3.geoAlbers()
    .scale(120)
    .center([0,0])
    .rotate([0,0])
    .parallels([10,20])
    .translate([width/2,height/2]);

Если мы используем параллели, которые на более высоких высотах, степень дуги в проекции возрастает. Следующие изображения используют параллели 50 и 60 градусов к северу:

var projection = d3.geoAlbers()
    .scale(120)
    .center([0,70]) // shifted up so that the projection is more visible
    .rotate([0,0])
    .parallels([40,50])
    .translate([width/2,height/2]);

Если бы у нас были отрицательные (южные) параллели, карта была бы вогнутой, а не вверх. Если одна параллель северна и одна на юг, то карта будет вогнутой к более высокой / более экстремальной параллели, если они находятся на одинаковом расстоянии от экватора, тогда карта не будет вогнутой в любом направлении.

Выбор Parallels

Поскольку параллели обозначают области с наименьшим искажением, они должны выбираться исходя из вашей области интересов. Если интересующая вас область простирается от 10 градусов на север до 20 градусов к северу, то выбор параллелей 13 и 17 минимизирует искажения на всей вашей карте (поскольку искажения сведены к минимуму с обеих сторон этих параллелей).

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

Ссылки и определения проекции включают параллельные данные, которые можно использовать для воссоздания стандартизованных прогнозов.

Центрирование и вращение

После выбора параллелей карта должна быть расположена так, чтобы соответствующая область была правильно выровнена. Если вы используете только projection.center([x,y]) , то карта просто будет перерисована в выбранную точку, и никакое другое преобразование не произойдет. Если целевой областью является Россия, панорамирование может быть не идеальным:

var projection = d3.geoAlbers()
    .scale(120)
    .center([0,50]) // Shifted up so the projection is more visible
    .rotate([0,0])
    .parallels([50,60])
    .translate([width/2,height/2]);

Центральный меридиан проекции Альберса является вертикальным, и нам нужно вращать землю под проекцией, чтобы изменить центральный меридиан. Вращение для проекции Альбера - это метод центрирования проекции на ось х (или по долготе). И поскольку Земля вращается под проекцией, мы используем негатив от долготы, которую хотим сосредоточить. Для России это может быть примерно на 100 градусов по востоку, поэтому мы будем вращать земной шар на 100 градусов по-другому.

var projection = d3.geoAlbers()
    .scale(120)
    .center([0,60])
    .rotate([-100,0])
    .parallels([50,60])

Теперь мы можем перемещаться вверх и вниз, а функции вдоль центрального меридиана и рядом с ним будут вертикальными. Если вы .center() на оси x, ваше центрирование будет относиться к центральному меридиану, установленному вращением . Для России мы, возможно, захотим немного подойти к северу и немного увеличить:

var projection = d3.geoAlbers()
    .scale(500)
    .center([0,65])
    .rotate([-100,0])
    .parallels([50,60])

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

С индикатором Tissots мы можем видеть некоторое уплощение вблизи самого полюса, но эта форма справедлива во всей интересующей области (помните, что для размера России искажение довольно минимальное, это было бы намного меньше для более мелких функций):

Параметры по умолчанию

В отличие от большинства других проекций проекция d3.geoAlbers поставляется с параметрами по умолчанию, которые не являются .rotate ([0,0]) и .center ([0,0]), проекция по умолчанию центрирована и повернута для Соединенных Штатов. Это также относится к .parallels() . Поэтому, если какой-либо из них не установлен, по умолчанию будут выбраны ненулевые значения.

Резюме

Проекция Albers обычно задается со следующими параметрами:

var projection = d3.geoAlbers()
    .rotate([-x,0])
    .center([0,y])
    .parallels([a,b]);

Где a и b равны двум параллелям.

Азимутальные эквидистантные проекции

Общие свойства:

Азимутальная эквидистантная проекция лучше всего распознается при использовании в полярных областях. Он используется на эмблеме ООН . От центральной точки сохраняются угол и расстояние. Но проекция будет искажать форму и область для достижения этого, тем более, что вы двигаетесь дальше от центра. Аналогично, расстояние и угол не соответствуют действительности в других местах, кроме центра. Проекция попадает в азимутальную категорию (а не цилиндрическую (Меркатор) или конику (Альберс). Эта проекция проецирует землю как диск:

(Основанный на блоке Майка Бостока. В центре на Северном полюсе, проигнорируйте треугольный артефакт поверх изображения, когда-то свернутый )

Масштаб зависит от размера вашего svg. В этом примере все используемые масштабы находятся в пределах 960 пикселей в ширину и максимум на 450 пикселов svg (и экран обрезается для квадрата, где это необходимо) - если не указано иное.

На приведенной ниже карте показана индикатриса Tissot для азимутальной эквидистантной проекции:

Это было создано со следующей проекцией:

var projection = d3.geoAzimuthalEquidistant()
   .scale(70)
   .center([0,0])
   .rotate([0,0])
   .translate([width/2,height/2]);

Центрирование и вращение:

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

Чтобы правильно центрировать область, вам необходимо повернуть ее. Как и при любом повороте в d3, лучше всего думать об этом как о перемещении земли под проекцией, поэтому поворот земли на 90 градусов под картой на оси y фактически поместит северный полюс посередине:

var projection = d3.geoAzimuthalEquidistant()
   .scale(70)
   .center([0,0])
   .rotate([0,-90])
   .translate([width/2,height/2]);

Аналогично, вращение на оси х ведет себя аналогично. Например, чтобы повернуть карту таким образом, чтобы канадская арктика была вертикальной, а сосредоточенная на северном полюсе, мы можем использовать такую ​​проекцию, как:

var projection = d3.geoAzimuthalEquidistant()
    .scale(400)
    .center([0,0])
    .rotate([100,-90])
    .translate([width/2,height/2]);

Эта карта использовала 600x600 svg

В целом, эта простота делает азимутальный эквидистант более простой проекцией для установки, просто используйте поворот. Типичная проекция будет выглядеть так:

var projection = d3.geoProjection()
   .center([0,0])
   .rotate([-x,-y])
   .scale(k)
   .translate([width/2,height/2]);