@vx/geo

The @vx/geo package provides react components for rendering common and custom geographic projections. <Projection /> can be used to render preset projections (projection='orthographic' | 'albers' | 'albersUsa' | 'mercator' | 'naturalEarth' | 'equalEarth') along with configurable <Graticule />s lines. Convenience projections such as <Mercator /> are also exported, along with <CustomProjection /> and <Graticule /> for full customization.

Installation

npm install --save @vx/geo

Examples

Components

APIs

#<Projection />

# Projection.dataDatum[]required

Array of features to project.

# Projection.center[number, number]optional

Sets the projection’s center to the specified two-element array of longitude and latitude in degrees.

# Projection.centroid(centroid: [number, number], feature: ParsedFeature<Datum>) => ReactNodeoptional

Hook to render anything at the centroid of a feature.

# Projection.children(args: { path: GeoPath<any, GeoPermissibleObjects>; features: ParsedFeature<Datum>[]; }) => ReactNodeoptional

Override render function which is passed the

# Projection.classNamestringoptional

className to apply to feature path elements.

# Projection.clipAnglenumberoptional

Sets the projection’s clipping circle radius to the specified angle in degree.

# Projection.clipExtent[[number, number], [number, number]]optional

Sets the projection’s viewport clip extent to the specified bounds in pixels. extent bounds are specified as an array [x₀, y₀, x₁, y₁], where x₀ is the left-side of the viewport, y₀ is the top, x₁ is the right and y₁ is the bottom.

# Projection.fitExtent[[[number, number], [number, number]], any]optional

Sets the projection’s scale and translate to fit the specified GeoJSON object in the center of the given extent. The extent is specified as an array [x₀, y₀, x₁, y₁], where x₀ is the left side of the bounding box, y₀ is the top, x₁ is the right and y₁ is the bottom.

# Projection.fitSize[[number, number], any]optional

Convenience prop for props.fitExtent where the top-left corner of the extent is 0, 0.

# Projection.graticulePick<GraticuleProps, "children" | "step" | "precision" | "graticule" | "outline" | "extent" | "extentMajor" | "extentMinor" | "stepMajor" | "stepMinor"> & { ...; }optional

If specified, renders a Graticule with the specified props. Specify graticule.foreground = true to be rendered on top of features.

# Projection.graticuleLinesPick<GraticuleProps, "children" | "step" | "precision" | "graticule" | "outline" | "extent" | "extentMajor" | "extentMinor" | "stepMajor" | "stepMinor"> & { ...; }optional

If specified, renders a Graticule lines with the specified props. Specify graticuleLines.foreground = true to be rendered on top of features.

# Projection.graticuleOutlinePick<GraticuleProps, "children" | "step" | "precision" | "graticule" | "lines" | "extent" | "extentMajor" | "extentMinor" | "stepMajor" | "stepMinor"> & { ...; }optional

If specified, renders a Graticule outline with the specified props. Specify graticuleOutline.foreground = true to be rendered on top of features.

# Projection.innerRef(feature: ParsedFeature<Datum>, index: number) => Ref<SVGPathElement>optional

Function invoked for each feature which returns a React.Ref to the projection path element for that feature.

# Projection.pointRadiusnumberoptional

Sets the radius used to display Point and MultiPoint geometries to the specified number.

# Projection.precisionnumberoptional

Sets the threshold for the projection’s adaptive resampling to the specified value in pixels.

# Projection.projectionProjectionoptional

Preset projection name, or custom projection function which returns a GeoProjection.

Default mercator

# Projection.projectionFunc(projection: GeoProjection) => ReactNodeoptional

Hook to render above features, passed the configured projectionFunc.

# Projection.rotate[number, number] | [number, number, number]optional

Sets the projection’s three-axis spherical rotation to the specified angles [lambda, phi , gamma], corresponding to yaw, pitch, and roll.

# Projection.scalenumberoptional

Sets the projection’s scale factor to the specified value. The scale factor corresponds linearly to the distance between projected points; however, absolute scale factors are not equivalent across projections.

