Section 1.1: Setting Up the Environment

To get started with the Choropleth component, you first need to install the necessary package by executing the following command:

npm install @nivo/geo

Next, you can set up your component with the following code:

import React from "react";

import { ResponsiveChoropleth } from "@nivo/geo";

import countries from "./world-countries";

const data = [

{ id: "AFG", value: 928048 },

{ id: "AGO", value: 704643 },

{ id: "ALB", value: 641894 },

];

const MyResponsiveChoropleth = ({ data }) => (

<ResponsiveChoropleth

data={data}

features={countries.features}

margin={{ top: 0, right: 0, bottom: 0, left: 0 }}

colors="nivo"

domain={[0, 1000000]}

unknownColor="#666666"

label="properties.name"

valueFormat=".2s"

projectionTranslation={[0.5, 0.5]}

projectionRotation={[0, 0, 0]}

enableGraticule={true}

graticuleLineColor="#dddddd"

borderWidth={0.5}

borderColor="#152538"

legends={[

{

anchor: "bottom-left",

direction: "column",

justify: true,

translateX: 20,

translateY: -100,

itemsSpacing: 0,

itemWidth: 94,

itemHeight: 18,

itemDirection: "left-to-right",

itemTextColor: "#444444",

itemOpacity: 0.85,

symbolSize: 18,

effects: [

{

on: "hover",

style: {

itemTextColor: "#000000",

itemOpacity: 1,

},

},

],

},

]}

/>

);

export default function App() {

return (

<div style={{ width: 400, height: 300 }}>

<MyResponsiveChoropleth data={data} />

</div>

);

}

Section 1.2: Understanding the Code

In the above code, we define a data array containing country codes and corresponding values. The MyResponsiveChoropleth component uses the ResponsiveChoropleth component to render the map based on the provided data.

The features prop pulls in geographical data from the world-countries.json file, which can be obtained from the following link:

The domain sets the value range for the data displayed, while projectionTranslation and projectionRotation allow us to adjust the positioning and orientation of the map, respectively. The label property is used to set the labels based on the JSON data.

The unknownColor property specifies the color for countries with undefined values. Additionally, the legends prop provides customization options for the legend's appearance, such as its position, item dimensions, and hover effects.