# @domoinc/us-map-grid

> USMapGrid - Domo Widget

Latest version **2.0.0** (published 2016-05-31) · SEE LICENSE IN LICENSE license · 0 weekly downloads

## Install

```sh
npm install @domoinc/us-map-grid
pnpm add @domoinc/us-map-grid
yarn add @domoinc/us-map-grid
bun add @domoinc/us-map-grid
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2016-05-31 |
| First published | 2016-02-17 |
| Weekly downloads | 0 |
| License | SEE LICENSE IN LICENSE |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Domo Inc. |
| Maintainers | aharris88, andrewjensen, bkingery, bmbarker-domo, clm, dallasnorton, excrispy, freakaziod210, jaxry, jgalb, jmstewart, jonathan-law, k4paul, lcwright21, morganjohn12, nicksrandall, scott.davidson.domo, whitney.rosenberg |
| Keywords | domo, app |

## Links

- npm: https://www.npmjs.com/package/@domoinc/us-map-grid
- npm.io page: https://npm.io/package/@domoinc/us-map-grid

## Dependencies (5)

- [d3](https://npm.io/package/d3.md) ^3.5.16
- [d3.chart](https://npm.io/package/d3.chart.md) ^0.3.0
- [@domoinc/da-theme2](https://npm.io/package/@domoinc/da-theme2.md) ^2.3.1
- [@domoinc/base-widget](https://npm.io/package/@domoinc/base-widget.md) ^1.5.2
- [@domoinc/domo-tooltip](https://npm.io/package/@domoinc/domo-tooltip.md) ^5.1.10

## Recent versions

- 2.0.0 (latest) — 2016-05-31
- 1.4.2 — 2016-04-15
- 1.4.1 — 2016-04-15
- 1.4.0 — 2016-03-18
- 1.3.2 — 2016-03-17
- 1.3.1 — 2016-03-17
- 1.3.0 — 2016-03-17
- 1.2.0 — 2016-03-17
- 1.1.0 — 2016-03-16
- 1.0.1 — 2016-03-08
- 1.0.0 — 2016-02-17

## README

# USMapGrid


![widget](media/square.png)


## Configuration Options


#### chartName
Type: `string`  
Default: `"USMapGrid"`  

Name of chart for Reporting

#### fontFamily
Type: `string`  
Default: `"Open Sans"`  

Font type for the body text

#### fontSize
Type: `number`  
Default: `14`  
Units: `px`

Font size for the body text

#### hasTooltip
Type: `boolean`  
Default: `true`  

Whether or not to show the tooltip

#### height
Type: `number`  
Default: `400`  
Units: `px`

Height of the widget

#### isOnMobile
Type: `boolean`  
Default: `false`  

If true, it signals to the widget that it is running on a mobile device. Should be called before draw and then NEVER changed.

#### layout
Type: `string`  
Default: `"square"`  

Type of layout

#### mapRangeColorsTheme
Type: `select`  
Default: `{"name":"Blue","value":["#31689B","#90c4e4"]}`  

The color theme used by the elements

#### numberOfColors
Type: `number`  
Default: `4`  

Number of colors used to distribute the data into ranges (i.g. if the data values range from 0 to 100 and there are four colors, color 1 represents the data values for 0-25, color 2 for 26-50, color 3 for 51-75, and color 4 for 76-100)

#### shouldValidate
Type: `boolean`  
Default: `true`  

Flag for turning off data validation

#### tooltipBackgroundColor
Type: `color`  
Default: `"#555555"`  

Background color for the tooltip

#### tooltipBodyFontFamily
Type: `string`  
Default: `"Open Sans"`  

Font type for the body text

#### tooltipFontColor
Type: `color`  
Default: `"#FFFFFF"`  

Font color for the tooltip text

#### tooltipFontSize
Type: `number`  
Default: `14`  
Units: `px`

Font size for the body text

#### updateSizeableConfigs
Type: `boolean`  
Default: `true`  

Flag for turning off the mimic of illustrator's scale functionality

#### width
Type: `number`  
Default: `400`  
Units: `px`

Width of the widget

## Data Definition


#### Label
Type: `string`

Default validate:  
```js
function (d) { return this.accessor(d) !== undefined; }
```

Default accessor:  
```js
function (line) { return line[0] === undefined ? undefined : String(line[0]); }
```

#### Value
Type: `number`

Default validate:  
```js
function (d) { return !isNaN(this.accessor(d)) && this.accessor(d) >= 0; }
```

Default accessor:  
```js
function (line) { return Number(line[1]); }
```

## Events


#### Dispatch Events

#### External Events


## Example

```js  
/*----------------------------------------------------------------------------------
 Create Widget -> index.html

 © 2011 - 2015 DOMO, INC.
 ----------------------------------------------------------------------------------*/

//Setup some fake data
var data = [
  ['Alabama', 10],
  ['Alaska', 10],
  ['Arizona', 10],
  ['Arkansas', 10],
  ['California', 10],
  ['Colorado', 10],
  ['Connecticut', 20],
  ['Delaware', 20],
  ['Georgia', 20],
  ['Hawaii', 20],
  ['Idaho', 20],
  ['Illinois', 20],
  ['Indiana', 30],
  ['Iowa', 20],
  ['Kansas', 30],
  ['Kentucky', 30],
  ['Louisiana', 30],
  ['Maine', 30],
  ['Maryland', 30],
  ['Massachusetts', 30],
  ['Michigan', 40],
  ['Minnesota', 40],
  ['Missouri', 40],
  ['Montana', 40],
  ['Nebraska', 50],
  ['Nevada', 50],
  ['New Hampshire', 50],
  ['New Jersey', 50],
  ['New Mexico', 50],
  ['New York', 60],
  ['North Carolina', 60],
  ['North Dakota', 60],
  ['Ohio', 60],
  ['Oklahoma', 60],
  ['Oregon', 60],
  ['Pennsylvania', 60],
  ['Rhode Island', 70],
  ['South Carolina', 70],
  ['South Dakota', 70],
  ['Texas', 80],
  ['Utah', 80],
  ['Vermont', 80],
  ['Virginia', 90],
  ['Washington', 90],
  ['West Virginia', 90],
  ['Wisconsin', 100],
  ['Wyoming', 100]
];

//Initialze the widget
var chart = d3.select('#vis')
  .append('svg')
  .attr({
    height: '500px',
    width: '1000px'
  })
  .append('g')
  .attr('transform', 'translate(75, 100)')
  .chart('USMapGrid')
  .c({
    width: 400,
    height: 500,
    layout: 'hexagon'
  });

//Render the chart with data
chart._notifier.showMessage(true);
chart.draw(data);

```

---
_Source: https://npm.io/package/@domoinc/us-map-grid · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._