# Projection.translate[number, number]optional

Sets the projection’s translation offset, which determines the pixel coordinates of the projection’s center, to the specified two-element array tx, ty.

#<Graticule />

# Graticule.children({ graticule }: { graticule: GeoGraticuleGenerator; }) => ReactNodeoptional

Override render function, which is passed the configured graticule generator.

# Graticule.extent[[number, number], [number, number]]optional

Sets the major and minor extents of the graticule generator, which defaults to ⟨⟨-180°, -80° - ε⟩, ⟨180°, 80° + ε⟩⟩.

# Graticule.extentMajor[[number, number], [number, number]]optional

Sets the major extent of the graticule generator, which defaults to ⟨⟨-180°, -90° + ε⟩, ⟨180°, 90° - ε⟩⟩.

# Graticule.extentMinor[[number, number], [number, number]]optional

Sets the major extent of the graticule generator, which defaults to ⟨⟨-180°, -80° - ε⟩, ⟨180°, 80° + ε⟩⟩.

# Graticule.graticule(multiLineString: MultiLineString) => stringoptional

Render function for graticules which is passed a GeoJSON MultiLineString geometry object representing all meridians and parallels for the graticule.

# Graticule.lines(lineString: LineString) => stringoptional

Render function for graticule lines, which is invoked once for each meridian or parallel for the graticule, and is passed the GeoJSON LineString object representing said meridian or parallel.

# Graticule.outline(polygon: Polygon) => stringoptional

Render function for the outline of the graticule (i.e. along the meridians and parallels defining its extent). It is passed a GeoJSON Polygon geometry object representing the outline.

# Graticule.precisionnumberoptional

Sets the precision of the graticule generator, which defaults to 2.5°.

# Graticule.step[number, number]optional

Sets both the major and minor step of the graticule generator.

# Graticule.stepMajor[number, number]optional

Sets the major step of the graticule generator, which defaults to ⟨90°, 360°⟩.

# Graticule.stepMinor[number, number]optional

Sets the major step of the graticule generator, which defaults to ⟨10°, 10°⟩.

#<Albers />

# Albers.dataDatum[]required

Array of features to project.

# Albers.center[number, number]optional

Sets the projection’s center to the specified two-element array of longitude and latitude in degrees.

# Albers.centroid(centroid: [number, number], feature: ParsedFeature<Datum>) => ReactNodeoptional

Hook to render anything at the centroid of a feature.

# Albers.children(args: { path: GeoPath<any, GeoPermissibleObjects>; features: ParsedFeature<Datum>[]; }) => ReactNodeoptional

Override render function which is passed the

# Albers.classNamestringoptional

className to apply to feature path elements.

# Albers.clipAnglenumberoptional

Sets the projection’s clipping circle radius to the specified angle in degree.

# Albers.clipExtent[[number, number], [number, number]]optional

Sets the projection’s viewport clip extent to the specified bounds in pixels. extent bounds are specified as an array [x₀, y₀, x₁, y₁], where x₀ is the left-side of the viewport, y₀ is the top, x₁ is the right and y₁ is the bottom.

# Albers.fitExtent[[[number, number], [number, number]], any]optional

Sets the projection’s scale and translate to fit the specified GeoJSON object in the center of the given extent. The extent is specified as an array [x₀, y₀, x₁, y₁], where x₀ is the left side of the bounding box, y₀ is the top, x₁ is the right and y₁ is the bottom.

# Albers.fitSize[[number, number], any]optional

Convenience prop for props.fitExtent where the top-left corner of the extent is 0, 0.

# Albers.graticulePick<GraticuleProps, "children" | "step" | "precision" | "graticule" | "outline" | "extent" | "extentMajor" | "extentMinor" | "stepMajor" | "stepMinor"> & { ...; }optional

If specified, renders a Graticule with the specified props. Specify graticule.foreground = true to be rendered on top of features.

# Albers.graticuleLinesPick<GraticuleProps, "children" | "step" | "precision" | "graticule" | "outline" | "extent" | "extentMajor" | "extentMinor" | "stepMajor" | "stepMinor"> & { ...; }optional

