Old school D3 from simpler times

All examples By author By category About

arthurwelle

Full window Github gist

TESTE MAPA Microregiões

Built with blockbuilder.org

forked from arthurwelle's block: TESTE MAPA Microregiões

<!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
  var N_Meses = 62;                   //número de interções
    
    // 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 + '/100');
            }
        });
 
  			var svgContainer = d3.select("body").append("svg")
                                    .attr("width", 800)
 																		.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"
                                 					};
                          						});
  
      
//modifica as cores do mapa
  var DuracaoDaTransicao = 300;
  var DelayDaTransicao=300;

function Muda(){//seleciona todos circulos e dá novos tamanhos e cores
    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";
                          };
                       });
      };
   };
 
      
     //este é só para teste apague depois de usar
      svgContainer.append("rect")	
      	.attr("width",45)
				.attr("height",25)
      	.attr("x", 250)
				.attr("y", 50)
				.attr("fill","green")
				.on("click",Muda);

});

</script>

</body>

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