let numr;

let numc;

let date=[];

let gmsl=[];

let sze=[];

let diaX,diaY;

let dataMin,dataMax=0;

function preload()

{

 table = loadTable("assests/sea.csv","csv","header");

}

​

const os = 0.5;

const oa = 2; 

​

​

function setup()

{

  createCanvas(1080, 1080);

  frameRate(60);

  numr=table.getRowCount();

  numc=table.getColumnCount();

 // print(numr,numc);

   for(let r=0;r<table.getRowCount();r++)

    {

      date[r] = table.getString(r,0); 

      gmsl[r] = table.getNum(r,1);

      // print(date[r] + "  " + gmsl[r]);

  minMax();

   }

}

​

function draw()

​

{ clear();

  background(250);

  info();

  // diaX= width/2;

  // diaY= height/2;

 translate(width/2, (height-120)/2);

  let radius = 100;

  let angle = 360/(numr);

  for (let i=0;i<numr;i++)

    { 

      sze[i]= map(gmsl[i],-3.5,79.5,0,150);

     let angle = TWO_PI * i / numr; 

      let sx=(radius) * cos(angle);

      let sy=(radius) * sin(angle);

      let sx1=(radius+200) * cos(angle);

      let sy1=(radius+200) * sin(angle);

      let len = (sze[i]+radius) + oa * sin(frameCount/1.1 * os + angle * i);

      //land

      strokeWeight(1);

     stroke(230, 190, 145);

     line(sx1, sy1, sx* len /(radius-9), sy* len/(radius-9));

      // water

      if (i%12==0)

        { stroke('#0C6399');

          strokeWeight(1.2);

        }

      else {

      stroke('#0C6399');

      strokeWeight(0.8);

        }

     line(sx,sy, sx* len/ radius, sy* len/ radius );  

      fill(255);

    circle(sx* len/ radius,sy* len/ radius,3)

   noStroke();

        textAlign(CENTER);

        textSize(18);

        fill('#607D8B');

        text("Sea Level",0,0-24);

        text("Rise",0,0);

       text("1993 - 2015",0,0+24);

​

//      // // caps 

//      //  noStroke();

//      //  fill('black');

//      //  circle(pointx,pointy,2)

    }

​

}

​

​

function minMax()

 {

    for (let i=0;i<numr;i++)

     {

      if(table.getNum(i,1)>dataMax)

         {

           dataMax=table.getNum(i,1);

        }

     }

           dataMin=dataMax;

   for (let i=0;i<numr;i++)

     {

       if(table.getNum(i,1)<dataMin)

         {

           dataMin=table.getNum(i,1);

         }

     }

   //print(dataMin + "  " + dataMax);

 }

function info() {

  textSize(15);

  textAlign(CENTER);  // Center the text horizontally

  fill('#000000');

  let infoText = "This data contains 'cumulative changes in sea level for the world’s oceans since 1880, based on a combination of long-term tide gauge measurements and recent satellite measurements. It shows average absolute sea level change, which refers to the height of the ocean surface, regardless of whether nearby land is rising or falling. Satellite data are based solely on measured sea level, while the long-term tide gauge data include a small correction factor because the size and shape of the oceans are changing slowly over time. (On average, the ocean floor has been gradually sinking since the last Ice Age peak, 20,000 years ago.)'";

  // Use a smaller width for the text box to make it centered properly

  text(infoText, width/10, height - 200, width * 0.8); 

}

​

​

​