tres

_.md

[ Launch: dois ] 9122213 by arthurwelle

config.json

{"description":"tres","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"JogosSaoPaulo.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":true,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/9R7UIEX.png"}

inlet.js

	var width = 1500;										//a largura máxima
	var height = 1500;										//a altura do SVG
var Jogos = ({19300314,"M","0-0",0,0,"Ypiranga-SP","Paulista","E"
19300323,"NM","1-6",6,1,"Juventus-SP","Paulista","V"
19300330,"M","2-2",2,2,"Palestra Itália","Paulista","E"
19300406,"NM","1-1",1,1,"Portuguesa","Paulista","E"
19300413,"NM","1-3",3,1,"Guarani","Paulista","V"
19300420,"NM","1-6",6,1,"CE América","Paulista","V"
19300503,"NM","2-4",4,2,"Germânia","Paulista","V"
19300511,"NM","2-2",2,2,"Santos","Paulista","E"
19300517,"M","2-2",2,2,"Sírio","Paulista","E"
19300525,"NM","2-1",1,2,"Corinthians","Paulista","D"
19300601,"NM","0-3",3,0,"Atlético Santista","Paulista","V"
19300608,"M","2-1",2,1,"SC Internacional-SP","Paulista","V"
19300617,"NM","0-3",3,0,"AA São Bento","Paulista","V"
19300831,"M","5-0",5,0,"Ypiranga-SP","Paulista","V"
19300907,"M","3-0",3,0,"Atlético Santista","Paulista","V"
19300914,"M","5-1",5,1,"Sírio","Paulista","V"
19300921,"NM","2-2",2,2,"Palestra Itália","Paulista","E"
19300928,"M","1-1",1,1,"SC Internacional-SP","Paulista","E"
19301005,"M","4-0",4,0,"AA São Bento","Paulista","V"
19301012,"M","4-0",4,0,"Juventus-SP","Paulista","V"
19301123,"M","3-3",3,3,"Santos","Paulista","E"
19301130,"M","5-1",5,1,"Portuguesa","Paulista","V"
19301207,"M","1-1",1,1,"Corinthians","Paulista","E"
19301214,"M","5-1",5,1,"Guarani","Paulista","V"
19301221,"M","2-1",2,1,"Germânia","Paulista","V"
              19301228,"M","2-1",2,1,"CE América","Paulista","V"})
	
	d3.text("http://localhost/JogosSaoPaulo.csv", function(unparsedData){	//inicia os dados

   		var data = d3.csv.parseRows(unparsedData);			//pega todos as colunas
		var numerodejogos = 30;
		
		var Dia = [];
		var Mandante = [];
		var Placar = [];
		var GolsPro = [];
		var GolsContra = [];
		var Adversario= [];
		var Resultado = [];
		var Ordem = [];
		var Cor = [];
		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 = [];	
			Cor = [];
			Teste[3][i] = parseInt(data[i][3]);	
			OrdemEntreAnos = [];				
		};

		var arr = [[],[],[],[],[],[],[],[],[],[]]; 			//coloca as arrays criadas no anterior e coloca numa unica array de array para facitar
		arr[0]=Dia;
		arr[3]=GolsPro;
		arr[4]=GolsContra;

		
		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(Resultado);
		console.log(d3.mean(OrdemEntreAnos));
		
		




		var widthScale = d3.scale.linear()					//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.scale.linear()						//cria escala de cor
			.domain([0,d3.max(arr[3])])
			.range(["blue","red"]);

		var axis = d3.svg.axis()							//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)");

		var bars = canvas.selectAll("rect")					//cria as barras
			.data(GolsPro)
			.enter()
				.append("rect")
				.attr("width",10)
				.attr("height",8)
				.attr("fill",function(d){return color(d);})
				.attr("x", function(d, i){return Ordem[i]*10;})
				.attr("y", function(d, i){return OrdemEntreAnos[i]*8;});
			
		canvas.append("g")									//desenha o eixo
			.attr("transform","translate(0,-20)")			//local do eixo
			.attr("class", "axis")  						//Assign "axis" class CSS
			.call(axis);
			
		canvas.append("rect")									
				.attr("width",20)
				.attr("height",20)
				.attr("fill","green")
				.attr("x", -25)
				.attr("y", -20)
				.on("click",algoexorbitante); 				//se clica chama a função "algoexorbitante" é o mesmo que [[ .on("click", function(d){algoexorbitante(d)}) ]]


		var color2 = d3.scale.ordinal()						//cria escala de cor
			.domain(["D","V","E"])
			.range(["red","blue","yellow"]);
	
		function algoexorbitante(){							//teste aqui se o cara clica então muda
			bars.attr("fill",function(d){return color2(d);});
		};

	
	
	
	
	
	
	
	
	});

JogosSaoPaulo.csv