D3 Examples - Renju Page

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title>Scatterplot with Voronoi</title>
​
   <script src="https://d3js.org/d3.v3.js"></script>
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.2.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
​
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<!--    <link href='https://fonts.googleapis.com/css?family=Open+Sans:700,400,300' rel='stylesheet' type='text/css'> -->
​
    <link href='./scatterPlot.css' rel='stylesheet' type='text/css'>
  <link href='./scatterShot.css' rel='stylesheet' type='text/css'>
  <style>
      .jumbotron { 
          background-color: #000000; /* Orange */
          color: #ffffff;
      }
      </style>
      
​
  </head>
  <body>
     
            <div class="jumbotron text-center">
              <h1>RENJU 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="scatterPlot.js"></script>
   <script src="scatterShot.js"></script> -->
   <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>
   <!--
   <script src="gdp_life_expectancy.js"></script>
   -->
    
  </body>
</html>
​
    