Changing the size of shape based on values from Data Set


#1

Hey, I’m still pretty new to processing so I doubt this a very complicated issue.

I’m trying to visualise a data set of earthquakes around the world, but I’m struggling to make the markers increase in size based on the magnitude.

I am trying to create different categories of size for my marketsize based on the magnitudes 6,7,8 and 9 for earthquakes. the myData[i][4] is referencing the magnitude from a CSV file I am using.

Here is the code I’m working with:

//LIBRARIES

import processing.pdf.*;

//GLOBAL VARIABLES
PShape baseMap;
String csv[];
String myData[][];
PFont f;

//SETUP
void setup() {
  size(1800, 900);
  noLoop();
  f = createFont("Avenir-Medium", 12);
  baseMap = loadShape("WorldMap.svg");
  csv = loadStrings("Earthquake.csv");
  myData = new String[csv.length][7];
  for(int i=0; i<csv.length; i++) {
  myData[i] = csv[i].split(",");
  }
}

//DRAW
void draw() {
  
  //beginRecord(PDF, "Earthquakes.pdf");
  
  shape(baseMap,0, 0, width, height);
  noStroke();
  
  for(int i =0; i<myData.length; i++){
    fill(255,0,0, 20);
    textMode(MODEL);
    noStroke();
    float graphLong = map(float(myData[i][2]), -180, 180, 0, width);
    float graphLat = map(float(myData[i][1]), 90, -90, 0, height);
    float markerSize = float(myData[i][4]); 
    ellipse(graphLong,graphLat,markerSize,markerSize);
    println(myData[i][4]);
    println(graphLong + " / " + graphLat);
  }
  //endRecord();
  //println("PDF saved!");
}

#2

-a- pls. format your code

  • in processing IDE with [ctrl][t]
  • in above post pls. paste it into the

</>

code formatter

-b- to test the 2 files would be needed
a csv file you could just post here same like with code
a svg actually is text so it would be possible too

-c- your myData[line][4] magnitude you get by split"," so is a string
how does the print of it look?
can it be made a float? to be the radius of the circle?

so pls. post your program console print to understand better.

//___
you can work with loadStrings
but for loading CSV files possibly
https://processing.org/reference/loadTable_.html
https://processing.org/reference/Table.html
is easier.


#3

Ok, I figured the issue out a bit better the csv file content seems to be getting modified or something. Here is a snippet of the console print:

6
1633.486 / 210.83301
6
1519.3351 / 411.20047
6
494.5345 / 384.0915

The 6 is the magnitude value I am trying to use for the marker size, the issue is that for some reason all my values are being seem to coming out as a 6 despite the values being a range between 6-10. The SVG can be ignored it is just an image of a world map I am using for a background.

The original CSV data looks like this:

time,latitude,longitude,depth,mag,magType,nst,gap,dmin,rms,net,id,updated,place,type,horizontalError,depthError,magError,magNst,status,locationSource,magSource
1960-05-22T19:11:20.000Z,-38.143,-73.407,25,9.5,mw,,,,,official,official19600522191120_30,2018-03-12T17:39:40.763Z,"Bio-Bio, Chile",earthquake,,,,,automatic,iscgem,official
1964-03-28T03:36:16.000Z,60.908,-147.339,25,9.2,mw,,,,,official,official19640328033616_30,2018-03-09T15:26:26.398Z,"Southern Alaska",earthquake,,,,,automatic,iscgem,official

I created a new println for my markerSize just to double check it is also coming back in my console print as a repeating “6.0”, although If I refrence I particular line from my csv in myData such as myData[3][4] i will have the actual value from that line but it will then repeat instead.


#4

because of the loadstrings ( instead of loadTable “header” )
must somehow skip the first line

and for the graph i made the magnitude * 10

sorry / ugly cutdown of your code:

// https://earthquake.usgs.gov/earthquakes/feed/v1.0/csv.php

//LIBRARIES

import processing.pdf.*;

//GLOBAL VARIABLES
PShape baseMap;
String csv[];
String myData[][];
PFont f;

//SETUP
void setup() {
//  size(1800, 900);
  size(500, 500);
  noLoop();
//  f = createFont("Avenir-Medium", 12);
//  baseMap = loadShape("WorldMap.svg");
//  baseMap = loadShape("World.svg");
//  csv = loadStrings("Earthquake.csv");
  csv = loadStrings("all_hour.csv");
  myData = new String[csv.length-1][7];
  for (int i=0; i<csv.length-1; i++) {
    myData[i] = csv[i+1].split(",");
  }
}

