Как построить карту Великобритании Choropleth с помощью Nivo

Создавайте хороплет в три простых шага

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

Для начала нам нужно сначала настроить нашу карту. Nivo предоставляет GeoJSON данные для карты мира. Но нам нужно GeoJSON из Великобритании, давайте воспользуемся json здесь, чтобы получить координаты для Великобритании и добавить их в наше приложение с помощью Uk.json.

Сначала импортируйте компонент ResponsiveChoropleth из Nivo, а затем используйте его для рендеринга карты в вашем компоненте React:

import { ResponsiveChoropleth } from '@nivo/geo'
import UkJson from "./Uk.json"

const MyChoroplethMap = ({ data }) => {
  return (
    <ResponsiveChoropleth
      features={UkJson.features}
      data={data}
      //* other properties... */
    />
  );
};

Это создаст базовую карту без отображения данных на ней.

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

const data = [
  {
    id: "CM",
    population: 336354,
  },
  {
    id: "CO",
    population: 296583,
  },
  {
    id: "SG",
    population: 364571,
  },
  {
    id: "CB",
    population: 610382,
  },
  {
    id: "NR",
    population: 794809
  },
  // ...
];

Обратите внимание, что свойство id каждого объекта данных должно соответствовать свойству id данных GeoJSON для региона.

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

В этом примере давайте используем nivo цветов и установим domain = [0, maxPopulation],, где maxPopulation — это максимальное значение населения в данных.

import { ResponsiveChoropleth } from '@nivo/geo'
import UkJson from "./Uk.json"

const MyChoroplethMap = ({ data }) => {
  return (
    <ResponsiveChoropleth
      features={UkJson.features}
      data={data}
      colors="nivo
      domain={[0,100000]}
      //* other properties... */
    />
  );
};

Обратите внимание, что для расчета цветовых сегментов области карты требуется домен.

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

Бонус (настройка всплывающей подсказки):

const MyChoroplethMap= () => {
  return (
    <Choropleth
      geoJsonUrl="/path/to/geojson/data.json"
      data={data}
      colors={colorScale}
      tooltip={({ id, value }) => (
        <strong>{id}:</strong> {value}
      )}
      //display a tooltip with the region's ID and data value 
      //when the user hovers over the region.you can customize it however 
      //you want
    />
  );
};

Текущая демонстрация:

https://codesandbox.io/s/nivo-choropleth-blog-example-79wcjg

Вывод:

Использование компонента Choropleth от Nivo упрощает создание интерактивных картограмм в приложении React и предоставляет широкий спектр параметров настройки в соответствии с вашими потребностями. Независимо от того, хотите ли вы отобразить данные на предварительно созданном шаблоне карты или на пользовательской карте, созданной с использованием данных GeoJSON, Nivo поможет вам.

Если у вас есть какие-либо вопросы или вы хотите узнать больше о возможностях компонента Choropleth или любых других Nivo Charts, не стесняйтесь спрашивать! Я буду счастлив сделать учебник об этом.