Подтвердить что ты не робот

Как создать choropleth мира используя d3?

Этот учебник - отличное введение в создание choropleths с d3, но его данные ориентированы на США. Где я могу получить соответствующие данные для карты мира?

Я уверен, что это где-то в документах, но я не могу его найти. Этот является самым близким, который я нашел, но одна карта мира на нем специально говорит, что это не рекомендуется для choropleths. Кроме того,

4b9b3361

ОТВЕТЫ

Ответ 1

ПРИМЕЧАНИЕ. Этот ответ был написан для версии 2 d3. Версия 3 теперь отсутствует, и у нее есть потрясающие новые функции, которые создают лучшую сегментацию геометрии и решают проблему заполнения, упомянутую ниже. Кроме того, интерфейс для настройки проекций _may_ изменился в V3 (не уверен, что bc я не пробовал).

Существует доступный json файл для всего мира, и вы можете отобразить его эквивалентно для us-states.json coropleth (используя проекцию равных площадей Albers) - если вы поймете (и согласитесь) тот факт, что Карта прогноза, построенная Альберсом, выглядит как this, что не совсем так, как большинство людей распознает карту мира.

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

Затем вам нужно отобразить данные мира json с помощью настроенной проекции Albers:

<!DOCTYPE html>
<meta charset="utf-8">
<title>Mercator Projection</title>

<style>
  path {
    fill: #ccc;
    stroke: #fff;
  }
</style>

<svg width="960" height="500"></svg>

<script src="http://d3js.org/d3.v2.js?2.9.1"></script>
<script type="text/javascript">
  d3.json("world-countries.json", function(collection) {
    d3.select("svg").selectAll("path")
        .data(collection.features)
      .enter().append("path")
        .attr("d", d3.geo.path().projection(
          d3.geo.albers()
            .parallels([10, 80])
            .origin([0,40])
            .translate([500,250])
            .scale(100)
        ));
  });
</script>

origin(), parallels(), translate() и scale() значения могут быть изменены для получения разных результатов.

Есть проблема с Antartica, которая - из-за природы этой проекции - получает "перевернутую" и не закрытую форму, поэтому ее заполнение охватывает весь мир. Вам либо нужно удалить его из json, либо не применять к нему заполнение.

Также по какой-то причине Бразилия (и пара других) не получилась должным образом, когда я попробовал это. Не знаю почему. Вы должны изучить svg и данные, чтобы понять, почему.