If specified, renders a Graticule lines with the specified props. Specify graticuleLines.foreground = true to be rendered on top of features.

# Albers.graticuleOutlinePick<GraticuleProps, "children" | "step" | "precision" | "graticule" | "lines" | "extent" | "extentMajor" | "extentMinor" | "stepMajor" | "stepMinor"> & { ...; }optional

If specified, renders a Graticule outline with the specified props. Specify graticuleOutline.foreground = true to be rendered on top of features.

# Albers.innerRef(feature: ParsedFeature<Datum>, index: number) => Ref<SVGPathElement>optional

Function invoked for each feature which returns a React.Ref to the projection path element for that feature.

# Albers.pointRadiusnumberoptional

Sets the radius used to display Point and MultiPoint geometries to the specified number.

# Albers.precisionnumberoptional

Sets the threshold for the projection’s adaptive resampling to the specified value in pixels.

# Albers.projectionFunc(projection: GeoProjection) => ReactNodeoptional

Hook to render above features, passed the configured projectionFunc.

# Albers.rotate[number, number] | [number, number, number]optional

Sets the projection’s three-axis spherical rotation to the specified angles [lambda, phi , gamma], corresponding to yaw, pitch, and roll.

# Albers.scalenumberoptional

Sets the projection’s scale factor to the specified value. The scale factor corresponds linearly to the distance between projected points; however, absolute scale factors are not equivalent across projections.

# Albers.translate[number, number]optional

Sets the projection’s translation offset, which determines the pixel coordinates of the projection’s center, to the specified two-element array tx, ty.

#<AlbersUsa />

# AlbersUsa.dataDatum[]required

Array of features to project.

# AlbersUsa.center[number, number]optional

Sets the projection’s center to the specified two-element array of longitude and latitude in degrees.

# AlbersUsa.centroid(centroid: [number, number], feature: ParsedFeature<Datum>) => ReactNodeoptional

Hook to render anything at the centroid of a feature.

# AlbersUsa.children(args: { path: GeoPath<any, GeoPermissibleObjects>; features: ParsedFeature<Datum>[]; }) => ReactNodeoptional

Override render function which is passed the

# AlbersUsa.classNamestringoptional

className to apply to feature path elements.

# AlbersUsa.clipAnglenumberoptional

Sets the projection’s clipping circle radius to the specified angle in degree.

# AlbersUsa.clipExtent[[number, number], [number, number]]optional

Sets the projection’s viewport clip extent to the specified bounds in pixels. extent bounds are specified as an array [x₀, y₀, x₁, y₁], where x₀ is the left-side of the viewport, y₀ is the top, x₁ is the right and y₁ is the bottom.

# AlbersUsa.fitExtent[[[number, number], [number, number]], any]optional

Sets the projection’s scale and translate to fit the specified GeoJSON object in the center of the given extent. The extent is specified as an array [x₀, y₀, x₁, y₁], where x₀ is the left side of the bounding box, y₀ is the top, x₁ is the right and y₁ is the bottom.

# AlbersUsa.fitSize[[number, number], any]optional

Convenience prop for props.fitExtent where the top-left corner of the extent is 0, 0.

# AlbersUsa.graticulePick<GraticuleProps, "children" | "step" | "precision" | "graticule" | "outline" | "extent" | "extentMajor" | "extentMinor" | "stepMajor" | "stepMinor"> & { ...; }optional

If specified, renders a Graticule with the specified props. Specify graticule.foreground = true to be rendered on top of features.

# AlbersUsa.graticuleLinesPick<GraticuleProps, "children" | "step" | "precision" | "graticule" | "outline" | "extent" | "extentMajor" | "extentMinor" | "stepMajor" | "stepMinor"> & { ...; }optional

If specified, renders a Graticule lines with the specified props. Specify graticuleLines.foreground = true to be rendered on top of features.

# AlbersUsa.graticuleOutlinePick<GraticuleProps, "children" | "step" | "precision" | "graticule" | "lines" | "extent" | "extentMajor" | "extentMinor" | "stepMajor" | "stepMinor"> & { ...; }optional

