JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<h3>TINT Schneider Culture Survey Results (2015/2016)</h3>
<label><input type="checkbox" id="present2015" value="1"> Show 2015 (present)</label> <div class="colorlabel" style="background-color: #1f77b4;"></div><br>
<label><input type="checkbox" id="future2015" value="1"> Show 2015 (future)</label> <div class="colorlabel" style="background-color: #aec7e8;"></div><br>
<label><input type="checkbox" id="present2016" value="1"> Show 2016 (present)</label> <div class="colorlabel" style="background-color: #ff7f0e;"></div><br>
<label><input type="checkbox" id="future2016" value="1"> Show 2016 (future)</label> <div class="colorlabel" style="background-color: #ffbb78;"></div><br>
<div id="scatter-load"></div>

CSS

body {
    font-family:"Helvetica Neue";
    color: #686765;
}
.name {
    float:right;
    color:#27aae1;
}
.axis {
    fill: none;
    stroke: #AAA;
    stroke-width: 1px;
}
text {
    stroke: none;
    fill: #666666;
    font-size: .6em;
    font-family:"Helvetica Neue"
}
.label {
    fill: #414241;
}
.node {
    cursor:pointer;
}
.dot {
    opacity: .7;
    cursor: pointer;
}
.biglabel{
  font-size:30px;
  font-weight:bold;
  opacity:.3;
}
.colorlabel{
  height:12px;
  width:12px;
  display:inline-block;
}

JavaScript

var present2015 = [
  {
    "Name": "Ryo",
    "x": -14,
    "y": 6
  },
  {
    "Name": "Jon",
    "x": -10,
    "y": 0
  },
  {
    "Name": "Ro",
    "x": 0,
    "y": 12
  },
  {
    "Name": "Brett",
    "x": -5,
    "y": -3
  },
  {
    "Name": "Oli",
    "x": -16,
    "y": -6
  },
  {
    "Name": "Amrit",
    "x": -14,
    "y": 0
  },
  {
    "Name": "Dan",
    "x": -8,
    "y": 0
  },
  {
    "Name": "Lukas",
    "x": -6,
    "y": -4
  },
  {
    "Name": "Tony",
    "x": -4,
    "y": 0
  },
  {
    "Name": "Ali",
    "x": -10,
    "y": 0
  },
  {
    "Name": "E",
    "x": -7,
    "y": -9
  },
  {
    "Name": "Corey",
    "x": -11,
    "y": -9
  },
  {
    "Name": "Brad",
    "x": -14,
    "y": -4
  },
  {
    "Name": "Saachi",
    "x": -10,
    "y": -8
  },
  {
    "Name": "Brandon",
    "x": -5,
    "y": -11
  },
  {
    "Name": "Colton",
    "x": -14,
    "y": -6
  },
  {
    "Name": "Tim",
    "x": -15,
    "y": -7
  },
  {
    "Name": "Stu",
    "x": -14,
    "y": -2
  },
  {
    "Name": "Kelly",
    "x": -18,
    "y": 2
  },
  {
    "Name": "Gurtej",
    "x": -2,
    "y": -2
  },
  {
    "Name": "Jess",
    "x": -15,
    "y": 1
  },
  {
    "Name": "Muriel",
    "x": -4,
    "y": -4
  }
];

var future2015 = [
  {
    "Name": "Ryo",
    "x": -14,
    "y": -4
  },
  {
    "Name": "Jon",
    "x": -8,
    "y": -2
  },
  {
    "Name": "Ro",
    "x": -20,
    "y": -4
  },
  {
    "Name": "Brett",
    "x": -2,
    "y": -10
  },
  {
    "Name": "Oli",
    "x": -16,
    "y": -12
  },
  {
    "Name": "Amrit",
    "x": -12,
    "y": 2
  },
  {
    "Name": "Dan",
    "x": -10,
    "y": 2
  },
  {
    "Name": "Lukas",
    "x": -4,
    "y": -8
  },
  {
    "Name": "Tony",
    "x": -6,
    "y": -6
  },
  {
    "Name": "Ali",
    "x": -6,
    "y": 2
  },
  {
    "Name": "E",
    "x": -2,
    "y": -4
  },
  {
    "Name": "Corey",
    "x": -10,
    "y": -2
  },
  {
    "Name": "Brad",
    "x": -12,
    "y": -4
  },
  {
    "Name": "Saachi",
    "x": -8,
    "y": -8
  },
...