D3 Examples - MAPA Microregiões Industria

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; 
    }
    
    .textoAno{
            fill:black;
      font-family: "Courier New", Courier, monospace;
            font-size: 58px;
      font-weight: bold;
      font-variant: small-caps;
        }
    .TextoSetores{
            fill:slategray;
            font-family: "Times New Roman", Times, serif;
            font-size: 48px;
      font-weight: bold;
      font-variant: small-caps;
        }
​
  </style>
</head>
​
<body >
 
    <script>
  var width = 1500;                   //maximum width
  var height = 1500;                  //height of the SVG
  var N_Meses = 62;                   //number os iterations, months;
  var Text_Datas=['jan/12','fev/12','mar/12','abr/12','mai/12','jun/12','jul/12','ago/12','set/12','out/12','nov/12','dez/12','jan/13','fev/13','mar/13','abr/13','mai/13','jun/13','jul/13','ago/13','set/13','out/13','nov/13','dez/13','jan/14','fev/14','mar/14','abr/14','mai/14','jun/14','jul/14','ago/14','set/14','out/14','nov/14','dez/14','jan/15','fev/15','mar/15','abr/15','mai/15','jun/15','jul/15','ago/15','set/15','out/15','nov/15','dez/15','jan/16','fev/16','mar/16','abr/16','mai/16','jun/16','jul/16','ago/16','set/16','out/16','nov/16','dez/16','jan/17','fev/17']  
  
    // load the data
    d3.json("DadosJson4.json", function(error, data) {
        data.forEach(function(d) {
            d.CX = d.CX;
            d.CY = d.CY;
            for(i=1;i<N_Meses;i++){
                eval('d.R' + i + ' = d.Ind' + i + '/50');
            }
        });
 
            var svgContainer = d3.select("body").append("svg")
                                    .attr("width", 1500)
                                                                        .attr("height", 1200);
​
        var circles = svgContainer.selectAll("circle")
                          .data(data)
                          .enter()
                          .append("circle");
​
            var circleAttributes = circles
                                            .attr("class", "PontosnoMapa") 
                            .attr("cx", function (d) { return d.CX; })
                            .attr("cy", function (d) { return d.CY; })
                            .attr("r", function (d) { return Math.abs(d.R1);})
                                            .style("stroke", "black")
                            .attr("fill",function(d){           
                                                                                    if(d.R1>0){
                                                                                        return "#23aafe" }else{
                                                    return "#ff0a12"
                                                    };
                                                });
      
        var Texto = svgContainer.append("text")     //Creats the text of the date
                          .attr("id", "TextodoAno")     
                          .attr("x", 330)   
                          .attr("y", 630)
                          .text("jan/12")
                          .attr("class","textoAno");  
 
        var Text_Setor1 = svgContainer.append("text")   //Creats text Sectors       
                          .attr("x", 55)    
                          .attr("y", 50)
                          .text("Indústria")
                          .attr("class","TextoSetores"); 
 
  ////////////////////////////////////////////////////////////////////////////////// 
//Transitions: change the colour of the circles, and of the text
  var DuracaoDaTransicao = 300;
  var DelayDaTransicao=300;
​
  function Muda(){//select all the circles and gives them new colors and sizes
    for(i=1; i<N_Meses;i++){
        svgContainer.selectAll(".PontosnoMapa")
          .data(data)
          .transition()
          .delay(DelayDaTransicao * i)
          .duration(DuracaoDaTransicao)
          .attr("r", function (d) { return Math.abs(eval('d.R' + i));})
          .attr("fill",function(d){     
                          if(eval('d.R' + i)>0){
                            return "#23aafe"; }else{
                            return "#ff0a12";
                          };
                       });
         svgContainer.selectAll("#TextodoAno")//change the date
          .transition()
          .duration(DuracaoDaTransicao)
          .delay(DelayDaTransicao*i)
          .text(Text_Datas[i]);
      };
   };
 
//////////////////////////////////////////////////////////////////////////////////
​
        
      
      
      
//just for the green square that act as a button provisionaly 
      svgContainer.append("rect")   
        .attr("width",25)
                .attr("height",25)
        .attr("x", 0)
                .attr("y", 0)
                .attr("fill","black")
                .on("click",Muda); 
​
      
      
    });//end of the D3 function
    
    
    
    
​
    
    </script>
  
​
</body>
​
    