If specified, renders a Graticule outline with the specified props. Specify graticuleOutline.foreground = true to be rendered on top of features.

# AlbersUsa.innerRef(feature: ParsedFeature<Datum>, index: number) => Ref<SVGPathElement>optional

Function invoked for each feature which returns a React.Ref to the projection path element for that feature.

# AlbersUsa.pointRadiusnumberoptional

Sets the radius used to display Point and MultiPoint geometries to the specified number.

# AlbersUsa.precisionnumberoptional

Sets the threshold for the projection’s adaptive resampling to the specified value in pixels.

# AlbersUsa.projectionFunc(projection: GeoProjection) => ReactNodeoptional

Hook to render above features, passed the configured projectionFunc.

# AlbersUsa.rotate[number, number] | [number, number, number]optional

Sets the projection’s three-axis spherical rotation to the specified angles [lambda, phi , gamma], corresponding to yaw, pitch, and roll.

# AlbersUsa.scalenumberoptional

Sets the projection’s scale factor to the specified value. The scale factor corresponds linearly to the distance between projected points; however, absolute scale factors are not equivalent across projections.

# AlbersUsa.translate[number, number]optional

Sets the projection’s translation offset, which determines the pixel coordinates of the projection’s center, to the specified two-element array tx, ty.

#<CustomProjection />

# CustomProjection.dataDatum[]required

Array of features to project.

# CustomProjection.center[number, number]optional

Sets the projection’s center to the specified two-element array of longitude and latitude in degrees.

# CustomProjection.centroid(centroid: [number, number], feature: ParsedFeature<Datum>) => ReactNodeoptional

Hook to render anything at the centroid of a feature.

# CustomProjection.children(args: { path: GeoPath<any, GeoPermissibleObjects>; features: ParsedFeature<Datum>[]; }) => ReactNodeoptional

Override render function which is passed the

# CustomProjection.classNamestringoptional

className to apply to feature path elements.

# CustomProjection.clipAnglenumberoptional

Sets the projection’s clipping circle radius to the specified angle in degree.

# CustomProjection.clipExtent[[number, number], [number, number]]optional

Sets the projection’s viewport clip extent to the specified bounds in pixels. extent bounds are specified as an array [x₀, y₀, x₁, y₁], where x₀ is the left-side of the viewport, y₀ is the top, x₁ is the right and y₁ is the bottom.

# CustomProjection.fitExtent[[[number, number], [number, number]], any]optional

Sets the projection’s scale and translate to fit the specified GeoJSON object in the center of the given extent. The extent is specified as an array [x₀, y₀, x₁, y₁], where x₀ is the left side of the bounding box, y₀ is the top, x₁ is the right and y₁ is the bottom.

# CustomProjection.fitSize[[number, number], any]optional

Convenience prop for props.fitExtent where the top-left corner of the extent is 0, 0.

# CustomProjection.graticulePick<GraticuleProps, "children" | "step" | "precision" | "graticule" | "outline" | "extent" | "extentMajor" | "extentMinor" | "stepMajor" | "stepMinor"> & { ...; }optional

If specified, renders a Graticule with the specified props. Specify graticule.foreground = true to be rendered on top of features.

# CustomProjection.graticuleLinesPick<GraticuleProps, "children" | "step" | "precision" | "graticule" | "outline" | "extent" | "extentMajor" | "extentMinor" | "stepMajor" | "stepMinor"> & { ...; }optional

If specified, renders a Graticule lines with the specified props. Specify graticuleLines.foreground = true to be rendered on top of features.

# CustomProjection.graticuleOutlinePick<GraticuleProps, "children" | "step" | "precision" | "graticule" | "lines" | "extent" | "extentMajor" | "extentMinor" | "stepMajor" | "stepMinor"> & { ...; }optional

If specified, renders a Graticule outline with the specified props. Specify graticuleOutline.foreground = true to be rendered on top of features.

