Renda e desenvolvimentos dos estados brasileiros

Depois de brincar com a linguagem Processing, resolvi avaliar a sua versão para Javascript. Parece que, atualmente, tudo está sendo refeito em Javascript. Esta é uma das instâncias em que isso tem sentido.

Busquei os dados dos estados brasileiros na Wikipédia. As informações que resolvi comparar são a renda, a população e o índice de desenvolvimento humano (IDH).

Foi surpreendentemente fácil; a tarefa mais laboriosa foi copiar os dados da Wikipédia para o programa.

  class Estado {
    int populacao, idh, renda, regiao;

    Estado(int p, int i, int r, int s) {
      populacao=p;
      idh=i;
      renda=r;
      regiao=s;
    }
  }

  HashMap estados=new HashMap();
  estados.put("AC", new Estado(707125,751,7041,0));
  estados.put("AL", new Estado(3093994,677,5164,1));
  estados.put("AP", new Estado(648553,780,8543,0));
  estados.put("AM", new Estado(3350773,780,11829,0));
  estados.put("BA", new Estado(13633969,742,6922,1));
  estados.put("CE", new Estado(8180087,723,5636,1));
  estados.put("DF", new Estado(2469489,874,37600,2));
  estados.put("ES", new Estado(3392775,802,15236,3));
  estados.put("GO", new Estado(5849105,800,9962,2));
  estados.put("MA", new Estado(6424340,683,4628,1));
  estados.put("MT", new Estado(3033991,796,12350,2));
  estados.put("MS", new Estado(2404256,802,10599,2));
  estados.put("MG", new Estado(19159260,800,11028,3));
  estados.put("PA", new Estado(7443904,755,6241,0));
  estados.put("PB", new Estado(3753633,718,5507,1));
  estados.put("PR", new Estado(10266737,820,13158,4));
  estados.put("PE", new Estado(8541250,718,6528,1));
  estados.put("PI", new Estado(3086448,703,4213,1));
  estados.put("RJ", new Estado(15180636,832,17695,3));
  estados.put("RN", new Estado(3121451,738,6754,1));
  estados.put("RS", new Estado(10576758,832,14310,4));
  estados.put("RO", new Estado(1535625,776,8391,0));
  estados.put("RR", new Estado(425398,750,9075,0));
  estados.put("SC", new Estado(6178603,840,15638,4));
  estados.put("SP", new Estado(39924091,833,19548,3));
  estados.put("SE", new Estado(2036277,742,7560,1));
  estados.put("TO", new Estado(1373551,756,7210,0));

  int[] regioes=new int[] {#98db11, #ff9900, #ffd42a, #ff0000, #5599ff};

  void setup() {
    size(512,512);
    background(255);
    noLoop();
  }

  void draw() {
    Iterator i = estados.entrySet().iterator();
    while (i.hasNext()) {
      Map.Entry me = (Map.Entry)i.next();
      String sigla=me.getKey();
      Estado estado=me.getValue();
      float x=512*(estado.renda/40000);
      float y=512*(estado.idh/1000);
      float r=5+estado.populacao/1000000;
      fill(regioes[estado.regiao], 100);
      stroke(regioes[estado.regiao], 255);      
      ellipse(x, 512-y, r, r);
    }
  }

O programa desenha um círculo para cada estado. A posição no eixo horizontal indica a renda (quanto mais à direita, maior a renda per capita) e a posição no eixo vertical indica o IDH (quanto mais alto, maior o índice de desenvolvimento humano). O raio do círculo indica a população do estado. As cores representam as regiões: verde para norte;  laranja para nordeste;  amarelo para centro-oeste; vermelho para sudeste; e azul para sul).

Aquele ponto amarelo disparado na frente é o Distrito Federal, evidentemente. O grande ponto vermelho que o precede é São Paulo (que, tendo uma renda per capita bastante maior que a dos estados do sul, não consegue superá-los no IDH).

Pode-se constatar que os pontos aglomeram-se conforme as cores. Minas Gerais é uma exceção que se destaca, assim como o Distrito Federal.

Com pequenas alterações no método draw(), consegui inserir as siglas dos estados dentro dos círculos.

  void setup() {
    size(1024,1024);
    background(255);
    noLoop();
  }

  void draw() {
    Iterator i = estados.entrySet().iterator();
    while (i.hasNext()) {
      Map.Entry me = (Map.Entry)i.next();
      String sigla=me.getKey();
      Estado estado=me.getValue();
      float x=1024*(estado.renda/40000);
      float y=1024*(estado.idh/900);
      float r=20+estado.populacao/1000000;
      fill(regioes[estado.regiao], 100);
      stroke(regioes[estado.regiao], 255);      
      ellipse(x, 1024-y, r, r);
      fill(#FFFFFF, 255);
      text(sigla, x-8, 1028-y);
    }
  }

Tive que aumentar as dimensões do gráfico, para que as siglas não se atropelassem (ainda mais).

 

Clique na imagem para vê-la aumentada.

Concluí, então, que Processing.js é uma ferramenta deveras interessante e prática. Acho que o próximo passo é investigar as facilidades de animação e interação com o usuário. O fato de rodar no navegador permite jogar o processamento para o cliente.