Changing the size of shape based on values from Data Set

Processing Coding Questions
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!");
}
1 Like
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

is easier.

1 Like
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.

1 Like
4

2019-02-04_23-07-38_snap
2019-02-04_23-07-38_snap1205×907 75.5 KB

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

1 Like
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

39
Screenshot 2019-02-04 at 16.53.39.jpg2880×1750 414 KB

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)

1 Like
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.

2019-02-05_15-33-23_snap
2019-02-05_15-33-23_snap1505×715 126 KB

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);  
}
1 Like