# CustomProjection.innerRef(feature: ParsedFeature<Datum>, index: number) => Ref<SVGPathElement>optional

Function invoked for each feature which returns a React.Ref to the projection path element for that feature.

# CustomProjection.pointRadiusnumberoptional

Sets the radius used to display Point and MultiPoint geometries to the specified number.

# CustomProjection.precisionnumberoptional

Sets the threshold for the projection’s adaptive resampling to the specified value in pixels.

# CustomProjection.projectionProjectionoptional

Preset projection name, or custom projection function which returns a GeoProjection.

# CustomProjection.projectionFunc(projection: GeoProjection) => ReactNodeoptional

Hook to render above features, passed the configured projectionFunc.

# CustomProjection.rotate[number, number] | [number, number, number]optional

Sets the projection’s three-axis spherical rotation to the specified angles [lambda, phi , gamma], corresponding to yaw, pitch, and roll.

# CustomProjection.scalenumberoptional

Sets the projection’s scale factor to the specified value. The scale factor corresponds linearly to the distance between projected points; however, absolute scale factors are not equivalent across projections.

# CustomProjection.translate[number, number]optional

Sets the projection’s translation offset, which determines the pixel coordinates of the projection’s center, to the specified two-element array tx, ty.

#<EqualEarth />

# EqualEarth.dataDatum[]required

Array of features to project.

# EqualEarth.center[number, number]optional

Sets the projection’s center to the specified two-element array of longitude and latitude in degrees.

# EqualEarth.centroid(centroid: [number, number], feature: ParsedFeature<Datum>) => ReactNodeoptional

Hook to render anything at the centroid of a feature.

# EqualEarth.children(args: { path: GeoPath<any, GeoPermissibleObjects>; features: ParsedFeature<Datum>[]; }) => ReactNodeoptional

Override render function which is passed the

# EqualEarth.classNamestringoptional

className to apply to feature path elements.

# EqualEarth.clipAnglenumberoptional

Sets the projection’s clipping circle radius to the specified angle in degree.

# EqualEarth.clipExtent[[number, number], [number, number]]optional

Sets the projection’s viewport clip extent to the specified bounds in pixels. extent bounds are specified as an array [x₀, y₀, x₁, y₁], where x₀ is the left-side of the viewport, y₀ is the top, x₁ is the right and y₁ is the bottom.

# EqualEarth.fitExtent[[[number, number], [number, number]], any]optional

Sets the projection’s scale and translate to fit the specified GeoJSON object in the center of the given extent. The extent is specified as an array [x₀, y₀, x₁, y₁], where x₀ is the left side of the bounding box, y₀ is the top, x₁ is the right and y₁ is the bottom.

# EqualEarth.fitSize[[number, number], any]optional

Convenience prop for props.fitExtent where the top-left corner of the extent is 0, 0.

# EqualEarth.graticulePick<GraticuleProps, "children" | "step" | "precision" | "graticule" | "outline" | "extent" | "extentMajor" | "extentMinor" | "stepMajor" | "stepMinor"> & { ...; }optional

If specified, renders a Graticule with the specified props. Specify graticule.foreground = true to be rendered on top of features.

# EqualEarth.graticuleLinesPick<GraticuleProps, "children" | "step" | "precision" | "graticule" | "outline" | "extent" | "extentMajor" | "extentMinor" | "stepMajor" | "stepMinor"> & { ...; }optional

If specified, renders a Graticule lines with the specified props. Specify graticuleLines.foreground = true to be rendered on top of features.

# EqualEarth.graticuleOutlinePick<GraticuleProps, "children" | "step" | "precision" | "graticule" | "lines" | "extent" | "extentMajor" | "extentMinor" | "stepMajor" | "stepMinor"> & { ...; }optional

If specified, renders a Graticule outline with the specified props. Specify graticuleOutline.foreground = true to be rendered on top of features.

# EqualEarth.innerRef(feature: ParsedFeature<Datum>, index: number) => Ref<SVGPathElement>optional

Function invoked for each feature which returns a React.Ref to the projection path element for that feature.

