@datalith/gridmap
v0.12.1 datalith react d3 visualizations charts
@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 |