FancyGrid - Africa Map

by Mikhail Tatsky

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<link href="https://code.fancygrid.com/fancy.min.css" rel="stylesheet">
<script src="https://code.fancygrid.com/fancy.full.min.js"></script>

<div id="container"></div>

CSS

.fancy-theme-gray .fancy-grid .fancy-grid-cell {
  border-bottom-color: transparent;
}

.fancy-theme-gray .fancy-grid-cell.data {
  cursor: pointer;
}

.fancy-theme-gray .data .fancy-grid-cell-inner {
  cursor: pointer;
}

.fancy-theme-gray .fancy-grid-cell-inner {
  margin-top: 17px;
  text-align: center;
  font-size: 12px;
  font-weight: bold;
  color: #626262;
}

JavaScript

var gridMapData = [
  ['   ','   ','MAR','DZA','TUN','LBY','EGY','   ','   ','   '],
  ['   ','ESH','MRT','SEN','GNB','GIN','SDN','ERI','   ','   '],
  ['SLE','LBY','CIV','GHA','NER','SSD','ETH','DJI','   ','   '],
  ['   ','GMB','TGO','BEN','NGA','CMR','CAF','TCD',  '-','SOM'],
  ['   ','   ','   ','GNQ','GAB','UGA','KEN','   ','   ','   '],
  ['   ','   ','   ','   ','COG','RWA','TZA','   ','   ','   '],
  ['   ','   ','   ','   ','COD','BDI','MWI','   ','   ','   '],
  ['   ','   ','   ','   ','AGO','ZMB','MOZ','   ','MDG','   '],
  ['   ','   ','   ','   ','NAM','BWA','ZWE','   ','   ','   '],
  ['   ','   ','   ','   ','ZAF','LSO','SWZ','   ','   ','   ']
];

var COLORS = [
  '135, 207, 233',
  '103, 232, 99',
  '233, 135, 207',
  '255, 241, 118',
  '173, 173, 173'
];

var REGIONS = [
  'Northern Africa',
  'Western Africa',
  'Eastern Africa',
  'Central African Republic',
  'Southern Africa'
];

var mapInfo = {	
  MAR: {
    group: 0,
    name: 'Morocco',
    capital: 'Rabat'
  },
  DZA: {
    group: 0,
    name: 'Algeria',
    capital: 'Algiers'
  },
  TUN: {
    group: 0,
    name: 'Tunisia',
    capital: 'Tunisia'
  },
  LBY: {
    group: 0,
    name: 'Libya',
    capital: 'Tripolis'
  },
  EGY: {
    group: 0,
    name: 'Egypt',
    capital: 'Cairo'
  },
  ESH: {
    group: 0,
    name: 'Western Sahara',
    capital: 'El-Aaiun'
  },
  MRT: {
    group: 1,
    name: 'Mauritania',
    capital: 'Nouakchott'
  },
  SEN: {
    group: 1,
    name: 'Senegal',
    capital: 'Dakar'
  },
  GNB: {
    group: 1,
    name: 'Guinea-Bissau',
    capital: 'Bissau'
  },
  GIN: {
    group: 1,
    name: 'Guinea',
    capital: 'Conakry'
  },
  SDN: {
    group: 0,
    name: 'Sudan',
    capital: 'Khartoum'
  },
  ERI: {
    group: 2,
    name: 'Eritrea',
    capital: 'Asmara'
  },
  SLE: {
    group: 1,
    name: 'Sierra Leone',
    capital: 'Freetown'
  },
  LBY: {
    group: 1,
    name: 'Liberia',
    capital: 'Tripolis'
  },
  CIV: {
    group: 1,
    name:...