# EqualEarth.pointRadiusnumberoptional

Sets the radius used to display Point and MultiPoint geometries to the specified number.

# EqualEarth.precisionnumberoptional

Sets the threshold for the projection’s adaptive resampling to the specified value in pixels.

# EqualEarth.projectionFunc(projection: GeoProjection) => ReactNodeoptional

Hook to render above features, passed the configured projectionFunc.

# EqualEarth.rotate[number, number] | [number, number, number]optional

Sets the projection’s three-axis spherical rotation to the specified angles [lambda, phi , gamma], corresponding to yaw, pitch, and roll.

# EqualEarth.scalenumberoptional

Sets the projection’s scale factor to the specified value. The scale factor corresponds linearly to the distance between projected points; however, absolute scale factors are not equivalent across projections.

# EqualEarth.translate[number, number]optional

Sets the projection’s translation offset, which determines the pixel coordinates of the projection’s center, to the specified two-element array tx, ty.

#<Mercator />

# Mercator.dataDatum[]required

Array of features to project.

# Mercator.center[number, number]optional

Sets the projection’s center to the specified two-element array of longitude and latitude in degrees.

# Mercator.centroid(centroid: [number, number], feature: ParsedFeature<Datum>) => ReactNodeoptional

Hook to render anything at the centroid of a feature.

# Mercator.children(args: { path: GeoPath<any, GeoPermissibleObjects>; features: ParsedFeature<Datum>[]; }) => ReactNodeoptional

Override render function which is passed the

# Mercator.classNamestringoptional

className to apply to feature path elements.

# Mercator.clipAnglenumberoptional

Sets the projection’s clipping circle radius to the specified angle in degree.

# Mercator.clipExtent[[number, number], [number, number]]optional

Sets the projection’s viewport clip extent to the specified bounds in pixels. extent bounds are specified as an array [x₀, y₀, x₁, y₁], where x₀ is the left-side of the viewport, y₀ is the top, x₁ is the right and y₁ is the bottom.

# Mercator.fitExtent[[[number, number], [number, number]], any]optional

Sets the projection’s scale and translate to fit the specified GeoJSON object in the center of the given extent. The extent is specified as an array [x₀, y₀, x₁, y₁], where x₀ is the left side of the bounding box, y₀ is the top, x₁ is the right and y₁ is the bottom.

# Mercator.fitSize[[number, number], any]optional

Convenience prop for props.fitExtent where the top-left corner of the extent is 0, 0.

# Mercator.graticulePick<GraticuleProps, "children" | "step" | "precision" | "graticule" | "outline" | "extent" | "extentMajor" | "extentMinor" | "stepMajor" | "stepMinor"> & { ...; }optional

If specified, renders a Graticule with the specified props. Specify graticule.foreground = true to be rendered on top of features.

# Mercator.graticuleLinesPick<GraticuleProps, "children" | "step" | "precision" | "graticule" | "outline" | "extent" | "extentMajor" | "extentMinor" | "stepMajor" | "stepMinor"> & { ...; }optional

If specified, renders a Graticule lines with the specified props. Specify graticuleLines.foreground = true to be rendered on top of features.

# Mercator.graticuleOutlinePick<GraticuleProps, "children" | "step" | "precision" | "graticule" | "lines" | "extent" | "extentMajor" | "extentMinor" | "stepMajor" | "stepMinor"> & { ...; }optional

If specified, renders a Graticule outline with the specified props. Specify graticuleOutline.foreground = true to be rendered on top of features.

# Mercator.innerRef(feature: ParsedFeature<Datum>, index: number) => Ref<SVGPathElement>optional

Function invoked for each feature which returns a React.Ref to the projection path element for that feature.

# Mercator.pointRadiusnumberoptional

Sets the radius used to display Point and MultiPoint geometries to the specified number.

# Mercator.precisionnumberoptional

Sets the threshold for the projection’s adaptive resampling to the specified value in pixels.

# Mercator.projectionFunc(projection: GeoProjection) => ReactNodeoptional

Hook to render above features, passed the configured projectionFunc.

