Choropleth multiple domains?

[fabio-carvalho88]

Hi community,

Is it possible to support multiple domains?

My dashboard has country tiers and my Choropleth data is typed as {id: string, value: number}[]

This is what I currently possess. I'm only specifying the min and max numbers globally, as you can see, which will result in inaccurate filling.

I want to control what color is used per tier by defining 3 seperate domains (3 tiers)

import WorldMapLegend from "@/components/charts/worldmap/WorldMapLegend";
import WorldMapTooltip from "@/components/charts/worldmap/WorldMapTooltip";
import { useClientMediaQuery } from "@/hooks/useClientMediaQuery";
import { widescreen } from "@/lib/mediaQueries";
import { features } from "@/lib/worldCountries";
import { ResponsiveChoropleth } from "@nivo/geo";

interface WorldMapProps {
  data: { id: string; value: number }[];
}

export default function WorldMap({ data }: WorldMapProps) {
  const isWidescreen = useClientMediaQuery(widescreen);

  // extract value prop from each country
  const values = data.map((item) => item.value);

  // find the lowest and highest values
  const lowestValue = Math.min(...values);
  const highestValue = Math.max(...values);

  return (
    <>
      <WorldMapLegend />
      <ResponsiveChoropleth
        value="value"
        label="properties.name"
        projectionType="mercator"
        projectionScale={isWidescreen ? 55 : 50}
        data={data}
        features={features}
        tooltip={WorldMapTooltip}
        margin={{ top: isWidescreen ? 50 : 20, right: 0, bottom: 0, left: 0 }}
        colors={["#42108B", "#7522E0", "#EFE6FD"]}
        fillColor={""}
        enableGraticule={false}
        graticuleLineWidth={0.5}
        domain={[lowestValue, highestValue]}
        unknownColor="#ECECEC"
        valueFormat=".2s"
        projectionTranslation={[0.5, 0.6]}
        projectionRotation={[0, 0, 0]}
        graticuleLineColor="rgba(0, 0, 0, .2)"
        borderWidth={0.5}
        borderColor="#ECECEC"
        isInteractive={true}
      />
    </>
  );
}