RPoL - Federation of Comorian - Exodus

by James Ramirez

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.8.0/d3.min.js"></script>
<script src="https://d3js.org/d3.hexbin.v0.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.24.0/d3-legend.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-annotation/1.11.0/d3-annotation.min.js"></script>
<div class="header">Exodite Star Map</div>
<div id="chart"></div>

CSS

body {
        margin: 0px; 
        overflow: hidden; 
        font-family: "Helvetica Neue", Helvetica; 
        font-size: 14px;
      }

      .header {
        margin-top: 20px;
        margin-left: 20px;
        font-size: 36px; 
        font-weight: 300; 
        display: block; 
        z-index: 1; 
        text-shadow: 0 1px 0 #fff;
      }
      #chart{
        text-align: center;
      }

:root {
    --annotation-color: #111111;
}

.annotation path {
  stroke: var(--annotation-color);
  fill: none;
}

.annotation text,
.annotation .annotation-connector .connector-dot,
.annotation path.connector-arrow,
.annotation.callout.rect path.subject{
  fill: var(--annotation-color);
}

.annotation-note-title {
  font-weight: bold;
}

.annotation-note-bg {
  fill: rgba(255, 255, 255, 0);
}

.annotation.callout.rect path.subject{
  fill-opacity: .1;
}

.annotation.badge path.subject-pointer, .annotation.badge path.subject {
  fill: var(--annotation-color);
  stroke-width: 3px;
  stroke-linecap: round;
} 

.annotation.badge path.subject-ring {
  fill: white;
  stroke-width: 3px;
}

.annotation.badge .badge-text {
  fill: white;
  font-size: .7em;
}

/* Handling edit mode styles */
.editable .annotation-subject, .editable .annotation-note {
  cursor: move;
}

circle.handle {
  stroke-dasharray: 5;
  stroke: var(--annotation-color);
  fill: rgba(255, 255, 255, .2);
  cursor: move;

  stroke-opacity: .1;
}

.exodus-route { stroke: red; fill: none;  }

JavaScript

var polity = [
  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
   0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
   0, 0, 0, 0,15, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,13, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
  0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,13,13, 0, 0, 0, 0, 0, 0, 0, 0,15, 0, 0, 0, 0, 0, 0, 0, 0,15, 0, 0, 0, 0, 0,
   0, 0, 0, 0, 0, 0,15, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
  0, 0, 0, 0, 0, 0, 0, 0,14, 8, 8, 0, 0, 0, 0, 0, 0, 9, 9, 9, 9, 0, 0, 0, 0, 0, 0, 0,15,15, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
   0, 0, 0, 0, 0, 0,14,14, 8, 8, 8, 8, 0, 0, 0, 0, 9, 9, 9, 9, 9, 9, 9, 0,15, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
  0, 0, 0, 0, 0,15,15, 8, 8, 8, 8, 8, 8, 8, 8, 8, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 0, 0, 0, 0, 0,11,11,11,11, 0, 0, 0, 0, 0, 0, 0, 0, 0,
   0, 0, 0,14,14,15, 8, 8, 8, 8, 8, 8, 8, 8, 8, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 0,11,11,11,11,11,11,11,11,11,11, 0, 0, 0, 0,12,12,
  0, 0, 0,14,14, 8, 8, 8, 8, 8, 8, 8, 8, 8,10,10, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9,11,11,11,11,11,11,11,11,11,11, 0, 0, 0,12,12,12,
   0, 0,14,14, 8, 8, 8, 8, 8, 8, 8, 8, 8,10,10,10, 9, 9, 1, 1, 1, 9, 9, 9, 9, 9, 9, 9,11,11,11,11,11,11,11,11,11,11,11, 0,12,12,12,12,12,
  0, 0,14,14, 8, 8, 2, 2, 2, 8, 8, 1, 1, 1,10,10, 1, 1, 1, 1, 1, 1, 1, 4, 4, 4, 4,11,11,11,11,11,11,11,11,11,11,11,11,12,12,12,12,12,12,
   0, 0,14,15, 2, 2, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 4, 4, 4, 4,11,11,11,11,11,11,11,11,11,11,11,11,11,12,12,12,12,12,12,
  0, 0,14,14, 2, 2, 2, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 1,...