@domoinc/us-map

USMap

An interactive US Map with shaded states displaying data

Configuration Options

chartName

Type: string
Default: "USMap"

Name of chart for reporting

dataIsUsingStateAbbreviations

Type: boolean
Default: false

Set to true if using state abbreviations, false if using full state name

generalWashoutColor

Type: color
Default: "#E4E5E5"

Color used to indicate elements that are not being highlighted

height

Type: number
Default: 250
Units: px

hoverEnabled

Type: boolean
Default: false

Toggle hover on/off

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.

mapBorderColor

Type: color
Default: "#FFFFFF"

Color for the borders around each section of the map

mapBorderWeight

Type: number
Default: 1
Units: px

Stroke width for each land divider

mapNoDataColor

Type: color
Default: "#D8D8D9"

Color for an element that has no data on the map

mapRangeColors

Type: colorArray
Default: ["#FDECAD","#FCCF84","#FBAD56","#FB8D34","#E45621","#A43724"]

Range of colors for the map

mapRangeColorsTheme

Type: select
Default: {"name":"Orange","value":["#FDECAD","#FCCF84","#FBAD56","#FB8D34","#E45621","#A43724"]}

shouldValidate

Type: boolean
Default: true

Flag for turning off data validation

textFontFamily

Type: string
Default: "Open Sans"

tooltipBackgroundColor

Type: color
Default: "#555555"

Background color of the tooltip

tooltipTextColor

Type: color
Default: "#FFFFFF"

Color of the tooltip text

updateSizeableConfigs

Type: boolean
Default: true

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

width

Type: number
Default: 250
Units: px

zoomEnabled

Type: boolean
Default: true

Toggle ability to zoom

Data Definition

State

Type: string

Default validate:

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

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

external:mouseover
external:mouseout

Example

var data = [["Alaska", 82], ["Hawaii", 82], ["Puerto Rico", 19], ["California", 91], ["Colorado", 89], ["Connecticut", 91], ["Delaware", 35], ["Florida", 10], ["Georgia", 13], ["Iowa", 44], ["Idaho", 13], ["Illinois", 68], ["Indiana", 67], ["Kansas", 63], ["Kentucky", 99], ["Louisiana", 28], ["Massachusetts", 51], ["Maryland", 94], ["Maine", 17], ["Michigan", 8], ["Minnesota", 80], ["Missouri", 84], ["Mississippi", 13], ["Montana", 8], ["North Carolina", 70], ["North Dakota", 50], ["Nebraska", 94], ["New Hampshire", 48], ["New Jersey", 81], ["New Mexico", 33], ["Nevada", 75], ["New York", 92], ["Ohio", 40], ["Oklahoma", 48], ["Oregon", 85], ["Pennsylvania", 15], ["Rhode Island", 50], ["South Carolina", 73], ["South Dakota", 93], ["Tennessee", 59], ["Texas", 24], ["Utah", 39], ["Virginia", 32], ["Vermont", 92], ["Washington", 27], ["Wisconsin", 21], ["West Virginia", 19], ["Wyoming", 16]];

var i = 1;
var aHeight = 502 * i;
var aWidth = 500 * i;

//Initialze the widget
var svg = d3.select("#vis")
  .append("svg")
  .attr("width", aWidth + 'px')
  .attr("height", aHeight + 'px')
  .append('g');


var chart = svg.chart("USMap")
  .c('width', aWidth)
  .c('height', aHeight)
  .c('dataIsUsingStateAbbreviations', false);


//Render the chart with data
chart.draw(data);


//svg.insert("rect", ":first-child")
//  .attr("height", aHeight)
//  .attr("width", aWidth)
//  .attr("stroke", "black")
//  .style("fill-opacity", 0);


/*----------------------------------------------------------------------------------
Text change in range colors
----------------------------------------------------------------------------------*/
setTimeout(function() {
     chart.c('mapRangeColorsTheme', chart._config.mapRangeColorsTheme.options[1]).draw(data);
}, 3000);


/*----------------------------------------------------------------------------------
Test External hover events
----------------------------------------------------------------------------------*/
//var ii = -1;
//setInterval(function () {
//  chart.trigger('external:mouseover', {series: ii, name: ii, d:null});
//  ii = (++ii) === 5 ? -1 : ii;
//}, 1000);

//setTimeout(function () {
//    chart.trigger('external:mouseover', {series: 3, name: 3, d:null});
//}, 1000);
//setTimeout(function () {
//    chart.trigger('external:mouseout');
//}, 3000);