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