How to use @nivo/geo - 10 common examples

),
        default: ChoroplethDefaultProps.label,
    },
    {
        key: 'value',
        scopes: ['Choropleth', 'ChoroplethCanvas'],
        type: '{string|Function}',
        required: false,
        description: (
            <div>
                Accessor to data value, if a string is provided, the value will be retrieved using
                it as a key, if it's a function, it's its responsibility to return the value.
            </div>
        ),
        default: ChoroplethDefaultProps.value,
    },
    {
        key: 'valueFormat',
        scopes: ['Choropleth', 'ChoroplethCanvas'],
        type: '{string|Function}',
        required: false,
        description: (
            <div>
                Optional formatting of values, if provided, it will be used for labels/tooltips. You
                can either pass a function which will receive the node's data and must return the
                formatted value, or a string which will be used as a directive for{' '}
                <a rel="noopener noreferrer" href="https://github.com/d3/d3-format">
                    d3-format
                </a>
                .
            </div>

key: 'valueFormat',
        scopes: ['Choropleth', 'ChoroplethCanvas'],
        type: '{string|Function}',
        required: false,
        description: (
            <div>
                Optional formatting of values, if provided, it will be used for labels/tooltips. You
                can either pass a function which will receive the node's data and must return the
                formatted value, or a string which will be used as a directive for{' '}
                <a rel="noopener noreferrer" href="https://github.com/d3/d3-format">
                    d3-format
                </a>
                .
            </div>
        ),
        default: ChoroplethDefaultProps.value,
    },
    {
        key: 'colors',
        scopes: ['Choropleth', 'ChoroplethCanvas'],
        description: 'Defines color range.',
        type: '{string|Function|Array}',
        required: false,
        default: 'nivo',
        controlType: 'quantizeColors',
        controlGroup: 'Style',
    },
    {
        key: 'unknownColor',
        scopes: ['Choropleth', 'ChoroplethCanvas'],
        description: 'Defines the color to use for features without value.',
        type: '{string}',

},
    {
        key: 'valueFormat',
        group: 'Base',
        type: 'string | Function',
        required: false,
        help: 'Value formatter.',
        description: `
            Optional formatting of values, if provided, it will
            be used for labels/tooltips. You can either pass
            a function which will receive the node's data
            and must return the formatted value, or a string
            which will be used as a directive for
            [d3-format](https://github.com/d3/d3-format).
        `,
        defaultValue: ChoroplethDefaultProps.value,
    },
    {
        key: 'domain',
        help: 'Defines uppper and lower bounds of color shading',
        description: `
            The Domain prop is a required two element array that
            defines the minimum and maximum values for the color shading
            of the Choropleth. The minimum and maximum provided should
            roughly match, or be slightly outside of the minimum and
            maximum values in your data.
        `,
        type: 'number[]',
        required: true,
        group: 'Base',
    },
    {

`,
        defaultValue: ChoroplethDefaultProps.label,
    },
    {
        key: 'value',
        group: 'Base',
        type: 'string | Function',
        required: false,
        help: 'Value accessor.',
        description: `
            Accessor to data value, if a string is provided,
            the value will be retrieved using
            it as a key, if it's a function, it's its responsibility
            to return the value.
        `,
        defaultValue: ChoroplethDefaultProps.value,
    },
    {
        key: 'valueFormat',
        group: 'Base',
        type: 'string | Function',
        required: false,
        help: 'Value formatter.',
        description: `
            Optional formatting of values, if provided, it will
            be used for labels/tooltips. You can either pass
            a function which will receive the node's data
            and must return the formatted value, or a string
            which will be used as a directive for
            [d3-format](https://github.com/d3/d3-format).
        `,
        defaultValue: ChoroplethDefaultProps.value,

},
    {
        key: 'projectionRotation',
        type: '{[lambda: number, phi: number, gamma: number]}',
        scopes: '*',
        description: 'Projection rotation.',
        required: false,
        default: GeoMapDefaultProps.projectionRotation,
    },
    {
        key: 'projectionRotation[0]',
        excludeFromDoc: true,
        scopes: '*',
        description: 'Projection rotation lambda (λ).',
        required: false,
        default: GeoMapDefaultProps.projectionRotation[0],
        controlType: 'range',
        controlGroup: 'Base',
        controlOptions: {
            min: -400,
            max: 400,
        },
    },
    {
        key: 'projectionRotation[1]',
        excludeFromDoc: true,
        scopes: '*',
        description: 'Projection rotation phi (φ).',
        required: false,
        default: GeoMapDefaultProps.projectionRotation[1],
        controlType: 'range',
        controlGroup: 'Base',

default: GeoMapDefaultProps.projectionTranslation[1],
        controlType: 'range',
        controlGroup: 'Base',
        controlOptions: {
            min: -1,
            max: 1,
            step: 0.05,
        },
    },
    {
        key: 'projectionRotation',
        type: '{[lambda: number, phi: number, gamma: number]}',
        scopes: '*',
        description: 'Projection rotation.',
        required: false,
        default: GeoMapDefaultProps.projectionRotation,
    },
    {
        key: 'projectionRotation[0]',
        excludeFromDoc: true,
        scopes: '*',
        description: 'Projection rotation lambda (λ).',
        required: false,
        default: GeoMapDefaultProps.projectionRotation[0],
        controlType: 'range',
        controlGroup: 'Base',
        controlOptions: {
            min: -400,
            max: 400,
        },
    },
    {

},
                {
                    label: 'y',
                    min: -1,
                    max: 1,
                    step: 0.05,
                },
            ],
        },
    },
    {
        key: 'projectionRotation',
        type: '[number, number, number]',
        help: 'Projection rotation.',
        required: false,
        defaultValue: GeoMapDefaultProps.projectionRotation,
        controlType: 'numberArray',
        group: 'Projection',
        controlOptions: {
            items: [
                {
                    label: 'lambda (λ)',
                    min: -360,
                    max: 360,
                },
                {
                    label: 'phi (φ)',
                    min: -360,
                    max: 360,
                },
                {
                    label: 'gamma (γ)',

required: false,
        default: GeoMapDefaultProps.projectionScale,
        controlType: 'range',
        controlGroup: 'Base',
        controlOptions: {
            min: 0,
            max: 200,
        },
    },
    {
        key: 'projectionTranslation',
        type: '{[x: number, y: number]}',
        scopes: '*',
        description: 'Projection x/y translation.',
        required: false,
        default: GeoMapDefaultProps.projectionTranslation,
    },
    {
        key: 'projectionTranslation[0]',
        excludeFromDoc: true,
        scopes: '*',
        description: 'Projection x translation.',
        required: false,
        default: GeoMapDefaultProps.projectionTranslation[0],
        controlType: 'range',
        controlGroup: 'Base',
        controlOptions: {
            min: -1,
            max: 1,
            step: 0.05,
        },
    },

required: false,
        defaultValue: GeoMapDefaultProps.projectionScale,
        type: 'number',
        controlType: 'range',
        group: 'Projection',
        controlOptions: {
            min: 0,
            max: 400,
        },
    },
    {
        key: 'projectionTranslation',
        type: '[number, number]',
        help: 'Projection x/y translation.',
        required: false,
        defaultValue: GeoMapDefaultProps.projectionTranslation,
        controlType: 'numberArray',
        group: 'Projection',
        controlOptions: {
            unit: 'px',
            items: [
                {
                    label: 'x',
                    min: -1,
                    max: 1,
                    step: 0.05,
                },
                {
                    label: 'y',
                    min: -1,
                    max: 1,
                    step: 0.05,

},
    {
        key: 'projectionTranslation',
        type: '{[x: number, y: number]}',
        scopes: '*',
        description: 'Projection x/y translation.',
        required: false,
        default: GeoMapDefaultProps.projectionTranslation,
    },
    {
        key: 'projectionTranslation[0]',
        excludeFromDoc: true,
        scopes: '*',
        description: 'Projection x translation.',
        required: false,
        default: GeoMapDefaultProps.projectionTranslation[0],
        controlType: 'range',
        controlGroup: 'Base',
        controlOptions: {
            min: -1,
            max: 1,
            step: 0.05,
        },
    },
    {
        key: 'projectionTranslation[1]',
        excludeFromDoc: true,
        scopes: '*',
        description: 'Projection y translation.',
        required: false,
        default: GeoMapDefaultProps.projectionTranslation[1],
        controlType: 'range',