D3 Examples - UIC function READY

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/ >
        <title>Smoothed Radar Chart</title>
​
        <!-- Google fonts -->
        <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>
        <link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
​
        <!-- D3.js -->
        <script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>
        <script src="https://d3js.org/d3-path.v1.min.js" charset="utf-8"></script>
        <script src="radarChart.js" charset="utf-8"></script>
        <style>
            body {
                font-family: 'Open Sans', sans-serif;
                font-size: 11px;
                font-weight: 300;
                fill: #242424;
                text-align: center;
                text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff, 0 -1px 0 #fff;
                cursor: default;
            }
​
            .legend {
                font-family: 'Raleway', sans-serif;
                fill: #333333;
            }
        </style>
    </head>
    <body>
        <div class="radarChart" style="display: inline-flex;"></div>
        
        <script>
            // Set-Up 
      
            var margin = { top: 50, right: 80, bottom: 50, left: 80 },
                width = Math.min(700, window.innerWidth / 4) - margin.left - margin.right,
                height = Math.min(width, window.innerHeight - margin.top - margin.bottom);
​
      
            // Data 
​
      d3.csv("dataset.csv",function(data){ 
      
       
      
      var gare1 = 271007  //firstStationSelected
          var gare2 = 581009  //secondStationSelected
      
      var dataset = [{}]
      
      var data1 = [{}]
      
      var data2 = [{}]
      
      
     // if the secondStationSelected exists
      
        if (gare2 !== null) {
          
          
           data.forEach(function(d){
             
             if (d.Code_UIC == gare1){
               var json = [
                 {uic : gare1, 
                  name : d.Nom_de_la_gare, 
                  axes : [
                  {indice : 'Proprete', value : +d.Proprete },
                  {indice : 'Securite', value : +d.Securite },
                  {indice : 'Communication_perturbations', value : +d.Communication_perturbations },
                  {indice : 'Confort_d_attente', value : +d.Confort_d_attente },
                  {indice : 'Commerces_restauration', value : +d.Commerces_restauration },
                  {indice : 'MoyenneDistance', value : 10 - +d.MoyenneDistance * 10 / 16.8 },
                  {indice : 'score_pmr13', value : +d.score_pmr13*10/13
                  },
                  ]
                 }]
              data1 = json
             }
             
          
           
           if (d.Code_UIC == gare2){
               var json = [
                 {uic : gare2, 
                  name : d.Nom_de_la_gare, 
                  axes : [
                  {indice : 'Proprete', value : +d.Proprete },
                  {indice : 'Securite', value : +d.Securite },
                  {indice : 'Communication_perturbations', value : +d.Communication_perturbations },
                  {indice : 'Confort_d_attente', value : +d.Confort_d_attente },
                  {indice : 'Commerces_restauration', value : +d.Commerces_restauration },
                  {indice : 'MoyenneDistance', value : 10 - +d.MoyenneDistance * 10 / 16.8 },
                  {indice : 'score_pmr13', value : +d.score_pmr13*10/13
                  },
                  ]
                 }]
              data2 = json
             }
          
         dataset = data1.concat(data2)
         
         
         })
         //console.log(dataset1)
         
        }
        
        //if we only select one station
        
         if (gare2 == null) {
        
           data.forEach(function(d){
             
             if (d.Code_UIC == gare1){
               var json = [
                 {uic : gare1, 
                  name : d.Nom_de_la_gare, 
                  axes : [
                  {indice : 'Proprete', value : +d.Proprete },
                  {indice : 'Securite', value : +d.Securite },
                  {indice : 'Communication_perturbations', value : +d.Communication_perturbations },
                  {indice : 'Confort_d_attente', value : +d.Confort_d_attente },
                  {indice : 'Commerces_restauration', value : +d.Commerces_restauration },
                  {indice : 'MoyenneDistance', value : 10 - +d.MoyenneDistance * 10 / 16.8 },
                  {indice : 'score_pmr13', value : +d.score_pmr13*10/13
                  },
                  ]
                 }]
              dataset = json
             }
           
         })}
        
      
      
      //------------- END of JSON construction -------------------//
             
                
        
// setting the options of the function
      
            var radarChartOptions = {
              w: 290,
              h: 350,
              margin: margin,
              maxValue: 10,
              levels: 10,
              roundStrokes: false,
              color: d3.scaleOrdinal().range(["Blue", "DarkOrange"]),
                format: '.0f',
                legend: { title: 'Gare', translateX: 100, translateY: 40 },
                
            };
​
            // Draw the chart, get a reference the created svg element :
            let svg_radar1 = RadarChart(".radarChart", dataset, radarChartOptions);
        
});
        </script>
    </body>
</html>
    