GOMOKU Page

forked from ZenoZero's block: GOMOKU Page

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<title>Scatterplot with Voronoi</title>

</head>
  <body>
     
            <div class="jumbotron text-center">
              <h1>GOMOKU PLAYING STYLE</h1> 
              <p>Visualization of Strategic Game Playing Styles</p> 
            </div>
          
  <div></div>
   
	<div id="container" class="container-fluid text-center">
      <h5 id='title' style="color: #3B3B3B;"></h5>
      <div class="col-sm-9">
         <div id="scatterPlot"> </div>
      </div>
      <div class="col-sm-3">
         <div id="scatterPlot_legend"> </div>
      </div>
      <div class="col-sm-3">
         <div id="controls">
         </div>
      </div>
	</div>
<div>
  <br>
  <br>
  <br>
  <br>
  <br>
  <h5>Playing style similarity to AIs</h5>
</div>
   
   <script src="scatterPlot1.js"></script>
   <script src="scatterShot1.js"></script>
   <div class="radarChart"></div>
   
       <script src="radarChart.js"></script>	
       <script>
         
         /* Radar chart design created by Nadieh Bremer - VisualCinnamon.com */
         
         ////////////////////////////////////////////////////////////// 
         //////////////////////// Set-Up ////////////////////////////// 
         ////////////////////////////////////////////////////////////// 
   
         var margin = {top: 100, right: 100, bottom: 100, left: 100},
           width = Math.min(700, window.innerWidth - 10) - margin.left - margin.right,
           height = Math.min(width, window.innerHeight - margin.top - margin.bottom - 20);
             
         ////////////////////////////////////////////////////////////// 
         ////////////////////////// Data ////////////////////////////// 
         ////////////////////////////////////////////////////////////// 
   
         var data = [
               [//enis Kachaev
               {axis:"mr_slowrenju",value:0.44}, 
               {axis:"mr_pela",value:0.34},
               {axis:"mr_whose",value:0.36},
               {axis:"mr_renjusolver",value:0.5},
               {axis:"mr_yixin",value:0.5},
               {axis:"mr_carbon",value:0.46},		
               ],[//Huang-Yu Lin
               {axis:"mr_slowrenju",value:0.44}, 
               {axis:"mr_pela",value:0.26},
               {axis:"mr_whose",value:0.44},
               {axis:"mr_renjusolver",value:0.5},
               {axis:"mr_yixin",value:0.54},
               {axis:"mr_carbon",value:0.46},
               ],[//Leif Larsson
               {axis:"mr_slowrenju",value:0.44}, 
               {axis:"mr_pela",value:0.32},
               {axis:"mr_whose",value:0.46},
               {axis:"mr_renjusolver",value:0.56},
               {axis:"mr_yixin",value:0.6},
               {axis:"mr-carbon",value:0.52},
               ]
             ];
         ////////////////////////////////////////////////////////////// 
         //////////////////// Draw the Chart ////////////////////////// 
         ////////////////////////////////////////////////////////////// 
   
         var color = d3.scale.ordinal()
           .range(["#EDC951","#CC333F","#00A0B0"]);
           
         var radarChartOptions = {
           w: width,
           h: height,
           margin: margin,
           maxValue: 0.5,
           levels: 5,
           roundStrokes: true,
           color: color
         };
         //Call function to draw the Radar chart
         RadarChart(".radarChart", data, radarChartOptions);
       </script>
   
	
  </body>
</html>

Modified http://d3js.org/d3.v3.js to a secure url

Modified http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js to a secure url

https://d3js.org/d3.v3.js

https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js