D3 Examples - TESTE MAPA Microregiões

xxxxxxxxxx
 
<!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 = 40;
        
        var Dia = [];
        var Mandante = [];
        var Placar = [];
        var GolsPro = [];
        var GolsContra = [];
        var Adversario= [];
        var Resultado = [];
        var Ordem = [];
        var Campeonato = [];
        var OrdemEntreAnos = [];    
            var CX = [];
            var CY = [];
            var R = [];
        
    
        for (i=0;i<numerodejogos;i++){  // dados em numeros (default javascript é texto)
            Dia[i] = parseInt(data[i][0]);
            GolsPro[i] = parseInt(data[i][3]);  
            GolsContra[i] = parseInt(data[i][4]);
            Resultado[i] = data[i][7];
            Campeonato [i]= data[i][6];
      
                CX[i] = parseInt(data[i][8]);   
                CY[i] = parseInt(data[i][9]);   
                R[i] = parseInt(data[i][10]);   
        };
​
        
        ordena();
        function ordena (){
     
            var contador =0;
            var contadorAnos =0;
            for(i=0;i<numerodejogos;i++){   
                if ((data[i+1][0])-(data[i][0])>3000) { 
                    contador=0;                             
                    contadorAnos++; 
                    Ordem [i]=contador; 
                    OrdemEntreAnos[i]=contadorAnos;
                }else{  
                    Ordem [i]=contador; 
                    OrdemEntreAnos[i]=contadorAnos;
                    contador++;                             
                };                  
            };
        };
        
        
​
​
        var color = d3.scaleLinear ()
            .domain([0,d3.max(GolsPro)])
            .range(["blue","red"]);
​
        var canvas = d3.select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", height)
            .append("g")
            .attr("transform","translate(40,20)");
​
        var bars = canvas.selectAll("rect") 
            .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;});
            
            
        var circulos = canvas.selectAll("circle")               
                .data(CX)
                .enter()
            .attr("r",20)
                    .attr("fill","green")
                    //.attr("cx", function(d){return (d);})
                .attr("cx", 82)
                    .attr("cy", 82)
                    .on("click",algoexorbitante);               
​
​
​
                
                
        function algoexorbitante(){ 
                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";
                };
            });
        };
​
​
    
    
    
    
    });
​
    
    </script>
</body>
​
    