# Mercator.rotate[number, number] | [number, number, number]optional

Sets the projection’s three-axis spherical rotation to the specified angles [lambda, phi , gamma], corresponding to yaw, pitch, and roll.

# Mercator.scalenumberoptional

Sets the projection’s scale factor to the specified value. The scale factor corresponds linearly to the distance between projected points; however, absolute scale factors are not equivalent across projections.

# Mercator.translate[number, number]optional

Sets the projection’s translation offset, which determines the pixel coordinates of the projection’s center, to the specified two-element array tx, ty.

#<NaturalEarth />

# NaturalEarth.dataDatum[]required

Array of features to project.

# NaturalEarth.center[number, number]optional

Sets the projection’s center to the specified two-element array of longitude and latitude in degrees.

# NaturalEarth.centroid(centroid: [number, number], feature: ParsedFeature<Datum>) => ReactNodeoptional

Hook to render anything at the centroid of a feature.

# NaturalEarth.children(args: { path: GeoPath<any, GeoPermissibleObjects>; features: ParsedFeature<Datum>[]; }) => ReactNodeoptional

Override render function which is passed the

# NaturalEarth.classNamestringoptional

className to apply to feature path elements.

# NaturalEarth.clipAnglenumberoptional

Sets the projection’s clipping circle radius to the specified angle in degree.

# NaturalEarth.clipExtent[[number, number], [number, number]]optional

Sets the projection’s viewport clip extent to the specified bounds in pixels. extent bounds are specified as an array [x₀, y₀, x₁, y₁], where x₀ is the left-side of the viewport, y₀ is the top, x₁ is the right and y₁ is the bottom.

# NaturalEarth.fitExtent[[[number, number], [number, number]], any]optional

Sets the projection’s scale and translate to fit the specified GeoJSON object in the center of the given extent. The extent is specified as an array [x₀, y₀, x₁, y₁], where x₀ is the left side of the bounding box, y₀ is the top, x₁ is the right and y₁ is the bottom.

# NaturalEarth.fitSize[[number, number], any]optional

Convenience prop for props.fitExtent where the top-left corner of the extent is 0, 0.

# NaturalEarth.graticulePick<GraticuleProps, "children" | "step" | "precision" | "graticule" | "outline" | "extent" | "extentMajor" | "extentMinor" | "stepMajor" | "stepMinor"> & { ...; }optional

If specified, renders a Graticule with the specified props. Specify graticule.foreground = true to be rendered on top of features.

# NaturalEarth.graticuleLinesPick<GraticuleProps, "children" | "step" | "precision" | "graticule" | "outline" | "extent" | "extentMajor" | "extentMinor" | "stepMajor" | "stepMinor"> & { ...; }optional

If specified, renders a Graticule lines with the specified props. Specify graticuleLines.foreground = true to be rendered on top of features.

# NaturalEarth.graticuleOutlinePick<GraticuleProps, "children" | "step" | "precision" | "graticule" | "lines" | "extent" | "extentMajor" | "extentMinor" | "stepMajor" | "stepMinor"> & { ...; }optional

If specified, renders a Graticule outline with the specified props. Specify graticuleOutline.foreground = true to be rendered on top of features.

# NaturalEarth.innerRef(feature: ParsedFeature<Datum>, index: number) => Ref<SVGPathElement>optional

Function invoked for each feature which returns a React.Ref to the projection path element for that feature.

# NaturalEarth.pointRadiusnumberoptional

Sets the radius used to display Point and MultiPoint geometries to the specified number.

# NaturalEarth.precisionnumberoptional

Sets the threshold for the projection’s adaptive resampling to the specified value in pixels.

# NaturalEarth.projectionFunc(projection: GeoProjection) => ReactNodeoptional

Hook to render above features, passed the configured projectionFunc.

# NaturalEarth.rotate[number, number] | [number, number, number]optional

Sets the projection’s three-axis spherical rotation to the specified angles [lambda, phi , gamma], corresponding to yaw, pitch, and roll.

# NaturalEarth.scalenumberoptional

