Changing the size of shape based on values from Data Set


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:


import processing.pdf.*;

PShape baseMap;
String csv[];
String myData[][];
PFont f;

void setup() {
  size(1800, 900);
  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(",");

void draw() {
  //beginRecord(PDF, "Earthquakes.pdf");
  shape(baseMap,0, 0, width, height);
  for(int i =0; i<myData.length; i++){
    fill(255,0,0, 20);
    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]); 
    println(graphLong + " / " + graphLat);
  //println("PDF saved!");


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


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:

1633.486 / 210.83301
1519.3351 / 411.20047
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:

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.


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:



import processing.pdf.*;

PShape baseMap;
String csv[];
String myData[][];
PFont f;

void setup() {
//  size(1800, 900);
  size(500, 500);
//  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(",");

void draw() {

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

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

  for (int i =0; i<myData.length; i++) {
    fill(255, 0, 0, 20);
    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);
  //println(“PDF saved!”);


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$


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


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.


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


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


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


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.


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)
NaN / NaN
197.80998 / 146.5255
123.58254 / 352.975
142.23648 / 150.57698
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???


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)


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


on a csv file
instead loadStrings.

// get data from:
// get file from:

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

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

void draw_data() {
  for (TableRow row : mytable.rows()) {
    fill(255, 0, 0, 20);
    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);

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

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);