@domoinc/us-map
v3.0.2
Published
USMap - Domo Widget
Downloads
97
Readme
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);