Sets the projection’s scale factor to the specified value. The scale factor corresponds linearly to the distance between projected points; however, absolute scale factors are not equivalent across projections.

# NaturalEarth.translate[number, number]optional

Sets the projection’s translation offset, which determines the pixel coordinates of the projection’s center, to the specified two-element array tx, ty.

#<Orthographic />

# Orthographic.dataDatum[]required

Array of features to project.

# Orthographic.center[number, number]optional

Sets the projection’s center to the specified two-element array of longitude and latitude in degrees.

# Orthographic.centroid(centroid: [number, number], feature: ParsedFeature<Datum>) => ReactNodeoptional

Hook to render anything at the centroid of a feature.

# Orthographic.children(args: { path: GeoPath<any, GeoPermissibleObjects>; features: ParsedFeature<Datum>[]; }) => ReactNodeoptional

Override render function which is passed the

# Orthographic.classNamestringoptional

className to apply to feature path elements.

# Orthographic.clipAnglenumberoptional

Sets the projection’s clipping circle radius to the specified angle in degree.

# Orthographic.clipExtent[[number, number], [number, number]]optional

Sets the projection’s viewport clip extent to the specified bounds in pixels. extent bounds are specified as an array [x₀, y₀, x₁, y₁], where x₀ is the left-side of the viewport, y₀ is the top, x₁ is the right and y₁ is the bottom.

# Orthographic.fitExtent[[[number, number], [number, number]], any]optional

Sets the projection’s scale and translate to fit the specified GeoJSON object in the center of the given extent. The extent is specified as an array [x₀, y₀, x₁, y₁], where x₀ is the left side of the bounding box, y₀ is the top, x₁ is the right and y₁ is the bottom.

# Orthographic.fitSize[[number, number], any]optional

Convenience prop for props.fitExtent where the top-left corner of the extent is 0, 0.

# Orthographic.graticulePick<GraticuleProps, "children" | "step" | "precision" | "graticule" | "outline" | "extent" | "extentMajor" | "extentMinor" | "stepMajor" | "stepMinor"> & { ...; }optional

If specified, renders a Graticule with the specified props. Specify graticule.foreground = true to be rendered on top of features.

# Orthographic.graticuleLinesPick<GraticuleProps, "children" | "step" | "precision" | "graticule" | "outline" | "extent" | "extentMajor" | "extentMinor" | "stepMajor" | "stepMinor"> & { ...; }optional

If specified, renders a Graticule lines with the specified props. Specify graticuleLines.foreground = true to be rendered on top of features.

# Orthographic.graticuleOutlinePick<GraticuleProps, "children" | "step" | "precision" | "graticule" | "lines" | "extent" | "extentMajor" | "extentMinor" | "stepMajor" | "stepMinor"> & { ...; }optional

If specified, renders a Graticule outline with the specified props. Specify graticuleOutline.foreground = true to be rendered on top of features.

# Orthographic.innerRef(feature: ParsedFeature<Datum>, index: number) => Ref<SVGPathElement>optional

Function invoked for each feature which returns a React.Ref to the projection path element for that feature.

# Orthographic.pointRadiusnumberoptional

Sets the radius used to display Point and MultiPoint geometries to the specified number.

# Orthographic.precisionnumberoptional

Sets the threshold for the projection’s adaptive resampling to the specified value in pixels.

# Orthographic.projectionFunc(projection: GeoProjection) => ReactNodeoptional

Hook to render above features, passed the configured projectionFunc.

# Orthographic.rotate[number, number] | [number, number, number]optional

Sets the projection’s three-axis spherical rotation to the specified angles [lambda, phi , gamma], corresponding to yaw, pitch, and roll.

# Orthographic.scalenumberoptional

Sets the projection’s scale factor to the specified value. The scale factor corresponds linearly to the distance between projected points; however, absolute scale factors are not equivalent across projections.

# Orthographic.translate[number, number]optional

Sets the projection’s translation offset, which determines the pixel coordinates of the projection’s center, to the specified two-element array tx, ty.