//LINECHART var data; var dict = {}; var max_year = 0; var max_num = 0; var xy_array = []; function preload() { data = loadTable('health.csv', 'csv', 'header'); } function setup() { createCanvas(1300,1300); for(var r = 0; r < data.getRowCount(); r++) { var year = data.getNum(r, 5); var number = data.getNum(r,3); //find the unique years, add to dictionary if(data.getNum(r, 5) in dict) { dict[year] += number; } else { dict[year] = number; } } min_year = min(data.getColumn(5)); max_year = max(data.getColumn(5)); min_num = Infinity; max_num = 0; for(year in dict) { if(dict[year] < min_num) { min_num = dict[year]; } if(dict[year] > max_num) { max_num = dict[year]; } } var counter = 0; for(var year in dict) { var temp = []; temp[0] = year; temp[1] = dict[year]; xy_array[counter] = temp; counter++; } } function draw() { clear(); //axes drawn (draw little lines on axes) var num_ticks = 10; line(100,100,100,600); line(100,600,700,600); textSize(20); text("Line Chart: Year v Number", 50,50); textSize(10); text("Year", 350, 615); text("Number", 5, 300); range_x = max_year - min_year; step = range_x/num_ticks; var scale_x = 500/range_x; var scale_y = 500/max_num; var count_num = 0; var count_year = 0; for(var y = 600; y >= 100; y--) { if(y%50 == 0) { line(90,y,110,y); fill(0); text(round(count_num), 50, y); count_num += round(.1 * max_num); //this will give me ten ticks } } for(var x = 100; x <= 600; x++) { if(x%50 == 0) { line(x, 590, x, 610); fill(0); text(round(min_year + count_year * step), x, 650); count_year += 1; } } var count_x = 0; for(var i = 0; i < xy_array.length - 1; i++) { var x_pos = 100 + count_x*scale_x; var y_pos = 600 - xy_array[i][1]*scale_y; var next_x = 100 + (count_x+1)*scale_x; var next_y = 600 - xy_array[i+1][1]*scale_y; ellipse(x_pos, y_pos, 3, 3); if(dist(x_pos, y_pos, mouseX, mouseY) < 5) { fill(255,0,0); text("Year: " + round(xy_array[i][0]) + " Number: " + xy_array[i][1], x_pos + 5, 700 - y_pos); } line(x_pos, y_pos, next_x, next_y); count_x++; } }