FancyGrid Grid Map USA

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: 450px;">
  <div id="gridMap" style=" float:left;margin-left: 15px;"></div>
  <div id="statesInfoGrid" style=" float:left;margin-left: 15px;"></div>
</div>

CSS

.fancy-theme-myGridMap .fancy-grid-cell {
  border-color: transparent;
  margin: 0px 1px 1px 0px;
  border-radius: 30px;
}

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

.fancy-theme-myGridMap .fancy-grid-body .fancy-grid-column .fancy-grid-cell-selected {
  background: none;
}

JavaScript

document.addEventListener("DOMContentLoaded", function() {
  var gridMapData = [
    ['AK', '  ', '  ', '  ', '  ', '  ', '  ', '  ', '  ', '  ', '  ', 'ME'],
    ['  ', '  ', '  ', '  ', '  ', '  ', '  ', '  ', '  ', '  ', 'VT', 'NH'],
    ['  ', 'WA', 'ID', 'MT', 'ND', 'MN', 'IL', 'WI', 'MI', 'NY', 'RI', 'MA'],
    ['  ', 'OR', 'NV', 'WY', 'SD', 'IA', 'IN', 'OH', 'PA', 'NJ', 'CT', '  '],
    ['  ', 'CA', 'UT', 'CO', 'NE', 'MO', 'KY', 'WV', 'VA', 'MD', 'DE', '  '],
    ['  ', '  ', 'AZ', 'NM', 'KS', 'AR', 'TN', 'NC', 'SC', 'DC', '  ', '  '],
    ['  ', '  ', '  ', '  ', 'OK', 'LA', 'MS', 'AL', 'GA', '  ', '  ', '  '],
    ['HI', '  ', '  ', '  ', '  ', 'TX', '  ', '  ', '  ', 'FL', '  ', '  ']
  ];

  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 min = {
    population: 586107,
    income: 36919
  };

  var max = {
    population: 10000000,
    income: 70004
  };

  var edgeGood = {
    population: 1500000,
    income: 45000
  };

  var columnIndexData = 'income';

  new FancyGrid({
    title: 'List of states of the United States',
    renderTo: 'statesInfoGrid',
    width: 450,
    height: 410,
    data: data,
    selModel: 'column',
    columnTrackOver: true,
    defaults: {
      type: 'string',
      sortable: true
    },
    columns: [{
      index: 'name',
      title: 'State Name',
      selectable: false,
      trackOver: false,
      locked: true
    }, {
      index:...