Processing line chart

data-cameraCount.csv

line_chart.pde

// Declare a table using "Table" the same way you
// would declare a number using "int" or "float"
Table cameraTable;

void setup() {
  // Decently-sized canvas:
  size( 600, 500 );
  
  // loadTable lets you request in a csv from the
  // sketch's data folder. Include "header" in the
  // options parameter if the table has a header row.
  cameraTable = loadTable("cameraCount.csv", "header");

  println(cameraTable.getRowCount() + " total rows in table"); 
  
  // Dates are in the form 20150930 (as integers), so
  // we can make a function that uses map() to convert
  // those to x-position points once we know the minimum
  // and maximum possible dates: to do that, we iterate
  // through the rows in cameraTable to build our own
  // array (list) of just the dates.
  
  // Declare the array, then tell Processing how many values
  // we expect to store in this list: to make an array, we
  // specify the type of data the array will hold plus the
  // "[]" array brackets
  int[] dates = new int[ cameraTable.getRowCount() ];
  
  // Tables are stored with row values starting at 0, so we
  // make a for loop to count up row indexes from 0, saving
  // out the date into our new "dates" array as we go
  for ( int i = 0; i < cameraTable.getRowCount(); i++ ) {
    dates[ i ] = cameraTable.getInt( i, "date" );
  }
  // Now that we have an array with all the dates, we can use
  // min() to get the min, and max() to get the max:
  println( "dates min and max" );
  println( min( dates ) ); // prints 20120701
  println( max( dates ) ); // prints 20150812
  
  // Now we do the same for the cameraCount, so that we can
  // dynamically determine the min and max cameraCount:
  int[] counts = new int[ cameraTable.getRowCount() ];
  for ( int i = 0; i < cameraTable.getRowCount(); i++ ) {
    counts[ i ] = cameraTable.getInt( i, "cameraCount" );
  }
  println( "counts min and max" );
  println( min( counts ) ); // prints 1
  println( max( counts ) ); // prints 12
  
  // The benefit of determining these mins and maxes is that
  // we can use them to get an X or Y position for any value.
  // We are going to draw a line chart, using all the room we
  // can in the canvas excepting 50px of margin on every side:
  // so, to determine the X position, we'd use map() to convert 
  // from a date to a position between x of 5 and x of 550,
  // assuming a 600-pixel-wide canvas. Let's set up some variables
  // to make that easier to read:
  int padding = 50;
  int minDate = min( dates );
  int maxDate = max( dates );
  int minX = 0 + padding;
  int maxX = width - padding;
  int minCount = 0; // Always do your Y axis from 0, per Alberto Cairo
  int maxCount = max( counts );
  // min and max are "backwards" for Y, since it counts from
  // 0,0 in the upper-left corner
  int minY = height - padding;
  int maxY = 0 + padding;
  // Print out to make sure it all looks good
  println();
  println( "min and max dates: " + minDate + ", " + maxDate );
  println( "min and max counts: " + minCount + ", " + maxCount );
  println( "min and max X: " + minX + ", " + maxX );
  println( "min and max Y: " + minY + ", " + maxY );
  println();
  
  // White BG, black lines
  background( 255 );
  stroke( 0 );
  
  // Iterate through the rows of the chart, but skip the first
  // row: we do this so that, on each iteration, we can ask
  // both what the values are for this row, and for the prior
  // row, so that we can draw a line between the two. I.e., for
  // a chart with seven data points, we'd draw 6 lines to connect
  // them all. To skip the first row, just start at 1 instead of 0:
  for ( int i = 1; i < cameraTable.getRowCount(); i++ ) {
    int oldDate = cameraTable.getInt( i - 1, "date" );
    int newDate = cameraTable.getInt( i, "date" );
    int oldCount = cameraTable.getInt( i - 1, "cameraCount" );
    int newCount = cameraTable.getInt( i, "cameraCount" );
    //println( "row " + i + ": " + newCount + " cameras on " + newDate );
    line(
      // Breaking this onto multiple lines so it is easier to read:
      // map() ends up being a verbose function since it takes so
      // many parameters (value, min data range, max data range,
      // min output range, max output range):
      map( oldDate, minDate, maxDate, minX, maxX ),
      map( oldCount, minCount, maxCount, minY, maxY ),
      map( newDate, minDate, maxDate, minX, maxX ),
      map( newCount, minCount, maxCount, minY, maxY )
      // https://processing.org/reference/map_.html
    );
  }
}