@datalith/gridmap

@datalith/gridmap

yarn add @datalith/gridmap

Docs

<GridMap />

Name	Default	Type	Description
className		string	Custom css classes to pass to the SVG
width *		number	Width of the SVG
height *		number	Height of the SVG
data *		Array<{ v: [number, number], y?: number, z?: string }> Array<string>	Array of data
featureCollection *		FeatureCollection	GeoJson object
projection	geoNaturalEarth1()	GeoProjection	D3 GeoProjection to map coordinates
customRender	props => <circle cx={d.x} cy={d.y} r={value} {...props} />	(d: { x: number; y: number; i: number; j: number; value: number; datum?: Datumdatalith }, props: any, ) => JSX.Element	Return custom element to render as data point
side	5	number	Grid cell dimension
fill	true	boolean	Whether to add the fill color
stroke	false	boolean	Whether to add the stroke color
tooltip		(datum) => string	Return HTML or text as a string to show on element mouseover

<GridMapUs />

Name	Default	Type	Description
className		string	Custom css classes to pass to the SVG
width *		number	Width of the SVG
height *		number	Height of the SVG
data *		Array<{ v: [number, number], y?: number, z?: string }> Array<string>	Array of data
projection	geoAlbersUsa()	GeoProjection	D3 GeoProjection to map coordinates
customRender	props => <circle cx={d.x} cy={d.y} r={value} {...props} />	(d: { x: number; y: number; i: number; j: number; value: number; datum?: Datumdatalith }, props: any, ) => JSX.Element	Return custom element to render as data point
side	5	number	Grid cell dimension
fill	true	boolean	Whether to add the fill color
stroke	false	boolean	Whether to add the stroke color
tooltip		(datum) => string	Return HTML or text as a string to show on element mouseover

<GridMapWorld />

Name	Default	Type	Description
className		string	Custom css classes to pass to the SVG
width *		number	Width of the SVG
height *		number	Height of the SVG
data *		Array<{ v: [number, number], y?: number, z?: string }> Array<string>	Array of data
projection	geoNaturalEarth1()	GeoProjection	D3 GeoProjection to map coordinates
customRender	props => <circle cx={d.x} cy={d.y} r={value} {...props} />	(d: { x: number; y: number; i: number; j: number; value: number; datum?: Datumdatalith }, props: any, ) => JSX.Element	Return custom element to render as data point
side	5	number	Grid cell dimension
fill	true	boolean	Whether to add the fill color
stroke	false	boolean	Whether to add the stroke color
tooltip		(datum) => string	Return HTML or text as a string to show on element mouseover