FancyGrid Grid Map Europe

by FancyGrid Inc.

HTML

<script src="https://cdn.jsdelivr.net/npm/fancygrid/client/fancy.min.js"></script>

<div style="margin-top:30px;width: 1119px;height: 850px;">
  <div id="container" style=" float:left;margin-left: 15px;"></div>
</div>

CSS

.fancy-grid-cell {
  border-color: transparent !important;
}

.fancy-grid-cell.data {
  cursor: pointer;
  border-radius: 30px;
  opacity: 0.8;
}

.fancy-grid-cell.data:hover {
  opacity: 0.8;
}

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

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

.fancy-panel-grid-inside {
  border-width: 0px !important;
}

.fancy-panel .fancy-panel-header {
  background-color: #626262 !important;
  color: #F3F3F3;
}

.fancy-grid-body {
  background-color: #f9f9f9 !important;
}

.fancy-grid-body .fancy-grid-column {
  background-color: rgb(249, 249, 249);
}

JavaScript

document.addEventListener("DOMContentLoaded", function() {

  var COLORS = [
    '#cd2a27',
    '#b34442',
    '#9c5554',
    '#85605f',
    '#6e6363',
    '#616661',
    '#537557',
    '#3d8244',
    '#23912e',
    '#009e0f'
  ];

  function getColor(value, min, max) {
    var step = (parseFloat((max - min).toFixed(4))) / COLORS.length,
      cursor = min,
      i = 0;

    for (; cursor <= max; i++) {
      if (value >= cursor && value <= parseFloat((cursor + step).toFixed(4))) {
        return COLORS[i];
      }
      cursor = parseFloat((cursor + step).toFixed(4))
    }
  }

  function numberFormat(value) {
    return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
  }

  var gridMapData = [
    ['ISL', '   ', '   ', 'NOR', 'SWE', 'FIN', '   ', '   ', '   ', '   '],
    ['   ', '   ', '   ', '   ', 'DNK', '   ', 'EST', '   ', '   ', '   '],
    ['IRL', 'GBR', '   ', 'NLD', 'DEU', 'POL', 'LTU', 'LVA', '   ', '   '],
    ['   ', '   ', '   ', 'BEL', 'CHE', 'CZE', 'BLR', 'RUS', '   ', '   '],
    ['   ', '   ', 'FRA', 'LUX', 'AUT', 'SVK', 'HGR', 'UKR', '   ', '   '],
    ['PRT', 'ESP', '   ', 'ITA', 'SLO', 'HRV', 'ROU', '   ', 'GEO', 'AZE'],
    ['   ', '   ', '   ', '   ', '   ', 'SRB', 'BGR', 'TUR', 'ARM', '   '],
    ['   ', '   ', 'MLT', '   ', '   ', 'GRC', '   ', 'CYP', '   ', '   ']
  ];

  var mapInfo = {
    EST: {
      group: 0,
      name: 'Estonia',
      capital: 'Tallinn',
      sales: 20349
    },
    POL: {
      group: 0,
      name: 'Poland',
      capital: 'Warsaw',
      sales: 354972
    },
    LTU: {
      group: 0,
      name: 'Lithuania',
      sales: 17085,
      capital: 'Vilnius'
    },
    LVA: {
      group: 0,
      name: 'Latvia',
      sales: 13765,
      capital: 'Riga'
    },
    BLR: {
      group: 0,
      name: 'Belarus',
      sales: 0,
      capital: 'Minsk'
    },
    RUS: {
      group: 0,
      name: 'Russia',
      sales: 0,
      capital: 'Moscow'
    },
    UKR: {
      group: 0,
      name: 'Ukraine',
     ...