Built with blockbuilder.org
xxxxxxxxxx<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)"); var bars = canvas.selectAll("rect") //cria as barras .data(GolsPro) .enter() .append("rect") .attr("width",15) .attr("height",15) .attr("fill",function(d){return color(d);}) .attr("x", function(d, i){return Ordem[i]*17;}) .attr("y", function(d, i){return OrdemEntreAnos[i]*17;}); 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("circle") //botão circulos de modificações .attr("r",20) .attr("fill","green") .attr("cx", 500) .attr("cy", 50) .on("click",algoexorbitante); //se clica chama a função "algoexorbitante" é o mesmo que [[ .on("click", function(d){algoexorbitante(d)}) ]] 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)}) ]] function algoexorbitante(){ //teste aqui se o cara clica então muda canvas.selectAll("rect") .data(Resultado) .attr("fill",function(d){ switch(d){ case "D": return "red" break; case "E": return "yellow" break; case "V": return "blue" break; default : return "green"; }; }); }; function algoexorbitante2(){ //teste aqui se o cara clica então muda canvas.selectAll("rect") .data(Campeonato) .attr("fill",function(d){ switch(d){ case "Paulista": return "#FFFF00" break; case "Rio-Sao Paulo": return "#FF9900" break; case "Robertao": return "#FEE6BF" break; case "Brasileiro": return "#809FFE" break; case "Libertadores": return "#FF0000" break; case "Copa do Brasil": return "#00CC00" break; case "Supercopa Libertadores": return "#BFFEBF" break; case "Mundial": return "#00248E" break; case "Copa de Ouro": return "#009999" break; case "Recopa Sudam": return "#BFFFFE" break; case "Copa Conmebol": return "#BFFEBF" break; case "Master Conmebol": return "#00CC00" break; case "Copa Mercosul": return "#330099" break; case "Copa dos Campeoes": return "#FF9900" break; case "Copa Joao Havelange": return "#FEE6BF" break; case "Copa Sudamericana": return "#0066B3" break; case "Copa Sul-Americana": return "#CCFE80" break; case "Taca Suruga": return "#24006B" break; default : return "black"; }; }); }; }); </script></body> https://d3js.org/d3.v4.min.js