//DRAW
void draw() {

  //beginRecord(PDF, “Earthquakes.pdf”);

//  shape(baseMap, 0, 0, width, height);
  noStroke();

  for (int i =0; i<myData.length; i++) {
    fill(255, 0, 0, 20);
    textMode(MODEL);
    noStroke();
    float graphLong = map(float(myData[i][2]), -180, 180, 0, width);
    float graphLat = map(float(myData[i][1]), 90, -90, 0, height);
    float markerSize = float(myData[i][4])*10;
    ellipse(graphLong, graphLat, markerSize, markerSize);
    println("mag "+markerSize+" long "+graphLong + " lat " + graphLat);
  }
  //endRecord();
  //println(“PDF saved!”);
}


data:

time,latitude,longitude,depth,mag,magType,nst,gap,dmin,rms,net,id,updated,place,type,horizontalError,depthError,magError,magNst,status,locationSource,$
2019-02-04T15:23:31.392Z,60.6949,-140.438,8.5,1.7,ml,,,,0.51,ak,ak0191m4vn8z,2019-02-04T15:26:40.257Z,"130km ENE of Cape Yakataga, Alaska",earthquake,$
2019-02-04T15:12:31.730Z,19.4050007,-155.283493,0.42,1.75,ml,20,42,0.01261,0.11,hv,hv70797561,2019-02-04T15:18:15.920Z,"5km WSW of Volcano, Hawaii",ea$
2019-02-04T15:08:38.697Z,59.8846,-151.5527,78.4,1.4,ml,,,,0.49,ak,ak0191m4sg2l,2019-02-04T15:11:56.727Z,"19km NE of Anchor Point, Alaska",earthquake,,$
2019-02-04T15:03:03.990Z,33.321,-116.2878333,10.95,1.57,ml,50,40,0.1204,0.22,ci,ci38217479,2019-02-04T15:40:43.163Z,"11km NE of Borrego Springs, CA",e$



prints:

mag 17.0 long 54.947216 lat 81.40305
mag 17.5 long 34.328484 lat 196.09723
mag 14.0 long 39.510136 lat 83.653885
mag 15.700001 long 88.48912 lat 157.44168


#5

Do you mean the first line in my CSV file? because I pretty sure I can just delete that without an issue, I did it in a recent project and nothing seemed to go wrong.

Edit: doesn’t matter just tried that and it didn’t solve the issue.


#6

did you just try my version of your code?
as the basic for the test is unchanged,
but i did load a new datafile


#7

Yeah, but the print the value still seems to be broken.


#8

here i see the by 10 amplified correct value
( as i show above )


#9

I’m not 100% sure what is causing it but something in the code is changing the value for me, As its printing in the console I can see the true value for a brief amount of time before it is changed to 6.0.


#10

ok, i reloaded your code,
and disabled change only the minimum to get it running,
but use my data set, and the console print shows


map(NaN, -180, 180, 0, 1800) called, which returns NaN (not a number)
map(NaN, 90, -90, 0, 900) called, which returns NaN (not a number)
mag
NaN / NaN
1.7
197.80998 / 146.5255
1.75
123.58254 / 352.975
1.4
142.23648 / 150.57698
1.57
318.56085 / 283.39502

so you see that does all not work if we are not on the same data.
how we make sure we have the same csv file???


#11

I fixed the issue by creating if statements using ranges for each of the magnitude categories I needed. Not completely ideal because if I wanted to add data to this I would need to change my code but this works fine for my purposes as its a visualisation of data from the past. (All earthquakes over a magnitude of 6 since 1950)


#12

very good,
i could not do that nice view and colors,
still i would like to show you how the code would look using

table

on a csv file
instead loadStrings.

code:
// get data from: https://earthquake.usgs.gov/earthquakes/feed/v1.0/csv.php
// get file from: https://upload.wikimedia.org/wikipedia/commons/5/51/BlankMap-Equirectangular.svg

PShape baseMap;
String csvfilename = "all_day.csv";     //"all_hour.csv";
Table mytable;
float magzoom = 3;

void setup() {
  size(720, 360);
  noLoop();
  baseMap = loadShape("BlankMap-Equirectangular.svg");
  mytable = loadTable(csvfilename, "header");
}

void draw_data() {
  for (TableRow row : mytable.rows()) {
    fill(255, 0, 0, 20);
    noStroke();
    float graphLong = map(row.getFloat("longitude"), -180, 180, 0, width);
    float graphLat = map(row.getFloat("latitude"), 90, -90, 0, height);
    float markerSize = row.getFloat("mag")*magzoom;
    ellipse(graphLong, graphLat, markerSize, markerSize);
  }
  draw_news();
}

void draw() {
  shape(baseMap, 0, 0, 720, 360);
  draw_data();
}


void draw_news() {
  fill(0, 0, 200);
  rect( 2, height-25, width - 4, height-2);
  fill(200, 200, 200);
  TableRow row = mytable.getRow(0);
  text("latest: "+row.getString("place"), 10, height-8);  
}