Data utilities
Umbrella package
@visx/geo
The @visx/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 @visx/geo
Examples
<Geo.Mercator />
<Geo.CustomProjection />
<Geo.AlbersUsa />
APIs
#<Projection />
Array of features to project.
[number, number]
Sets the projection’s center to the specified two-element array of longitude and latitude in degrees.
(centroid: [number, number], feature: ParsedFeature<Datum>) => ReactNode
Hook to render anything at the centroid of a feature.
(args: { path: GeoPath<unknown, GeoPermissibleObjects>; features: ParsedFeature<Datum>[]; projection: GeoProjection; }) => ReactNode
Override render function which is passed path data and a copy of the constructed projection.
string
className to apply to feature path elements.
number
Sets the projection’s clipping circle radius to the specified angle in degree.
[[number, number], [number, number]]
[[[number, number], [number, number]], ExtendedFeature<GeoGeometryObjects, { [name: string]: any; }>]
[[number, number], ExtendedFeature<GeoGeometryObjects, { [name: string]: any; }>]
Convenience prop for props.fitExtent where the top-left corner of the extent is 0, 0.
Pick<GraticuleProps, "children" | "step" | "graticule" | "outline" | "extent" | "extentMajor" | "extentMinor" | "stepMajor" | "stepMinor" | "precision"> & { ...; }
If specified, renders a Graticule with the specified props. Specify graticule.foreground = true
to be rendered on top of features.
Pick<GraticuleProps, "children" | "step" | "graticule" | "outline" | "extent" | "extentMajor" | "extentMinor" | "stepMajor" | "stepMinor" | "precision"> & { ...; }
If specified, renders a Graticule lines with the specified props. Specify graticuleLines.foreground = true
to be rendered on top of features.
Pick<GraticuleProps, "children" | "step" | "graticule" | "lines" | "extent" | "extentMajor" | "extentMinor" | "stepMajor" | "stepMinor" | "precision"> & { ...; }
If specified, renders a Graticule outline with the specified props. Specify graticuleOutline.foreground = true
to be rendered on top of features.
(feature: ParsedFeature<Datum>, index: number) => Ref<SVGPathElement>
Function invoked for each feature which returns a React.Ref to the projection path element for that feature.
number
Sets the radius used to display Point and MultiPoint geometries to the specified number.
number
Sets the threshold for the projection’s adaptive resampling to the specified value in pixels.
Projection
Preset projection name, or custom projection function which returns a GeoProjection.
Default mercator
(projection: GeoProjection) => ReactNode
Hook to render above features, passed the configured projectionFunc.
[number, number] | [number, number, number]
Sets the projection’s three-axis spherical rotation to the specified angles [lambda, phi , gamma], corresponding to yaw, pitch, and roll.
number
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.
#<Graticule />
({ graticule }: { graticule: GeoGraticuleGenerator; }) => ReactNode
Override render function, which is passed the configured graticule generator.
[[number, number], [number, number]]
Sets the major and minor extents of the graticule generator, which defaults to ⟨⟨-180°, -80° - ε⟩, ⟨180°, 80° + ε⟩⟩.
[[number, number], [number, number]]
Sets the major extent of the graticule generator, which defaults to ⟨⟨-180°, -90° + ε⟩, ⟨180°, 90° - ε⟩⟩.
[[number, number], [number, number]]
Sets the major extent of the graticule generator, which defaults to ⟨⟨-180°, -80° - ε⟩, ⟨180°, 80° + ε⟩⟩.
(multiLineString: MultiLineString) => string
Render function for graticules which is passed a GeoJSON MultiLineString geometry object representing all meridians and parallels for the graticule.
(lineString: LineString) => string
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.
(polygon: Polygon) => string
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.
number
Sets the precision of the graticule generator, which defaults to 2.5°.
[number, number]
Sets both the major and minor step of the graticule generator.
[number, number]
Sets the major step of the graticule generator, which defaults to ⟨90°, 360°⟩.
[number, number]
Sets the major step of the graticule generator, which defaults to ⟨10°, 10°⟩.
#<Albers />
Array of features to project.
[number, number]
Sets the projection’s center to the specified two-element array of longitude and latitude in degrees.
(centroid: [number, number], feature: ParsedFeature<Datum>) => ReactNode
Hook to render anything at the centroid of a feature.
(args: { path: GeoPath<unknown, GeoPermissibleObjects>; features: ParsedFeature<Datum>[]; projection: GeoProjection; }) => ReactNode
Override render function which is passed path data and a copy of the constructed projection.
string
className to apply to feature path elements.
number
Sets the projection’s clipping circle radius to the specified angle in degree.
[[number, number], [number, number]]
[[[number, number], [number, number]], ExtendedFeature<GeoGeometryObjects, { [name: string]: any; }>]
[[number, number], ExtendedFeature<GeoGeometryObjects, { [name: string]: any; }>]
Convenience prop for props.fitExtent where the top-left corner of the extent is 0, 0.
Pick<GraticuleProps, "children" | "step" | "graticule" | "outline" | "extent" | "extentMajor" | "extentMinor" | "stepMajor" | "stepMinor" | "precision"> & { ...; }
If specified, renders a Graticule with the specified props. Specify graticule.foreground = true
to be rendered on top of features.
Pick<GraticuleProps, "children" | "step" | "graticule" | "outline" | "extent" | "extentMajor" | "extentMinor" | "stepMajor" | "stepMinor" | "precision"> & { ...; }
If specified, renders a Graticule lines with the specified props. Specify graticuleLines.foreground = true
to be rendered on top of features.
Pick<GraticuleProps, "children" | "step" | "graticule" | "lines" | "extent" | "extentMajor" | "extentMinor" | "stepMajor" | "stepMinor" | "precision"> & { ...; }
If specified, renders a Graticule outline with the specified props. Specify graticuleOutline.foreground = true
to be rendered on top of features.
(feature: ParsedFeature<Datum>, index: number) => Ref<SVGPathElement>
Function invoked for each feature which returns a React.Ref to the projection path element for that feature.
number
Sets the radius used to display Point and MultiPoint geometries to the specified number.
number
Sets the threshold for the projection’s adaptive resampling to the specified value in pixels.
(projection: GeoProjection) => ReactNode
Hook to render above features, passed the configured projectionFunc.
[number, number] | [number, number, number]
Sets the projection’s three-axis spherical rotation to the specified angles [lambda, phi , gamma], corresponding to yaw, pitch, and roll.
number
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 />
Array of features to project.
[number, number]
Sets the projection’s center to the specified two-element array of longitude and latitude in degrees.
(centroid: [number, number], feature: ParsedFeature<Datum>) => ReactNode
Hook to render anything at the centroid of a feature.
(args: { path: GeoPath<unknown, GeoPermissibleObjects>; features: ParsedFeature<Datum>[]; projection: GeoProjection; }) => ReactNode
Override render function which is passed path data and a copy of the constructed projection.
string
className to apply to feature path elements.
number
Sets the projection’s clipping circle radius to the specified angle in degree.
[[number, number], [number, number]]
[[[number, number], [number, number]], ExtendedFeature<GeoGeometryObjects, { [name: string]: any; }>]
[[number, number], ExtendedFeature<GeoGeometryObjects, { [name: string]: any; }>]
Convenience prop for props.fitExtent where the top-left corner of the extent is 0, 0.
Pick<GraticuleProps, "children" | "step" | "graticule" | "outline" | "extent" | "extentMajor" | "extentMinor" | "stepMajor" | "stepMinor" | "precision"> & { ...; }
If specified, renders a Graticule with the specified props. Specify graticule.foreground = true
to be rendered on top of features.
Pick<GraticuleProps, "children" | "step" | "graticule" | "outline" | "extent" | "extentMajor" | "extentMinor" | "stepMajor" | "stepMinor" | "precision"> & { ...; }
If specified, renders a Graticule lines with the specified props. Specify graticuleLines.foreground = true
to be rendered on top of features.
Pick<GraticuleProps, "children" | "step" | "graticule" | "lines" | "extent" | "extentMajor" | "extentMinor" | "stepMajor" | "stepMinor" | "precision"> & { ...; }
If specified, renders a Graticule outline with the specified props. Specify graticuleOutline.foreground = true
to be rendered on top of features.
(feature: ParsedFeature<Datum>, index: number) => Ref<SVGPathElement>
Function invoked for each feature which returns a React.Ref to the projection path element for that feature.
number
Sets the radius used to display Point and MultiPoint geometries to the specified number.
number
Sets the threshold for the projection’s adaptive resampling to the specified value in pixels.
(projection: GeoProjection) => ReactNode
Hook to render above features, passed the configured projectionFunc.
[number, number] | [number, number, number]
Sets the projection’s three-axis spherical rotation to the specified angles [lambda, phi , gamma], corresponding to yaw, pitch, and roll.
number
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 />
Array of features to project.
[number, number]
Sets the projection’s center to the specified two-element array of longitude and latitude in degrees.
(centroid: [number, number], feature: ParsedFeature<Datum>) => ReactNode
Hook to render anything at the centroid of a feature.
(args: { path: GeoPath<unknown, GeoPermissibleObjects>; features: ParsedFeature<Datum>[]; projection: GeoProjection; }) => ReactNode
Override render function which is passed path data and a copy of the constructed projection.
string
className to apply to feature path elements.
number
Sets the projection’s clipping circle radius to the specified angle in degree.
[[number, number], [number, number]]
[[[number, number], [number, number]], ExtendedFeature<GeoGeometryObjects, { [name: string]: any; }>]
[[number, number], ExtendedFeature<GeoGeometryObjects, { [name: string]: any; }>]
Convenience prop for props.fitExtent where the top-left corner of the extent is 0, 0.
Pick<GraticuleProps, "children" | "step" | "graticule" | "outline" | "extent" | "extentMajor" | "extentMinor" | "stepMajor" | "stepMinor" | "precision"> & { ...; }
If specified, renders a Graticule with the specified props. Specify graticule.foreground = true
to be rendered on top of features.
Pick<GraticuleProps, "children" | "step" | "graticule" | "outline" | "extent" | "extentMajor" | "extentMinor" | "stepMajor" | "stepMinor" | "precision"> & { ...; }
If specified, renders a Graticule lines with the specified props. Specify graticuleLines.foreground = true
to be rendered on top of features.
Pick<GraticuleProps, "children" | "step" | "graticule" | "lines" | "extent" | "extentMajor" | "extentMinor" | "stepMajor" | "stepMinor" | "precision"> & { ...; }
If specified, renders a Graticule outline with the specified props. Specify graticuleOutline.foreground = true
to be rendered on top of features.
(feature: ParsedFeature<Datum>, index: number) => Ref<SVGPathElement>
Function invoked for each feature which returns a React.Ref to the projection path element for that feature.
number
Sets the radius used to display Point and MultiPoint geometries to the specified number.
number
Sets the threshold for the projection’s adaptive resampling to the specified value in pixels.
Projection
Preset projection name, or custom projection function which returns a GeoProjection.
(projection: GeoProjection) => ReactNode
Hook to render above features, passed the configured projectionFunc.
[number, number] | [number, number, number]
Sets the projection’s three-axis spherical rotation to the specified angles [lambda, phi , gamma], corresponding to yaw, pitch, and roll.
number
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 />
Array of features to project.
[number, number]
Sets the projection’s center to the specified two-element array of longitude and latitude in degrees.
(centroid: [number, number], feature: ParsedFeature<Datum>) => ReactNode
Hook to render anything at the centroid of a feature.
(args: { path: GeoPath<unknown, GeoPermissibleObjects>; features: ParsedFeature<Datum>[]; projection: GeoProjection; }) => ReactNode
Override render function which is passed path data and a copy of the constructed projection.
string
className to apply to feature path elements.
number
Sets the projection’s clipping circle radius to the specified angle in degree.
[[number, number], [number, number]]
[[[number, number], [number, number]], ExtendedFeature<GeoGeometryObjects, { [name: string]: any; }>]
[[number, number], ExtendedFeature<GeoGeometryObjects, { [name: string]: any; }>]
Convenience prop for props.fitExtent where the top-left corner of the extent is 0, 0.
Pick<GraticuleProps, "children" | "step" | "graticule" | "outline" | "extent" | "extentMajor" | "extentMinor" | "stepMajor" | "stepMinor" | "precision"> & { ...; }
If specified, renders a Graticule with the specified props. Specify graticule.foreground = true
to be rendered on top of features.
Pick<GraticuleProps, "children" | "step" | "graticule" | "outline" | "extent" | "extentMajor" | "extentMinor" | "stepMajor" | "stepMinor" | "precision"> & { ...; }
If specified, renders a Graticule lines with the specified props. Specify graticuleLines.foreground = true
to be rendered on top of features.
Pick<GraticuleProps, "children" | "step" | "graticule" | "lines" | "extent" | "extentMajor" | "extentMinor" | "stepMajor" | "stepMinor" | "precision"> & { ...; }
If specified, renders a Graticule outline with the specified props. Specify graticuleOutline.foreground = true
to be rendered on top of features.
(feature: ParsedFeature<Datum>, index: number) => Ref<SVGPathElement>
Function invoked for each feature which returns a React.Ref to the projection path element for that feature.
number
Sets the radius used to display Point and MultiPoint geometries to the specified number.
number
Sets the threshold for the projection’s adaptive resampling to the specified value in pixels.
(projection: GeoProjection) => ReactNode
Hook to render above features, passed the configured projectionFunc.
[number, number] | [number, number, number]
Sets the projection’s three-axis spherical rotation to the specified angles [lambda, phi , gamma], corresponding to yaw, pitch, and roll.
number
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 />
Array of features to project.
[number, number]
Sets the projection’s center to the specified two-element array of longitude and latitude in degrees.
(centroid: [number, number], feature: ParsedFeature<Datum>) => ReactNode
Hook to render anything at the centroid of a feature.
(args: { path: GeoPath<unknown, GeoPermissibleObjects>; features: ParsedFeature<Datum>[]; projection: GeoProjection; }) => ReactNode
Override render function which is passed path data and a copy of the constructed projection.
string
className to apply to feature path elements.
number
Sets the projection’s clipping circle radius to the specified angle in degree.
[[number, number], [number, number]]
[[[number, number], [number, number]], ExtendedFeature<GeoGeometryObjects, { [name: string]: any; }>]
[[number, number], ExtendedFeature<GeoGeometryObjects, { [name: string]: any; }>]
Convenience prop for props.fitExtent where the top-left corner of the extent is 0, 0.
Pick<GraticuleProps, "children" | "step" | "graticule" | "outline" | "extent" | "extentMajor" | "extentMinor" | "stepMajor" | "stepMinor" | "precision"> & { ...; }
If specified, renders a Graticule with the specified props. Specify graticule.foreground = true
to be rendered on top of features.
Pick<GraticuleProps, "children" | "step" | "graticule" | "outline" | "extent" | "extentMajor" | "extentMinor" | "stepMajor" | "stepMinor" | "precision"> & { ...; }
If specified, renders a Graticule lines with the specified props. Specify graticuleLines.foreground = true
to be rendered on top of features.
Pick<GraticuleProps, "children" | "step" | "graticule" | "lines" | "extent" | "extentMajor" | "extentMinor" | "stepMajor" | "stepMinor" | "precision"> & { ...; }
If specified, renders a Graticule outline with the specified props. Specify graticuleOutline.foreground = true
to be rendered on top of features.
(feature: ParsedFeature<Datum>, index: number) => Ref<SVGPathElement>
Function invoked for each feature which returns a React.Ref to the projection path element for that feature.
number
Sets the radius used to display Point and MultiPoint geometries to the specified number.
number
Sets the threshold for the projection’s adaptive resampling to the specified value in pixels.
(projection: GeoProjection) => ReactNode
Hook to render above features, passed the configured projectionFunc.
[number, number] | [number, number, number]
Sets the projection’s three-axis spherical rotation to the specified angles [lambda, phi , gamma], corresponding to yaw, pitch, and roll.
number
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 />
Array of features to project.
[number, number]
Sets the projection’s center to the specified two-element array of longitude and latitude in degrees.
(centroid: [number, number], feature: ParsedFeature<Datum>) => ReactNode
Hook to render anything at the centroid of a feature.
(args: { path: GeoPath<unknown, GeoPermissibleObjects>; features: ParsedFeature<Datum>[]; projection: GeoProjection; }) => ReactNode
Override render function which is passed path data and a copy of the constructed projection.
string
className to apply to feature path elements.
number
Sets the projection’s clipping circle radius to the specified angle in degree.
[[number, number], [number, number]]
[[[number, number], [number, number]], ExtendedFeature<GeoGeometryObjects, { [name: string]: any; }>]
[[number, number], ExtendedFeature<GeoGeometryObjects, { [name: string]: any; }>]
Convenience prop for props.fitExtent where the top-left corner of the extent is 0, 0.
Pick<GraticuleProps, "children" | "step" | "graticule" | "outline" | "extent" | "extentMajor" | "extentMinor" | "stepMajor" | "stepMinor" | "precision"> & { ...; }
If specified, renders a Graticule with the specified props. Specify graticule.foreground = true
to be rendered on top of features.
Pick<GraticuleProps, "children" | "step" | "graticule" | "outline" | "extent" | "extentMajor" | "extentMinor" | "stepMajor" | "stepMinor" | "precision"> & { ...; }
If specified, renders a Graticule lines with the specified props. Specify graticuleLines.foreground = true
to be rendered on top of features.
Pick<GraticuleProps, "children" | "step" | "graticule" | "lines" | "extent" | "extentMajor" | "extentMinor" | "stepMajor" | "stepMinor" | "precision"> & { ...; }
If specified, renders a Graticule outline with the specified props. Specify graticuleOutline.foreground = true
to be rendered on top of features.
(feature: ParsedFeature<Datum>, index: number) => Ref<SVGPathElement>
Function invoked for each feature which returns a React.Ref to the projection path element for that feature.
number
Sets the radius used to display Point and MultiPoint geometries to the specified number.
number
Sets the threshold for the projection’s adaptive resampling to the specified value in pixels.
(projection: GeoProjection) => ReactNode
Hook to render above features, passed the configured projectionFunc.
[number, number] | [number, number, number]
Sets the projection’s three-axis spherical rotation to the specified angles [lambda, phi , gamma], corresponding to yaw, pitch, and roll.
number
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 />
Array of features to project.
[number, number]
Sets the projection’s center to the specified two-element array of longitude and latitude in degrees.
(centroid: [number, number], feature: ParsedFeature<Datum>) => ReactNode
Hook to render anything at the centroid of a feature.
(args: { path: GeoPath<unknown, GeoPermissibleObjects>; features: ParsedFeature<Datum>[]; projection: GeoProjection; }) => ReactNode
Override render function which is passed path data and a copy of the constructed projection.
string
className to apply to feature path elements.
number
Sets the projection’s clipping circle radius to the specified angle in degree.
[[number, number], [number, number]]
[[[number, number], [number, number]], ExtendedFeature<GeoGeometryObjects, { [name: string]: any; }>]
[[number, number], ExtendedFeature<GeoGeometryObjects, { [name: string]: any; }>]
Convenience prop for props.fitExtent where the top-left corner of the extent is 0, 0.
Pick<GraticuleProps, "children" | "step" | "graticule" | "outline" | "extent" | "extentMajor" | "extentMinor" | "stepMajor" | "stepMinor" | "precision"> & { ...; }
If specified, renders a Graticule with the specified props. Specify graticule.foreground = true
to be rendered on top of features.
Pick<GraticuleProps, "children" | "step" | "graticule" | "outline" | "extent" | "extentMajor" | "extentMinor" | "stepMajor" | "stepMinor" | "precision"> & { ...; }
If specified, renders a Graticule lines with the specified props. Specify graticuleLines.foreground = true
to be rendered on top of features.
Pick<GraticuleProps, "children" | "step" | "graticule" | "lines" | "extent" | "extentMajor" | "extentMinor" | "stepMajor" | "stepMinor" | "precision"> & { ...; }
If specified, renders a Graticule outline with the specified props. Specify graticuleOutline.foreground = true
to be rendered on top of features.
(feature: ParsedFeature<Datum>, index: number) => Ref<SVGPathElement>
Function invoked for each feature which returns a React.Ref to the projection path element for that feature.
number
Sets the radius used to display Point and MultiPoint geometries to the specified number.
number
Sets the threshold for the projection’s adaptive resampling to the specified value in pixels.
(projection: GeoProjection) => ReactNode
Hook to render above features, passed the configured projectionFunc.
[number, number] | [number, number, number]
Sets the projection’s three-axis spherical rotation to the specified angles [lambda, phi , gamma], corresponding to yaw, pitch, and roll.
number
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.