FloatTable data; float dataMin, dataMax; float plotX1, plotY1; float plotX2, plotY2; float labelX, labelY; int rowCount; int columnCount; int currentColumn = 0; int distanc = 15; int yearMin, yearMax; int[] years; int yearInterval = 1; int volumeInterval = 10; //int volumeIntervalMinor = 2000000; // Add this above setup() //para deuda por habitante int volumeIntervalMinor = 200; // Add this above setup() Integrator[] interpolators; PFont plotFont; void setup() { size(850, 490); //data = new FloatTable("milk-tea-coffee.tsv"); //data = new FloatTable("deuda-ciudades.tsv"); //data = new FloatTable("deuda-por-persona.tsv"); //data = new FloatTable("deuda-por-persona-normalizada.tsv"); data = new FloatTable("deuda-por-persona-normalizada-por-years.tsv"); rowCount = data.getRowCount(); columnCount = data.getColumnCount(); years = int(data.getRowNames()); yearMin = years[0]; yearMax = years[years.length - 1]; //println(data.getTableMin()); dataMin = 0; //data.getTableMin(); //dataMax = data.getTableMax(); dataMax = ceil(data.getTableMax() / volumeInterval) * volumeInterval; //println(dataMax); interpolators = new Integrator[rowCount]; for (int row = 0; row < rowCount; row++) { float initialValue = data.getFloat(row, 0); interpolators[row] = new Integrator(initialValue); interpolators[row].attraction = 0.1; // Set lower than the default } // Corners of the plotted time series plotX1 = 120; plotX2 = width - 150; labelX = 50; plotY1 = 90; plotY2 = height - 88; labelY = height - 25; plotFont = createFont("SansSerif", 20); textFont(plotFont); smooth(); } void draw() { background(250); // Show the plot area as a white box fill(255); rectMode(CORNERS); noStroke(); rect(plotX1, plotY1, plotX2, plotY2); drawAxisLabels(); drawYearLabels(); drawCommentsVert(10,"Septiembre 2004\nComienzo de obras\nsoterramiento M30"); drawCommentsVertD(5,"Mayo 2003\nEleccciones municipales\nen Madrid"); drawTitleTabs(); drawVolumeLabels(); drawComments(0,"\nDeuda capitales de \nprovincia",-20); drawComments(1,"\nDeuda Madrid\n\n",0); drawComments(2,"\nDeuda Barcelona\n\n",38); drawComments(3,"\nDeuda capitales de \nprovincia \nsin Barcelona y Madrid",65); drawComments(4,"\nDeuda Acreedores\nlargo plazo M30\nMadrid",0); noStroke(); fill(0,12); //drawDataArea(0); stroke(150); fill(0,44); drawDataLine(1); noStroke(); fill(#62CCFF,160); drawDataArea(currentColumn); //se dibujan las áreas de todas con trasparencia fill(0,19); for (int i = 0; i < columnCount; i++) { drawDataAreaStatic(i); } stroke(255,0,0); strokeWeight(2); drawDataLine(4); strokeWeight(1); //se hace activa para ver datos con el ratón la capa activa for (int i = 0; i < columnCount; i++) { drawDataHighlight(i); } noStroke(); for (int row = 0; row < rowCount; row++) { interpolators[row].update(); } } void drawTitle() { fill(0); textSize(20); textAlign(LEFT); String title = data.getColumnName(currentColumn); text(title, plotX1, plotY1 - 10); } float[] tabLeft, tabRight; // Add above setup() float tabTop, tabBottom; float tabPad = 10; void drawTitleTabs() { rectMode(CORNERS); noStroke(); textSize(10); textAlign(LEFT); // On first use of this method, allocate space for an array // to store the values for the left and right edges of the tabs if (tabLeft == null) { tabLeft = new float[columnCount]; tabRight = new float[columnCount]; } float runningX = plotX1; tabTop = plotY1 - textAscent() - 13-distanc; tabBottom = plotY1-distanc; for (int col = 0; col < columnCount; col++) { String title = data.getColumnName(col); tabLeft[col] = runningX; float titleWidth = textWidth(title); tabRight[col] = tabLeft[col] + tabPad + titleWidth + tabPad; fill(255); rect(tabLeft[0], tabBottom, tabRight[4]+70, tabBottom+distanc+13); // If the current tab, set its background white, otherwise use pale gray fill(col == currentColumn ? #86C1DE : 224); rect(tabLeft[col], tabTop, tabRight[col], tabBottom); // If the current tab, use black for the text, otherwise use dark gray fill(col == currentColumn ? 255 : 64); text(title, runningX + tabPad, plotY1 - 10-distanc); runningX = tabRight[col]; } for (int col = 0; col < columnCount; col++) { stroke(150); line(tabRight[col],tabTop,tabRight[col],tabBottom-1); line(tabLeft[0],tabTop,tabLeft[0],tabBottom-1); } } void mousePressed() { if (mouseY > tabTop && mouseY < tabBottom) { for (int col = 0; col < columnCount; col++) { if (mouseX > tabLeft[col] && mouseX < tabRight[col]) { setCurrent(col); } } } } void setCurrent(int col) { currentColumn = col; for (int row = 0; row < rowCount; row++) { interpolators[row].target(data.getFloat(row, col)); } } void drawAxisLabels() { fill(0); textSize(13); textLeading(15); textAlign(LEFT); text("Euros por\nHabitante", labelX-40, (plotY1+plotY2)/2); textAlign(LEFT); textSize(18); text("Deuda de Madrid y otras ciudades españolas por habitante. Normalizado con IPC 2006",plotX1/3, plotY1/3); textSize(9); fill(100); textAlign(RIGHT); text("Fuentes: Banco de España. Instituto Nacional de Estadística (normaliado a IPC 2006). Presupuestos Ayto. de Madrid. 2010", width-5, labelY+20); } void drawYearLabels() { fill(0); textSize(10); textAlign(CENTER); // Use thin, gray lines to draw the grid stroke(234); strokeWeight(1); for (int row = 0; row < rowCount; row=row+4) { // if (years[row] % yearInterval == 0) { //para hacerlo en función del año //float x = map(years[row], yearMin, yearMax, plotX1, plotX2); //prueba a meter más valores por cada año float x = map(row, 0, rowCount-1, plotX1, plotX2); text(years[row], x, plotY2 + textAscent() + 10); //line(x, plotY1, x, plotY2); //para lineas de abajo a arriba stroke(150); line(x, plotY2, x, plotY2+5); //} } //las rayitas de cada uno de los trimestres for (int row = 0; row < rowCount-1; row++) { float x = map(row, 0, rowCount-1, plotX1, plotX2); stroke(150); point(x, plotY2+4); } } void drawVolumeLabels() { fill(0); textSize(10); textAlign(RIGHT); stroke(128); strokeWeight(1); for (float v = dataMin; v <= dataMax; v += volumeIntervalMinor) { if (v % volumeIntervalMinor == 0) { // If a tick mark float y = map(v, dataMin, dataMax, plotY2, plotY1); if (v % volumeInterval == 0) { // If a major tick mark float textOffset = textAscent()/2; // Center vertically if (v == dataMin) { textOffset = 0; // Align by the bottom } else if (v == dataMax) { textOffset = textAscent(); // Align by the top } //para deuda total //text(floor(v)/1000, plotX1 - 10, y + textOffset); //para deuda por habitante text(floor(v), plotX1 - 10, y + textOffset); line(plotX1 - 4, y, plotX1, y); // Draw major tick } else { line(plotX1 - 2, y, plotX1, y); // Draw minor tick } } } } void drawComments(int col, String nameC, int desvio) { int row =rowCount-1; float value = data.getFloat(row,col); fill(40); //println(value); textAlign(LEFT); textLeading(11); float y = map(value, dataMin, dataMax, plotY2, plotY1); line(plotX2+6,y,plotX2+13,y+desvio); int valueF = ceil(value); text(valueF+" euros/habitante"+nameC,plotX2+17,y+5+desvio); } void drawCommentsVert(int row, String nameD) { fill(20); textAlign(LEFT); textLeading(10); float x = map(row, 0, rowCount-1, plotX1, plotX2); stroke(100); strokeWeight(1); line(x,plotY2+12,x,plotY2+60); line(x,plotY2+12,x+3,plotY2+15); line(x,plotY2+12,x-3,plotY2+15); text(nameD,x+3,plotY2+40); } void drawCommentsVertD(int row, String nameD) { fill(20); textAlign(RIGHT); textLeading(10); float x = map(row, 0, rowCount-1, plotX1, plotX2); stroke(100); strokeWeight(1); line(x,plotY2+24,x,plotY2+60); line(x,plotY2+24,x+3,plotY2+27); line(x,plotY2+24,x-3,plotY2+27); text(nameD,x-3,plotY2+40); } void drawDataArea(int col) { beginShape(); for (int row = 0; row < rowCount; row++) { if (data.isValid(row, col)) { //para hacerlo sin interpolator //float value = data.getFloat(row, col); float value = interpolators[row].value; //para hacerlo en función del año //float x = map(years[row], yearMin, yearMax, plotX1, plotX2); //prueba a meter más valores por cada año float x = map(row, 0, rowCount-1, plotX1, plotX2); float y = map(value, dataMin, dataMax, plotY2, plotY1); vertex(x, y); } } // Draw the lower-right and lower-left corners vertex(plotX2, plotY2); vertex(plotX1, plotY2); endShape(CLOSE); } void drawDataAreaStatic(int col) { beginShape(); for (int row = 0; row < rowCount; row++) { if (data.isValid(row, col)) { //para hacerlo sin interpolator float value = data.getFloat(row, col); //para hacerlo en función del año //float x = map(years[row], yearMin, yearMax, plotX1, plotX2); //prueba a meter más valores por cada año float x = map(row, 0, rowCount-1, plotX1, plotX2); float y = map(value, dataMin, dataMax, plotY2, plotY1); vertex(x, y); } } // Draw the lower-right and lower-left corners vertex(plotX2, plotY2); vertex(plotX1, plotY2); endShape(CLOSE); } void keyPressed() { if (key == '[') { currentColumn--; if (currentColumn < 0) { currentColumn = columnCount - 1; } } else if (key == ']') { currentColumn++; if (currentColumn == columnCount) { currentColumn = 0; } } } void drawDataHighlight(int col) { for (int row = 0; row < rowCount; row++) { if (data.isValid(row, col)) { float value = data.getFloat(row, col); String valueS = nf(value,3,0); //para hacerlo en función del año //float x = map(years[row], yearMin, yearMax, plotX1, plotX2); //prueba a meter más valores por cada año float x = map(row, 0, rowCount-1, plotX1, plotX2); float y = map(value, dataMin, dataMax, plotY2, plotY1); String titlecolumna = data.getColumnName(col); if (dist(mouseX, mouseY, x, y) < 8) { stroke(0,100); strokeWeight(10); point(x, y); String txtm = valueS + " euros/habitante\n Deuda " + titlecolumna + "\n(Año " + years[row] + ")"; String m = valueS + " euros/habitante"; float mw= textWidth(txtm); strokeWeight(0); rectMode(CORNER); fill(255,150); rect(x-13, y-66,mw+8,53); triangle(x-3,y-14,x+3,y-14,x,y); fill(0); textSize(10); textAlign(LEFT); text(txtm, x-9, y-56); textAlign(LEFT); } } } } void drawDataLine(int col) { noFill(); beginShape(); for (int row = 0; row < rowCount; row++) { if (data.isValid(row, col)) { float value = data.getFloat(row, col); //para hacerlo en función del año //float x = map(years[row], yearMin, yearMax, plotX1, plotX2); //prueba a meter más valores por cada año float x = map(row, 0, rowCount-1, plotX1, plotX2); float y = map(value, dataMin, dataMax, plotY2, plotY1); vertex(x, y); } } endShape(); }