two_stations_radarChart

forked from OumaimaFassi's block: two_stations_radarChart

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/ >
		<title>Smoothed Radar Chart</title>

<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'>

<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(d){ 
      
       //console.log(d.Proprete)
       
      //var indices =["Proprete","Securite","Communication_perturbations","Confort_d_attente","Commerces_restauration","MoyenneDistance"] 
      var i = 80 
      var j = 0
      var dataset = [
        { name : d[i].Nom_de_la_gare,
         axes : [
          
        
        {indice : 'Proprete', value : +d[i].Proprete },
        {indice : 'Securite', value : +d[i].Securite },
        {indice : 'Communication_perturbations', value : +d[i].Communication_perturbations },
        {indice : 'Confort_d_attente', value : +d[i].Confort_d_attente },
        {indice : 'Commerces_restauration', value : +d[i].Commerces_restauration },
        {indice : 'MoyenneDistance', value : 10 - +d[i].MoyenneDistance * 10 / 16.8 },
        {indice : 'score_pmr13', value : +d[i].score_pmr13*10/13
        },
        ]
        },
        { name : d[j].Nom_de_la_gare,
         axes : [
          
        
        {indice : 'Proprete', value : +d[j].Proprete },
        {indice : 'Securite', value : +d[j].Securite },
        {indice : 'Communication_perturbations', value : +d[j].Communication_perturbations },
        {indice : 'Confort_d_attente', value : +d[j].Confort_d_attente },
        {indice : 'Commerces_restauration', value : +d[j].Commerces_restauration },
        {indice : 'MoyenneDistance', value : 10 - +d[j].MoyenneDistance * 10 / 16.8 },
        {indice : 'score_pmr13', value : +d[j].score_pmr13 *10/13},
        ]
        },
            
        
        
      ]        
      			
        
// 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>

https://d3js.org/d3.v4.min.js

https://d3js.org/d3-path.v1.min.js