JSFiddle - React, Tailwind, and code Playground

by Black Label

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>3D PCA Human Populations</title>
</head>
<body>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="height: 600px"></div>
Center around the
<span id="myDiv"></span>
people and zoom to
<select id="comboB" onchange="zoomSelect(this)">
  <option value="0.1">10%</option>
  <option value="0.2">20%</option>
  <option value="0.3">30%</option>
  <option value="0.4">40%</option>
  <option value="0.5">50%</option>
  <option value="0.6">60%</option>
  <option value="0.7">70%</option>
  <option value="0.8">80%</option>
  <option value="0.9">90%</option>
  <option value="1" selected>100%</option>
</select>
of genetic distance.<br>Use PCA axes X:
<select id="comboX" onchange="PCSelect(this)">
  <option value="3">1</option>
  <option value="4">2</option>
  <option value="5" selected>3</option>
  <option value="6">4</option>
  <option value="7">5</option>
</select>
Y:
<select id="comboY" onchange="PCSelect(this)">
  <option value="3">1</option>
  <option value="4">2</option>
  <option value="5">3</option>
  <option value="6" selected>4</option>
  <option value="7">5</option>
</select>
Z:
<select id="comboZ" onchange="PCSelect(this)">
  <option value="3">1</option>
  <option value="4">2</option>
  <option value="5">3</option>
  <option value="6">4</option>
  <option value="7" selected>5</option>
</select>

<hr>
<p id="closest"></p>
<hr>
The PCA axes are three of the five first principal components axes. Principal component analysis (PCA) of genome-wide panels of PS markers has become a widely popular method for examining evidence of population stratification in association studies. PCA is a general statistical method for transforming a vector of covariates into orthogonal axes, known...

CSS

#container {
  height: 600px;
  min-width: 310px;
  max-width: 1200px;
  margin: 0 auto;
}

JavaScript

var data_all = [
['Abazin',110,21,0.1079895,0.07553,-0.0231456,-0.0175631,-0.0323136],
['Zhuang',145,33,0.0174529,-0.4492026,-0.0364969,-0.0660356,0.118723]
]

//Populate the population drop-down
var myDiv = document.getElementById("myDiv");
//Create and append select list
var selectList = document.createElement("select");
selectList.setAttribute("id", "comboA");
selectList.setAttribute("onchange", "geoSelect(this)")
myDiv.appendChild(selectList);

//Create and append the options
for (var i = 0; i < data_all.length; i++) {
    var option = document.createElement("option");
    option.text = data_all[i][0];
    selectList.appendChild(option);
}
// If the submitted url contains parameters, use them
var url = new URL(window.location.href);
if (url.searchParams.get('P')) {
  var pca = url.searchParams.get('pca');
  var pcb = url.searchParams.get('pcb');
  var pcx = url.searchParams.get('pcx');
  var pcy = url.searchParams.get('pcy');
  var pcz = url.searchParams.get('pcz');
  var zoom = url.searchParams.get('zoom');
  var a = url.searchParams.get('a');
  var b = url.searchParams.get('b');
  var x = url.searchParams.get('x');
  var y = url.searchParams.get('y');
  var z = url.searchParams.get('z');
} else {
  var pca = 6;
  var pcb = 7;
  var pcx = 3;
  var pcy = 4;
  var pcz = 5;
  var zoom = 1;
  var a = data_all[1][pca];
  var b = data_all[1][pcb];
  var x = data_all[1][pcx];
  var y = data_all[1][pcy];
  var z = data_all[1][pcz];
}
var distance = 0;
var distanab = 0;
var color = 'rgb(254,0,0)';
var closest = '';
//Using to define the colors later
var mina = 0;
var minb = 0;
var maxa = 0;
var maxb = 0;
//document.getElementById('comboA').selectedIndex=100;
var sort = [];
var data = [],
    i;

function subsetData() {
  maxa = -9;
  maxb = -9;
  data.splice(0, data.length);
  for (i = 0; i < data_all.length; ++i){
    if ((Math.pow(data_all[i][pcx] - x,2) + Math.pow(data_all[i][pcy] - y,2) + Math.pow(data_all[i][pcz] - z,2)) === 0){
      a = data_all[i][pca];
     ...