São Paulo - Jogos

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
	<script>
	var width = 1500;										//a largura máxima
	var height = 1500;										//a altura do SVG
	
	d3.text("JogosDoSaoPaulo.csv", function(unparsedData){	//inicia os dados

var data = d3.csvParseRows(unparsedData);			//pega todos as colunas
		var numerodejogos = 4018;
		
		var Dia = [];
		var Mandante = [];
		var Placar = [];
		var GolsPro = [];
		var GolsContra = [];
		var Adversario= [];
		var Resultado = [];
		var Ordem = [];
		var Campeonato = [];
		var	OrdemEntreAnos = [];	
		var Teste = [[],[],[],[],[],[],[],[],[]];
		
	
		for (i=0;i<numerodejogos;i++){						//um "for" para tranformar os dados em numeros (default javascript é texto)
			Dia[i] = parseInt(data[i][0]);
			Mandante = [];
			Placar = [];
			GolsPro[i] = parseInt(data[i][3]);	
			GolsContra[i] = parseInt(data[i][4]);
			Adversario= [];
			Resultado[i] = data[i][7];
			Ordem = [];	
			Campeonato [i]= data[i][6];
			Teste[3][i] = parseInt(data[i][3]);	
			OrdemEntreAnos = [];				
		};

ordena();
		function ordena (){									//função que coloca as partidas em ordem a cada ano, a primeira partida de cada ano com o numero 1 a segunda 2 e assim por diante.
			var contador =0;
			var contadorAnos =0;
			for(i=0;i<numerodejogos;i++){					//itera até o numero de jogos		
				if ((data[i+1][0])-(data[i][0])>3000) {		//se a data da linha seguinte menos a data da linha selecionada é maior que 3000 (querendo dizer que mudou de ano), então
					contador=0;								
					contadorAnos++;							//adiciona 1 para o contadode ano, (se pular de ano, adiciona 1)
					Ordem [i]=contador;						//ordem DENTRO de cada ano para todos os numeros que pularam ano
					OrdemEntreAnos[i]=contadorAnos;
				}else{										//caso não seja maior, ou seja não mudou de ano
					Ordem [i]=contador;						//ordem DENTRO de cada ano para todos os numeros que NÂO pularam ano
					OrdemEntreAnos[i]=contadorAnos;			//ordem ENTRE os anos
					contador++;								//adiciona 1 para a posição DENTRO de cada anos
				};					
			};
		};
		console.log(Campeonato);
		console.log(d3.mean(OrdemEntreAnos));

var widthScale = d3.scaleLinear ()					//cria a escala
			.domain([0,d3.max(Ordem)])						//de quanto a quanto: 0 até o máximo de jogos num ano.
			.range([0,10*(d3.max(Ordem))]);					//o tamanho da escala repete o maio numero de anos vezes 10 que eu dei para o widht de cada pedacinho (aqui não tem espaço em branco entre partezinhas)

var color = d3.scaleLinear ()						//cria escala de cor para numero de gols
			.domain([0,d3.max(GolsPro)])
			.range(["blue","red"]);

var axis = d3.axisBottom()							//desenha eixo usando escala
			.ticks((d3.max(Ordem))/3)
			.scale(widthScale);

var canvas = d3.select("body")						//cria SVG geral
			.append("svg")
			.attr("width", width)
			.attr("height", height)
			.append("g")
			.attr("transform","translate(40,20)");

canvas.append("circle")								//botão circulos de modificações								
				.attr("r",20)
				.attr("fill","yellow")
				.attr("cx", 550)
				.attr("cy", 50)
				.on("click",algoexorbitante2); 				//se clica chama a função "algoexorbitante" é o mesmo que [[ .on("click", function(d){algoexorbitante(d)}) ]]

</script>
</body>

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