@domoinc/us-map-grid v2.0.0

USMapGrid

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:

function (d) { return this.accessor(d) !== undefined; }

Default accessor:

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

Value

Type: number

Default validate:

function (d) { return !isNaN(this.accessor(d)) && this.accessor(d) >= 0; }

Default accessor:

function (line) { return Number(line[1]); }

Events

Dispatch Events

External Events

Example

/*----------------------------------------------------------------------------------
 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);