@domoinc/world-map v4.2.2

WorldMap

Map of the world that shows the name of each coutry and its value on hover. When you click on a country it gives you a close up of the continent.

Configuration Options

chartName

Type: string
Default: WorldMap

Name of chart for Reporting.

generalWashoutColor

Type: color
Default: #E4E5E5

Color used to indicate elements that are not being highlighted.

height

Type: number
Default: 250
Units: px

Height of the chart.

mapBorderColor

Type: color
Default: #FFFFFF

Color for the borders around each land divider.

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 associated with it.

mapRangeColors

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

Color used to represent a range of numbers in a map.

shouldValidate

Type: boolean
Default: true

Flag for turning off data validation.

textFontFamily

Type: string
Default: Open Sans

Font family for any text.

textSize

Type: number
Default: 12
Units: px

General size in pixels for any text.

tooltipBackgroundColor

Type: color
Default: #555555

Background color on any tool tips.

tooltipCountryColor

Type: color
Default: #fff

Color for the Country name used in the tooltip

tooltipTextColor

Type: color
Default: #FFFFFF

Color of any text inside a tooltip.

updateSizeableConfigs

Type: boolean
Default: true

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

width

Type: number
Default: 250
Units: px

Width of the chart.

Data Definition

Country

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 parseFloat(line[1]);
        }

Example

//Setup some fake data
var data = [
	["Iraq",    67],
		["Morocco",71],
		["Heard Island and Mcdonald Islands",50],
		["Holy See (Vatican City State)",29],
		["Slovakia",3],
		["French Polynesia",28],
		["Switzerland",16],
		["Togo",64],
		["Cyprus",17],
		["San Marino",48],
		["Lesotho",82],
		["Ireland",87],
		["Ukraine",99],
		["Qatar",39],
		["United States",32],
		["Lithuania",31],
		["Turkmenistan",81],
		["French Southern Territories",34],
		["Dominican Republic",89],
		["Zimbabwe",71],
		["Solomon Islands",86],
		["Gambia",46],
		["Lithuania",93],
		["Heard Island and Mcdonald Islands",40],
		["Western Sahara",87],
		["Somalia",85],
		["Taiwan",48],
		["Slovakia",28],
		["Bahamas",63],
		["Cuba",76],
		["Zimbabwe",64],
		["Tanzania",14],
		["Portugal",96],
		["Christmas Island",78],
		["Mozambique",71],
		["Holy See (Vatican City State)",66],
		["Afghanistan",97],["Mozambique",60],
		["Germany",2],
		["Chile",100],
		["Honduras",40],
		["Tuvalu",86],
		["Japan",76],
		["Thailand",56],
		["Pakistan",31],
		["Kenya",91],
		["United States Minor Outlying Islands",45],
		["Cuba",14],
		["Timor-Leste",40],
		["American Samoa",93],
		["Greenland",63],
		["Portugal",64],
		["Cocos (Keeling) Islands",45],
		["Finland",23],
		["Bonaire, Sint Eustatius and Saba",24],
		["Israel",80],
		["Nauru",40],
		["Azerbaijan",69],
		["Denmark",25],
		["Iceland",46],
		["Kiribati",67],
		["Colombia",9],
		["Maldives",88],
		["Bosnia and Herzegovina",58],
		["Guinea",92],
		["Norfolk Island",14],
		["United States Minor Outlying Islands",36],
		["Cyprus",97],
		["Australia",41],
		["Tonga",43],
		["Cook Islands",59],
		["Ethiopia",95],
		["Christmas Island",7],
		["Bouvet Island",29],
		["Guam",5],
		["Wallis and Futuna",51],
		["Ukraine",100],
		["Senegal",39],
		["Brazil",100],
		["Bosnia and Herzegovina",82],
		["Guatemala",43],
		["Georgia",22],
		["Guinea-Bissau",79],
		["Central African Republic",53],
		["Kuwait",51],
		["South Africa",38],
		["Libya",74],
		["Palau",86],
		["Benin",1],
		["Singapore",77],
		["Lesotho",85],
		["Faroe Islands",82],
		["Malta",72],
		["Virgin Islands, British",60],
		["Tonga",38],
		["Sierra Leone",5],
		["Lesotho",98],
		["Palestine, State of",27],
		["Palau",40],
		["Reunion",47]
];

var aHeight = 500;
var aWidth = 500;

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

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