@datalith/gridmap

yarn add @datalith/gridmap

Docs

<GridMap />

| Name | Default | Type | Description | | :-------------------------- | :------------------- | :--------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------- | | className | | string | Custom css classes to apply to the SVG | | style | | React.CSSProperties | Custom style object to apply to the SVG | | additionalElements | | JSX.Element | Optional elements to add to the SVG | | size | | { width: number; height: number } | Width and Height of the SVG. Default is parent node size. | | data * | | Array<Datum> or Array<[number, number]> | Array of data | | coords | (Datum) => Datum | (Datum) => [number, number] or [number, number] | Coords accessor | | value | 10 | (Datum) => number ornumber | Value accessor | | valueInactive | 1 | number | Value Inactive accessor | | fill | | (Datum) => string or string | Fill color accessor | | fillInactive | #000 | string | Fill Inactive accessor | | fillOpacity | | (Datum) => number or number | Fill Opacity accessor | | fillOpacityInactive | 0.3 | number | Fill Opacity Inactive accessor | | fillInactive | #000 | string | Fill Inactive accessor | | stroke | | (Datum) => string or string | Stroke color accessor | | strokeInactive | transparent | string | Stroke Inactive accessor | | strokeOpacity | | (Datum) => number or number | Stroke Opacity accessor | | strokeOpacityInactive | 0.3 | number | Stroke Opacity Inactive accessor | | strokeInactive | transparent | string | Stroke Inactive accessor | | featureCollection * | | FeatureCollection | GeoJson object | | projection | geoNaturalEarth1() | GeoProjection | D3 GeoProjection to map coordinates | | customRender | | (d: { x: number; y: number; i: number; j: number; value: number; datum?: Datum }, props: any, ) => JSX.Element | Return custom element to render as data point | | side | 5 | number | Grid cell dimension | | 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 apply to the SVG | | style | | React.CSSProperties | Custom style object to apply to the SVG | | additionalElements | | JSX.Element | Optional elements to add to the SVG | | size | | { width: number; height: number } | Width and Height of the SVG. Default is parent node size. | | data* | | Array<Datum> or Array<[number, number]> | Array of data | | coords | (Datum) => Datum | (Datum) => [number, number] or [number, number] | Coords accessor | | value | 10 | (Datum) => number ornumber | Value accessor | | valueInactive | 1 | number | Value Inactive accessor | | fill | | (Datum) => string or string | Fill color accessor | | fillInactive | #000 | string | Fill Inactive accessor | | fillOpacity | | (Datum) => number or number | Fill Opacity accessor | | fillOpacityInactive | 0.3 | number | Fill Opacity Inactive accessor | | fillInactive | #000 | string | Fill Inactive accessor | | stroke | | (Datum) => string or string | Stroke color accessor | | strokeInactive | transparent | string | Stroke Inactive accessor | | strokeOpacity | | (Datum) => number or number | Stroke Opacity accessor | | strokeOpacityInactive | 0.3 | number | Stroke Opacity Inactive accessor | | strokeInactive | transparent | string | Stroke Inactive accessor | | projection | geoAlbersUsa() | GeoProjection | D3 GeoProjection to map coordinates | | customRender | | (d: { x: number; y: number; i: number; j: number; value: number; datum?: Datum }, props: any, ) => JSX.Element | Return custom element to render as data point | | side | 5 | number | Grid cell dimension | | 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 apply to the SVG | | style | | React.CSSProperties | Custom style object to apply to the SVG | | additionalElements | | JSX.Element | Optional elements to add to the SVG | | size | | { width: number; height: number } | Width and Height of the SVG. Default is parent node size. | | data* | | Array<Datum> or Array<[number, number]> | Array of data | | coords | (Datum) => Datum | (Datum) => [number, number] or [number, number] | Coords accessor | | value | 10 | (Datum) => number ornumber | Value accessor | | valueInactive | 1 | number | Value Inactive accessor | | fill | | (Datum) => string or string | Fill color accessor | | fillInactive | #000 | string | Fill Inactive accessor | | fillOpacity | | (Datum) => number or number | Fill Opacity accessor | | fillOpacityInactive | 0.3 | number | Fill Opacity Inactive accessor | | fillInactive | #000 | string | Fill Inactive accessor | | stroke | | (Datum) => string or string | Stroke color accessor | | strokeInactive | transparent | string | Stroke Inactive accessor | | strokeOpacity | | (Datum) => number or number | Stroke Opacity accessor | | strokeOpacityInactive | 0.3 | number | Stroke Opacity Inactive accessor | | strokeInactive | transparent | string | Stroke Inactive accessor | | projection | geoNaturalEarth1() | GeoProjection | D3 GeoProjection to map coordinates | | customRender | | (d: { x: number; y: number; i: number; j: number; value: number; datum?: Datum }, props: any, ) => JSX.Element | Return custom element to render as data point | | side | 5 | number | Grid cell dimension | | tooltip | | (Datum) => string | Return HTML or text as a string to show on element mouseover |