# @datalith/pixelmap > datalith pixelmap Latest version **0.12.1** (published 2021-04-09) · MIT license · 0 weekly downloads ## Install ```sh npm install @datalith/pixelmap pnpm add @datalith/pixelmap yarn add @datalith/pixelmap bun add @datalith/pixelmap ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities. Warnings: low downloads; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.12.1 | | Published | 2021-04-09 | | First published | 2019-06-14 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 9 | | Unpacked size | 19.5 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 30 | | Author | @lucafalasco | | Maintainers | lucafalasco | | Keywords | datalith, react, d3, visualizations, charts | ## Links - npm: https://www.npmjs.com/package/@datalith/pixelmap - Repository: https://github.com/lucafalasco/datalith - Homepage: https://github.com/lucafalasco/datalith#readme - Issues: https://github.com/lucafalasco/datalith/issues - npm.io page: https://npm.io/package/@datalith/pixelmap ## Dependencies (9) - [d3-geo](https://npm.io/package/d3-geo.md) ^1.11.3 - [lodash](https://npm.io/package/lodash.md) ^4.17.11 - [d3-array](https://npm.io/package/d3-array.md) ^2.1.0 - [d3-scale](https://npm.io/package/d3-scale.md) ^3.0.0 - [topojson](https://npm.io/package/topojson.md) ^3.0.2 - [us-atlas](https://npm.io/package/us-atlas.md) ^2.1.0 - [react-tooltip](https://npm.io/package/react-tooltip.md) ^3.10.0 - [@datalith/util](https://npm.io/package/@datalith/util.md) ^0.12.1 - [@datalith/gridmap](https://npm.io/package/@datalith/gridmap.md) ^0.12.1 ## Alternatives - [d3-force-3d](https://npm.io/package/d3-force-3d.md) — 1.0M weekly downloads - [ng2-charts](https://npm.io/package/ng2-charts.md) — 486.8K weekly downloads - [@arcgis/core](https://npm.io/package/@arcgis/core.md) — 257.8K weekly downloads - [react-sparklines](https://npm.io/package/react-sparklines.md) — 249.3K weekly downloads - [react-native-gifted-charts](https://npm.io/package/react-native-gifted-charts.md) — 182.3K weekly downloads ## Recent versions - 0.12.1 (latest) — 2021-04-09 - 0.12.0 — 2020-07-02 - 0.11.0 — 2020-06-17 - 0.10.1 — 2020-05-31 - 0.10.0 — 2020-04-22 - 0.9.0 — 2020-04-09 - 0.8.0 — 2019-10-24 - 0.7.0 — 2019-07-05 - 0.6.0 — 2019-07-03 - 0.5.0 — 2019-07-02 - 0.4.0 — 2019-06-29 - 0.3.0 — 2019-06-28 - 0.2.0 — 2019-06-25 - 0.1.0 — 2019-06-14 ## README # @datalith/pixelmap ```sh yarn add @datalith/pixelmap ``` ## Docs # \ | 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` or `Array<[number, number]>` | Array of data | | coords | `(Datum) => Datum` | `(Datum) => [number, number]` or `[number, number]` | Coords accessor | | value | `10` | `(Datum) => number` or `number` | 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 | | 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 | | featureCollection \* | | `FeatureCollection` | GeoJson object | | projection | `geoNaturalEarth1()` | `GeoProjection` | D3 GeoProjection to map coordinates | | side | `5` | `number` | Grid cell dimension | | tooltip | | `(Datum) => string` | Return HTML or text as a string to show on element mouseover | # \ | 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` or `Array<[number, number]>` | Array of data | | projection | `geoAlbersUsa()` | `GeoProjection` | D3 GeoProjection to map coordinates | | side | `5` | `number` | Grid cell dimension | | tooltip | | `(Datum) => string` | Return HTML or text as a string to show on element mouseover | # \ | 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` or `Array<[number, number]>` | Array of data | | coords | `(Datum) => Datum` | `(Datum) => [number, number]` or `[number, number]` | Coords accessor | | value | 10 | `(Datum) => number` or `number` | 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 | | side | `5` | `number` | Grid cell dimension | | tooltip | | `(Datum) => string` | Return HTML or text as a string to show on element mouseover | --- _Source: https://npm.io/package/@datalith/pixelmap · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._