dataviz002 i2

// Inserindo interação e refinando

//mais em https://p5js.org/reference/#/p5.TableRow/getString

​

let table;

let anima = 5 ;

let areaM ;

let raioM ;

let button;

let myFont;//fonte do google fonts

let buttonv;

let valds=1;

function preload() {

  //my table is comma separated value "csv"

  //and has a header specifying the columns labels

  table = loadTable('https://deckard.openprocessing.org/user3417/visual1603117/h10f780e448780b603afd4b5119bd76b5/investimentoop2.csv',

                    'csv');

  table2 = loadTable('https://deckard.openprocessing.org/user3417/visual1603117/h10f780e448780b603afd4b5119bd76b5/investimentoop.csv',

                    'csv');

  //the file can be remote

  //table = loadTable("http://p5js.org/reference/assets/mammals.csv",

  //                  "csv", "header");

}

​

function setup() {

  createCanvas(windowWidth,windowHeight);

  //listas de dados area e raio 

  areaM = [];

  raioM = [];

  button=[];

  let pxbt=width*0.1;

  //loop para fazer os botões e puxar os dados do csv para nomear cada um deles com o ano

  for (let ba = 1;ba<6;ba++){

    button [ba]= createButton(table.getString(0,6-ba));//cria todos os botões

    button[ba].size(100,40);//tamanho botão

    button[ba].position(pxbt,height*0.05);//posição do botão

    if (ba%4==0){

    button[ba].mousePressed(bot2021);//adiciona a função mousePressed para cada um deles

      //fiz somente o para o ano de 2021

      //otimizar esse codigo para menor repetição

    }

    //print(table.getString(0,6-ba));//teste imprime os anos

    pxbt=pxbt+150;

  } 

}

​

function bot2021(){

  //função para o botão 2021

  print("2021");

  //inserir a função para quando aperta o botão

}

​

​

function draw(){

  background(0);

  //area da elipse PI*(r*r); ou area=PI*(pow(raio,2));

  //define um tamanho maximo para ellipse

  let dataAreaMax = PI*(pow(width/7,2));

  //print(dataAreaMax);

  let ajusteTela = width*2;//para reduzir a escala de todas as ellipses multiplicar por 2 ou 3

  let px = width*0.095;//variavel para posicionar as ellipses

  //faço todas as ellipses e calculos para cada ministério em cada ano

  for (let a=1;a<=7;a++){

    //calcula a area máxima 

    areaM[a] = map(table.getNum(a, anima),0,3000000000,0,dataAreaMax)/ajusteTela;

    //calcula o raio

    raioM[a]=sqrt(areaM[a]/PI);

​

    //desenha na tela

    let pxa = [];//lista de posições

    pxa[a]=px;

    fill(255);

    ellipse(px,height/2,raioM[a]*2,raioM[a]*2);

    let d=[]

    //interatividade

    d[a] = dist(px,height/2,mouseX,mouseY);

    let cor1 = color(255);

    let cor2 = color(0,255,0);

    if(d[a]<raioM[a]){

      valds=width/100*3;//valor destaque tamanho

      fill(cor2);

      textSize(valds);

      text(table2.getString(a,anima),width*0.6,height*0.25);

    }else {

      fill(cor1);

    }

    //fill(255);

    push();

    translate(-100,100)

    textFont("Signika Negative");//para fonte precisa entrar o link da fonte no arquivo html

    textSize(width/80);

    text(table.getString(a,0),px,height*0.7);

    textSize(width/100);

    text(table2.getString(a,anima),px,height*0.8);//usei tabela inicial que já era formatada com pontos para melhor visualização

    px=px+width*0.95/7;

    //  print(areaM[a]+" "+raioM[a]);

    pop();

  }

  fill(255);

  textFont("Signika Negative");

  textSize(width/10);

  text(table.getString(0,anima),width/3,height*0.3);

  //animação simples

  if (frameCount % 70 == 0) anima=anima-1;//conta de 5 até 1 a cada 45 frames. 

  if (anima<1)anima=5;

  //essa variavel é para ler cada coluna com os numeros

  //animação com seno

  //anima= sin(PI+millis()*0.00024);

  //anima=6-floor(map(anima,-1,1,1,5));

  //if(anima<1) anima=5;

  //limita entre 1 a 5

  anima=constrain(anima,1,5);

  //text(anima,100,100);

}

​