InfoVis:Wiki - User contributions [en]

Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 02 - Aufgabe 3 - Prototype

2007-01-04T21:39:56Z

UE-InfoVis0607 9815963: /* TileMap class */

=Tile Map Prototype=
==authors==
[[Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 02|Gruppe 02 (Diesenreiter, Weixelbaumer, Felkel, Maier)]]

==architecture==
===description===
===images===

==code==
=== TileMap class===
<pre>
package tilemap;
//@author: simon diesenreiter (sd), stefan weixelbaumer (sw), wolfgang felkel (wf), alexander maier (am)
//@year: 2006
//@class TileMap: main class

//PREFUSE
import prefuse.data.parser.DateTimeParser;
import prefuse.data.parser.DoubleParser;
import prefuse.data.parser.DataParser;
import prefuse.data.parser.ParserFactory;
import prefuse.data.Table;
import prefuse.data.io.DataIOException;
import prefuse.data.io.DelimitedTextTableReader;
import prefuse.data.expression.Predicate;
import prefuse.data.expression.parser.ExpressionParser;
import prefuse.Visualization;
import prefuse.render.RendererFactory;
import prefuse.render.AxisRenderer;
import prefuse.render.Renderer;
import prefuse.render.ShapeRenderer;
//mouseover
import prefuse.controls.ToolTipControl;

//UTIL
import java.util.Vector;
import java.util.Calendar;
import java.util.Date;

//TEXT
import java.text.SimpleDateFormat;

//ACTIONS
import prefuse.action.layout.AxisLayout;
import prefuse.Constants;
import prefuse.visual.VisualItem;
import prefuse.action.ActionList;
import prefuse.action.RepaintAction;
import prefuse.action.assignment.DataColorAction;
import java.awt.Color;

import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.awt.geom.Rectangle2D;

//DISPLAY
import prefuse.Display;
import prefuse.controls.ZoomControl;
import prefuse.controls.PanControl;
import java.awt.GridLayout;
import java.awt.Rectangle;
import java.awt.GraphicsEnvironment;
import java.awt.BorderLayout;
import javax.swing.event.ChangeListener;
import javax.swing.event.ChangeEvent;
import javax.swing.BorderFactory;
import javax.swing.BoxLayout;
import javax.swing.JComboBox;
import javax.swing.JLabel;
import javax.swing.JToolBar;

//APPLICATION LAUNCHER
import javax.swing.*;

public class TileMap {

//display-constants
private static final String group = "data";
private static final String day = "Day";
private static final String week = "Week";
private static final String year = "Year";
private static final String dayLabel = "DayLabel";
private static final String monthLabel = "MonthLabel";
private static final String yearLabel = "YearLabel";

//action-constants
private static final String xAction = "xAction";
private static final String yAction = "yAction";
private static final String colorAction = "colorAction";
private static final String drawAction = "drawAction";

//size(px) of each tile
private static int tilesize = 10;
private static Visualization vis;
private static ActionList draw;

//data-source
private static final String filePath = "http://stud3.tuwien.ac.at/~e9926534/abfluss.csv";

public static void main(String[] args){

//-- 1. read the data from a file-----------------------------------------
//set up data parser(s) - one for Date & Time - one for double value ()
DateTimeParser dateTimeParser = new DateTimeParser();
DoubleParser doubleParser = new DoubleParser();

//instantiate DataParser Object & ParserFactory-Object [prefuse]
DataParser[] dP2 = new DataParser[]{dateTimeParser, doubleParser};
ParserFactory pF2 = new ParserFactory(dP2);

//set data-delimiter
DelimitedTextTableReader reader = new DelimitedTextTableReader("[;]", pF2);

Table table = new Table();

try{
table = reader.readTable(filePath);
System.out.println("InfoVisMain.main(): reading file: " + filePath);
}
catch(DataIOException ex){
System.out.println("InfoVisMain.main(): error reading file: " + ex.getMessage());
}

//add additional columns to the table
table.addColumn(day, int.class);
table.addColumn(week, int.class);
table.addColumn(year, int.class);
table.addColumn(dayLabel, String.class);
table.addColumn(monthLabel, String.class);
table.addColumn(yearLabel, String.class);

SimpleDateFormat sdfDay = new SimpleDateFormat("EEE");
SimpleDateFormat sdfMonth = new SimpleDateFormat("MMM");
SimpleDateFormat sdfYear = new SimpleDateFormat("yyyy");

//@param yearVector: a vector that stores the single years for later creating a display for each single year
Vector<Integer> yearVector = new Vector<Integer>();
int yearTracker = Integer.MIN_VALUE;

//walk through data-table
for (int i=0; i<table.getRowCount(); i++){
if(table.canGetDate(table.getColumnName(0))){
Date tmpDate = table.getDate(i, 0);
Calendar myCalendar = Calendar.getInstance();
myCalendar.setTime(tmpDate);

table.setInt(i, day, myCalendar.get(Calendar.DAY_OF_WEEK));

//introduce an extra week "0" for the case of the beginning of a year where days belong
//to the old-year's week
int tmpWeek = myCalendar.get(Calendar.WEEK_OF_YEAR);
int tmpMonth = myCalendar.get(Calendar.MONTH);
if(tmpMonth==0 & tmpWeek==53 ||tmpMonth==0 & tmpWeek==52){
table.setInt(i, week, 0); //if (month==JAN AND week==53 -> week=0)
}
else{
table.setInt(i, week, tmpWeek);
}

//get the year and also write the years to the yearVector
int tmpYear = myCalendar.get(Calendar.YEAR);
if(yearTracker != tmpYear){
yearTracker = tmpYear;
yearVector.add(new Integer(yearTracker));
}
table.setInt(i, year, tmpYear);

//get the days, months... as Strings for the Labels
table.setString(i, dayLabel, sdfDay.format(tmpDate));
table.setString(i, monthLabel, sdfMonth.format(tmpDate));
table.setString(i, yearLabel, sdfYear.format(tmpDate));
}
}

//output table data on system console [or not]
Boolean doTableOutput = true;
if(doTableOutput){
//OUTPUT: table properties
System.out.println("Table_properties: " + table.toString());
//OUTPUT: table names
for (int j=0; j<table.getColumnCount(); j++){
System.out.print(table.getColumnName(j).toString() + "\t");
if(j==0)System.out.print("\t");//this is only for nicer output because that string is so long ;)
}
//OUTPUT: table values
System.out.print("\n");
for(int i=0; i<table.getRowCount(); i++){
for (int j=0; j<table.getColumnCount(); j++){
System.out.print(table.get(i, j).toString() + "\t");
if(j==5 || j==6)System.out.print("\t"); //this is only for nicer output too
}
System.out.print("\n");
}
}

//-- 2. create a Visualisation instance ------------------------------------
vis = new Visualization();
vis.add(group, table);

//-- 3. the renderers and renderer factory ---------------------------
vis.setRendererFactory(new RendererFactory() {
//renderer for drawing simple shapes - in this case
ShapeRenderer shapeR = new ShapeRenderer(tilesize);

Renderer yaxisR = new AxisRenderer(Constants.CENTER, Constants.CENTER);

Renderer xaxisR = new AxisRenderer(Constants.CENTER, Constants.CENTER);

public Renderer getRenderer(VisualItem item) {
return item.isInGroup(TileMap.dayLabel) ? yaxisR :
item.isInGroup(TileMap.monthLabel) ? xaxisR : shapeR;
}
});

// -- 4. the processing actions --------------------------------------

//the boundingBoxes for the labels and display
int topLeftX = 0;
int topLeftY = 0;
int labelHeight = 30;
int labelWidth = 0;
Rectangle2D yearLabelB = new Rectangle2D.Double(topLeftX, topLeftY, labelWidth, labelHeight);
Rectangle2D dayLabelB = new Rectangle2D.Double(topLeftX, topLeftY+labelHeight, labelWidth, tilesize*7);
Rectangle2D monthLabelB = new Rectangle2D.Double(topLeftX+labelWidth, topLeftY, tilesize*53, labelHeight);
Rectangle2D tileMapB = new Rectangle2D.Double(topLeftX+labelWidth, topLeftY+labelHeight, tilesize*53, tilesize*7);

//set up which values over which axis to be displayed
AxisLayout x_axis = new AxisLayout(group, week, Constants.X_AXIS);
x_axis.setLayoutBounds(tileMapB);
vis.putAction(xAction, x_axis);

AxisLayout y_axis = new AxisLayout(group, day, Constants.Y_AXIS);
y_axis.setLayoutBounds(tileMapB);
vis.putAction(yAction, y_axis);

DataColorAction dataColor = new DataColorAction(group, "Abfluss", Constants.NUMERICAL,
VisualItem.FILLCOLOR);
dataColor.setBinCount(4);
vis.putAction(colorAction, dataColor);

//crate an actionList and add all actions to it. finally add the actionList to the Visualization
draw = new ActionList();
draw.add(x_axis);
draw.add(y_axis);
draw.add(dataColor);
// draw.add(dayLabels);
// draw.add(monthLabels);
draw.add(new RepaintAction());
vis.putAction(drawAction, draw);

// -- 5. the display and interactive controls -------------------------
// +
// -- 6. launch the visualization -------------------------------------

// create a new window to hold the visualization
JFrame frame = new JFrame("T I L E M A P");
// ensure application exits when window is closed
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

JPanel pane = new JPanel(new GridLayout(yearVector.size(), 1));

int borderSize = 0;
int displayHeight = (int)tileMapB.getHeight()+(int)monthLabelB.getHeight();
int displayWidth = (int)tileMapB.getWidth()+(int)dayLabelB.getWidth();

ZoomControl zoomControl = new ZoomControl();

for(int i=0; i<yearVector.size(); i++){
Predicate thatYear = (Predicate)ExpressionParser.parse(year + "==" + yearVector.get(i).toString());
Display d = new Display(vis);
d.setPredicate(thatYear);
d.setBorder(BorderFactory.createEmptyBorder(borderSize, borderSize, borderSize, borderSize));
d.setSize(displayWidth+borderSize, displayHeight+borderSize);

d.panAbs(0, -7); //this is for fine-tuning of the layout
ToolTipControl ttc = new ToolTipControl(new String[] {"Datum", "Abfluss"});
d.addControlListener(ttc);
d.addControlListener(zoomControl);
d.addControlListener(new PanControl());

JPanel innerPane = new JPanel(new BorderLayout());
JLabel label = new JLabel(yearVector.get(i).toString());
label.setHorizontalAlignment(SwingConstants.RIGHT);
label.setVerticalAlignment(SwingConstants.TOP);
label.setBackground(Color.RED);
label.setSize(20, 20);
innerPane.add(label, BorderLayout.WEST);
innerPane.add(d, BorderLayout.CENTER);
innerPane.setBackground(Color.WHITE);

pane.add(innerPane);
// pane.add(d);
}

JScrollPane scroller = new JScrollPane(pane);
JToolBar toolBar = makeToolbar();
frame.getContentPane().add(toolBar, BorderLayout.NORTH);
frame.getContentPane().add(scroller, BorderLayout.CENTER);

// get local graphics environment
GraphicsEnvironment graphicsEnvironment=GraphicsEnvironment.getLocalGraphicsEnvironment();
// get maximum window bounds
Rectangle maximumWindowBounds=graphicsEnvironment.getMaximumWindowBounds();

frame.setSize(maximumWindowBounds.width/2, maximumWindowBounds.height);

frame.setVisible(true); // show the window
vis.run(drawAction);
}

private static JToolBar makeToolbar()
{
JToolBar toolbar = new JToolBar();
toolbar.setLayout(new BoxLayout(toolbar, BoxLayout.X_AXIS));

//add a combobox for switching scales
final String[] scaleNames = {"LINEAR", "SQRT", "LOG"};
final JComboBox scaleChooser = new JComboBox(scaleNames);
// scb.setSelectedItem(sfield);
scaleChooser.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent e) {
DataColorAction dataColorA = (DataColorAction)vis.getAction(colorAction);
String chosen = scaleChooser.getSelectedItem().toString();
if(chosen.equals("LOG")){
dataColorA.setScale(Constants.LOG_SCALE);
}
else if(chosen.equals("SQRT")){
dataColorA.setScale(Constants.SQRT_SCALE);
}
else{
dataColorA.setScale(Constants.LINEAR_SCALE);
}
vis.run(drawAction);
}
});
toolbar.add(new JLabel("SCALE: "));
toolbar.add(scaleChooser);

//add a slider for setting the binsize
int slideStart = ((DataColorAction)vis.getAction(colorAction)).getBinCount();
final JSlider slider = new JSlider(2, 20, slideStart);
slider.setMajorTickSpacing(4);
slider.setMinorTickSpacing(1);
slider.setPaintTicks(true);
slider.setPaintLabels(true);
slider.setSnapToTicks(true);
slider.addChangeListener(new ChangeListener(){
public void stateChanged(ChangeEvent ce){
if(!slider.getValueIsAdjusting()){
int val = slider.getValue();
DataColorAction dataColorA = (DataColorAction)vis.getAction(colorAction);
dataColorA.setBinCount(val);
vis.run(drawAction);
}
}
});
toolbar.add(new JLabel("BINSIZE: "));
toolbar.add(slider);

toolbar.setFloatable(false);
return toolbar;
}

}

==example data==

===example data (InfoVisMain.java)===
Copy that data and store it as ''.csv''. For using it you have to change the path to the file in the sourcecode.
<pre>
Datum;Abfluss
01.01.1977 11:00;5.721
02.01.1977 10:30;5.697
03.01.1977 10:00;5.767
04.01.1977 17:00;5.861
05.01.1977 16:30;5.697
06.01.1977 11:30;5.791
07.01.1977 18:30;5.697
08.01.1977 12:30;5.908
09.01.1977 12:00;5.861
10.01.1977 12:00;5.861
11.01.1977 18:00;5.837
12.01.1977 11:30;6.026
13.01.1977 19:30;5.955
14.01.1977 11:00;5.978
15.01.1977 20:30;5.837
16.01.1977 12:00;6.895
17.01.1977 11:30;6.073
18.01.1977 12:30;5.767
19.01.1977 19:30;6.263
20.01.1977 19:00;5.884
21.01.1977 09:00;6.359
22.01.1977 11:30;6.699
23.01.1977 14:30;5.837
24.01.1977 11:30;5.628
25.01.1977 19:30;5.791
26.01.1977 11:30;5.744
27.01.1977 09:30;5.651
28.01.1977 19:30;5.651
29.01.1977 20:00;6.192
30.01.1977 11:30;5.536
31.01.1977 20:30;5.767
01.02.1977 19:30;5.651
02.02.1977 11:30;6.073
03.02.1977 10:30;6.002
04.02.1977 09:30;6.994
05.02.1977 20:00;6.723
06.02.1977 11:30;7.168
07.02.1977 20:30;6.528
08.02.1977 18:00;6.192
09.02.1977 11:30;7.776
10.02.1977 19:30;7.118
11.02.1977 19:30;7.827
12.02.1977 09:30;7.47
13.02.1977 09:30;7.168
14.02.1977 20:00;6.383
15.02.1977 20:00;6.12
16.02.1977 20:00;6.263
17.02.1977 20:00;6.168
18.02.1977 20:00;5.861
19.02.1977 19:30;5.978
20.02.1977 19:30;6.383
21.02.1977 19:30;9.524
22.02.1977 12:30;7.956
23.02.1977 20:00;7.648
24.02.1977 23:59;8.257
25.02.1977 15:30;10.271
26.02.1977 00:00;9.21
27.02.1977 05:00;8.241
28.02.1977 00:00;6.26
01.03.1977 18:00;5.931
02.03.1977 19:30;5.791
03.03.1977 23:59;8.14
04.03.1977 23:59;17.646
05.03.1977 00:00;17.646
06.03.1977 00:00;11.894
07.03.1977 00:00;10.665
08.03.1977 21:00;10.327
09.03.1977 23:00;10.665
10.03.1977 23:59;10.892
11.03.1977 18:30;11.121
12.03.1977 13:00;10.58
13.03.1977 00:00;10.051
14.03.1977 00:00;9.343
15.03.1977 00:00;8.834
16.03.1977 23:59;8.537
17.03.1977 23:59;10.103
18.03.1977 21:30;12.287
19.03.1977 00:00;12.261
20.03.1977 00:00;10.515
21.03.1977 08:00;10.075
22.03.1977 20:30;10.215
23.03.1977 23:30;11.875
24.03.1977 23:59;13.962
25.03.1977 22:00;14.509
26.03.1977 22:30;15.615
27.03.1977 00:00;15.415
28.03.1977 07:00;18.082
29.03.1977 00:00;16.046
30.03.1977 00:00;13.017
31.03.1977 00:00;10.835
01.04.1977 19:00;10.355
02.04.1977 23:59;12.18
03.04.1977 23:59;13.403
04.04.1977 00:30;13.46
05.04.1977 08:30;12.495
06.04.1977 18:00;12.199
07.04.1977 19:00;11.525
08.04.1977 08:30;11.904
09.04.1977 18:00;11.322
10.04.1977 17:30;10.355
11.04.1977 17:30;10.131
12.04.1977 12:00;9.551
13.04.1977 19:30;10.636
14.04.1977 19:30;11.265
15.04.1977 08:30;10.187
16.04.1977 19:30;8.795
17.04.1977 18:30;10.75
18.04.1977 20:30;12.199
19.04.1977 20:00;12.764
20.04.1977 17:30;11.729
21.04.1977 19:00;12.555
22.04.1977 19:00;13.095
23.04.1977 23:59;16.529
24.04.1977 23:59;20.195
25.04.1977 00:30;20.203
26.04.1977 23:30;23.096
27.04.1977 23:00;28.672
28.04.1977 23:59;36.956
29.04.1977 23:59;56.898
30.04.1977 18:00;81.98
01.05.1977 19:30;77.065
02.05.1977 00:00;70.391
03.05.1977 00:00;51.984
04.05.1977 18:00;93.83
05.05.1977 00:00;86.578
06.05.1977 00:00;57.75
07.05.1977 00:00;37.338
08.05.1977 00:00;29.828
09.05.1977 00:00;28.286
10.05.1977 00:00;22.335
11.05.1977 23:59;23.215
12.05.1977 23:00;42.651
13.05.1977 00:00;41.681
14.05.1977 00:00;37.893
15.05.1977 00:00;30.726
16.05.1977 23:00;29.321
17.05.1977 21:30;32.223
18.05.1977 23:59;33.122
19.05.1977 23:59;99.935
20.05.1977 15:30;137.65
21.05.1977 00:00;110.665
22.05.1977 00:00;75.919
23.05.1977 22:00;59.25
24.05.1977 22:30;63.573
25.05.1977 21:00;76.096
26.05.1977 00:00;73.753
27.05.1977 00:00;67.312
28.05.1977 00:00;53.171
29.05.1977 23:59;52.495
30.05.1977 00:30;52.754
31.05.1977 02:00;50.759
01.06.1977 00:00;38.131
02.06.1977 23:59;36.169
03.06.1977 00:30;36.316
04.06.1977 00:00;30.803
05.06.1977 00:00;26.294
06.06.1977 23:59;29.861
07.06.1977 23:00;51.207
08.06.1977 22:00;63.087
09.06.1977 23:30;82.823
10.06.1977 22:00;109.493
11.06.1977 00:00;104.427
12.06.1977 00:00;90.078
13.06.1977 22:00;103.169
14.06.1977 23:59;120.391
15.06.1977 02:00;125.505
16.06.1977 10:00;85.915
17.06.1977 00:00;58.973
18.06.1977 23:59;74.687
19.06.1977 23:59;86.142
20.06.1977 01:30;86.383
21.06.1977 23:59;73.066
22.06.1977 01:00;73.583
23.06.1977 00:00;62.195
24.06.1977 20:00;54.91
25.06.1977 19:30;75.354
26.06.1977 23:59;94.717
27.06.1977 01:30;94.959
28.06.1977 00:00;64.193
29.06.1977 00:00;51.4
30.06.1977 11:30;62.741
01.07.1977 00:00;49.039
02.07.1977 23:59;48.14
03.07.1977 23:59;65.391
04.07.1977 23:59;72.606
05.07.1977 01:00;72.777
06.07.1977 01:30;62.05
07.07.1977 03:00;55.174
08.07.1977 23:59;54.91
09.07.1977 02:30;55.042
10.07.1977 15:00;65.953
11.07.1977 02:00;61.844
12.07.1977 01:00;55.57
13.07.1977 23:59;100.575
14.07.1977 01:00;115.434
15.07.1977 11:00;93.509
16.07.1977 23:59;70.042
17.07.1977 06:30;101.755
18.07.1977 00:00;65.251
19.07.1977 00:30;60.133
20.07.1977 23:59;73.238
21.07.1977 07:00;207.793
22.07.1977 00:00;76.599
23.07.1977 00:00;44.949
24.07.1977 22:00;47.228
25.07.1977 23:59;66.47
26.07.1977 04:30;85.993
27.07.1977 00:00;56.811
28.07.1977 00:00;40.869
29.07.1977 20:00;34.316
30.07.1977 23:59;40.194
31.07.1977 23:30;253.056
01.08.1977 05:30;271.508
02.08.1977 00:00;119.963
03.08.1977 00:00;54.623
04.08.1977 00:00;39.101
05.08.1977 20:30;82.898
06.08.1977 00:00;71.46
07.08.1977 06:00;68.654
08.08.1977 00:00;53.663
09.08.1977 00:00;49.738
10.08.1977 11:00;59.712
11.08.1977 00:00;46.09
12.08.1977 00:00;33.279
13.08.1977 23:59;38.364
14.08.1977 07:00;54.828
15.08.1977 00:00;34.25
16.08.1977 00:00;27.856
17.08.1977 23:59;35.97
18.08.1977 23:59;39.485
19.08.1977 10:30;45.281
20.08.1977 00:00;42.13
21.08.1977 23:59;41.287
22.08.1977 07:00;64.402
23.08.1977 00:00;43.641
24.08.1977 00:00;32.957
25.08.1977 00:00;27.529
26.08.1977 07:30;26.534
27.08.1977 00:00;25.876
28.08.1977 23:59;30.351
29.08.1977 23:59;42.718
30.08.1977 18:30;47.544
31.08.1977 00:00;47.182
01.09.1977 00:00;40.953
02.09.1977 00:00;31.879
03.09.1977 00:00;31.226
04.09.1977 23:00;47.976
05.09.1977 00:00;46.886
06.09.1977 00:00;30.996
07.09.1977 00:00;21.428
08.09.1977 23:59;25.908
09.09.1977 10:00;104.255
10.09.1977 00:00;44.71
11.09.1977 00:00;26.393
12.09.1977 07:00;25.501
13.09.1977 22:00;24.5
14.09.1977 00:00;24.053
15.09.1977 23:59;21.439
16.09.1977 00:00;21.439
17.09.1977 00:00;17.751
18.09.1977 20:30;16.759
19.09.1977 00:00;16.545
20.09.1977 00:00;16.018
21.09.1977 00:00;14.903
22.09.1977 00:00;14.601
23.09.1977 00:00;14.145
24.09.1977 22:30;14.043
25.09.1977 00:00;14.014
26.09.1977 00:00;13.582
27.09.1977 00:00;12.734
28.09.1977 00:00;12.527
29.09.1977 00:00;11.77
30.09.1977 21:00;11.496
01.10.1977 23:59;11.468
02.10.1977 23:59;12.19
03.10.1977 08:00;12.376
04.10.1977 00:00;12.092
05.10.1977 00:00;11.196
06.10.1977 23:59;10.693
07.10.1977 23:59;10.782
08.10.1977 23:59;13.122
09.10.1977 04:00;13.796
10.10.1977 23:59;13.217
11.10.1977 02:30;14.509
12.10.1977 00:00;12.641
13.10.1977 00:00;12.146
14.10.1977 23:59;11.612
15.10.1977 00:00;11.612
16.10.1977 00:00;10.018
17.10.1977 07:30;9.798
18.10.1977 00:00;9.615
19.10.1977 15:00;9.333
20.10.1977 00:00;9.067
21.10.1977 00:00;8.838
22.10.1977 00:00;8.531
23.10.1977 23:59;8.48
24.10.1977 23:59;8.937
25.10.1977 19:30;9.333
26.10.1977 00:00;9.238
27.10.1977 00:00;8.792
28.10.1977 09:00;9.524
29.10.1977 00:00;9.22
30.10.1977 00:00;8.862
31.10.1977 23:59;8.933
01.11.1977 06:30;9.198
02.11.1977 23:59;10.241
03.11.1977 05:30;11.758
04.11.1977 00:00;10.872
05.11.1977 00:00;8.886
06.11.1977 00:00;8.583
07.11.1977 00:00;8.075
08.11.1977 00:00;7.574
09.11.1977 21:00;6.945
10.11.1977 00:00;6.851
11.11.1977 00:00;6.527
12.11.1977 00:00;6.356
13.11.1977 18:00;7.044
14.11.1977 00:00;6.651
15.11.1977 10:30;6.48
16.11.1977 00:00;6.401
17.11.1977 00:00;6.311
18.11.1977 18:00;6.12
19.11.1977 00:00;6.026
20.11.1977 00:00;4.894
21.11.1977 23:59;4.754
22.11.1977 23:30;4.992
23.11.1977 00:00;4.989
24.11.1977 23:59;5.015
25.11.1977 23:59;5.767
26.11.1977 16:30;5.861
27.11.1977 00:00;5.843
28.11.1977 23:59;6.008
29.11.1977 01:00;6.026
30.11.1977 08:30;5.978
01.12.1977 08:30;5.978
02.12.1977 17:00;5.837
03.12.1977 00:00;5.397
04.12.1977 07:00;5.284
05.12.1977 23:59;5.444
06.12.1977 16:00;5.536
07.12.1977 00:00;4.849
08.12.1977 00:00;4.812
09.12.1977 20:30;5.744
10.12.1977 00:00;5.661
11.12.1977 00:00;5.318
12.12.1977 23:59;5.408
13.12.1977 11:00;6.504
14.12.1977 00:00;6.119
15.12.1977 20:00;5.861
16.12.1977 11:30;5.582
17.12.1977 16:00;5.559
18.12.1977 00:00;5.434
19.12.1977 13:30;5.536
20.12.1977 15:00;5.353
21.12.1977 13:00;5.721
22.12.1977 15:30;5.791
23.12.1977 00:00;5.692
24.12.1977 00:00;5.308
25.12.1977 23:59;5.914
26.12.1977 18:30;6.026
27.12.1977 00:00;5.696
28.12.1977 18:00;5.744
29.12.1977 00:00;5.537
30.12.1977 18:00;5.536
31.12.1977 00:00;4.925
01.01.1978 00:00;4.76
02.01.1978 23:59;4.545
03.01.1978 01:30;4.596
04.01.1978 18:30;4.381
05.01.1978 18:00;4.232
06.01.1978 00:00;3.96
07.01.1978 23:59;3.96
08.01.1978 23:59;3.96
09.01.1978 23:59;3.96
10.01.1978 23:59;3.96
11.01.1978 23:59;3.96
12.01.1978 23:59;3.96
13.01.1978 23:59;3.96
14.01.1978 15:30;4.106
15.01.1978 00:00;3.878
16.01.1978 11:30;4.127
17.01.1978 00:00;4.043
18.01.1978 00:00;3.585
19.01.1978 23:59;3.545
20.01.1978 06:30;3.553
21.01.1978 00:00;3.176
</pre>

==Links==
* [[Teaching:TUW_-_UE_InfoVis_WS_2006/07_-_Gruppe_02|Gruppe 2]]

Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 02 - Aufgabe 3 - Prototype

2007-01-04T21:39:37Z

UE-InfoVis0607 9815963: /* class */

=Tile Map Prototype=
==authors==
[[Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 02|Gruppe 02 (Diesenreiter, Weixelbaumer, Felkel, Maier)]]

==architecture==
===description===
===images===

==code==
=== TileMap class===
<pre>
package tilemap;
//@author: simon diesenreiter (sd), stefan weixelbaumer (sw), wolfgang felkel (wf), alexander maier (am)
//@year: 2006
//@class TileMap: main class

//PREFUSE
import prefuse.data.parser.DateTimeParser;
import prefuse.data.parser.DoubleParser;
import prefuse.data.parser.DataParser;
import prefuse.data.parser.ParserFactory;
import prefuse.data.Table;
import prefuse.data.io.DataIOException;
import prefuse.data.io.DelimitedTextTableReader;
import prefuse.data.expression.Predicate;
import prefuse.data.expression.parser.ExpressionParser;
import prefuse.Visualization;
import prefuse.render.RendererFactory;
import prefuse.render.AxisRenderer;
import prefuse.render.Renderer;
import prefuse.render.ShapeRenderer;
//mouseover
import prefuse.controls.ToolTipControl;

//UTIL
import java.util.Vector;
import java.util.Calendar;
import java.util.Date;

//TEXT
import java.text.SimpleDateFormat;

//ACTIONS
import prefuse.action.layout.AxisLayout;
import prefuse.Constants;
import prefuse.visual.VisualItem;
import prefuse.action.ActionList;
import prefuse.action.RepaintAction;
import prefuse.action.assignment.DataColorAction;
import java.awt.Color;

import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.awt.geom.Rectangle2D;

//DISPLAY
import prefuse.Display;
import prefuse.controls.ZoomControl;
import prefuse.controls.PanControl;
import java.awt.GridLayout;
import java.awt.Rectangle;
import java.awt.GraphicsEnvironment;
import java.awt.BorderLayout;
import javax.swing.event.ChangeListener;
import javax.swing.event.ChangeEvent;
import javax.swing.BorderFactory;
import javax.swing.BoxLayout;
import javax.swing.JComboBox;
import javax.swing.JLabel;
import javax.swing.JToolBar;

//imports for step6: launching the Application
import javax.swing.*;

public class TileMap {

//display-constants
private static final String group = "data";
private static final String day = "Day";
private static final String week = "Week";
private static final String year = "Year";
private static final String dayLabel = "DayLabel";
private static final String monthLabel = "MonthLabel";
private static final String yearLabel = "YearLabel";

//action-constants
private static final String xAction = "xAction";
private static final String yAction = "yAction";
private static final String colorAction = "colorAction";
private static final String drawAction = "drawAction";

//size(px) of each tile
private static int tilesize = 10;
private static Visualization vis;
private static ActionList draw;

//data-source
private static final String filePath = "http://stud3.tuwien.ac.at/~e9926534/abfluss.csv";

public static void main(String[] args){

//-- 1. read the data from a file-----------------------------------------
//set up data parser(s) - one for Date & Time - one for double value ()
DateTimeParser dateTimeParser = new DateTimeParser();
DoubleParser doubleParser = new DoubleParser();

//instantiate DataParser Object & ParserFactory-Object [prefuse]
DataParser[] dP2 = new DataParser[]{dateTimeParser, doubleParser};
ParserFactory pF2 = new ParserFactory(dP2);

//set data-delimiter
DelimitedTextTableReader reader = new DelimitedTextTableReader("[;]", pF2);

Table table = new Table();

try{
table = reader.readTable(filePath);
System.out.println("InfoVisMain.main(): reading file: " + filePath);
}
catch(DataIOException ex){
System.out.println("InfoVisMain.main(): error reading file: " + ex.getMessage());
}

//add additional columns to the table
table.addColumn(day, int.class);
table.addColumn(week, int.class);
table.addColumn(year, int.class);
table.addColumn(dayLabel, String.class);
table.addColumn(monthLabel, String.class);
table.addColumn(yearLabel, String.class);

SimpleDateFormat sdfDay = new SimpleDateFormat("EEE");
SimpleDateFormat sdfMonth = new SimpleDateFormat("MMM");
SimpleDateFormat sdfYear = new SimpleDateFormat("yyyy");

//@param yearVector: a vector that stores the single years for later creating a display for each single year
Vector<Integer> yearVector = new Vector<Integer>();
int yearTracker = Integer.MIN_VALUE;

//walk through data-table
for (int i=0; i<table.getRowCount(); i++){
if(table.canGetDate(table.getColumnName(0))){
Date tmpDate = table.getDate(i, 0);
Calendar myCalendar = Calendar.getInstance();
myCalendar.setTime(tmpDate);

table.setInt(i, day, myCalendar.get(Calendar.DAY_OF_WEEK));

//introduce an extra week "0" for the case of the beginning of a year where days belong
//to the old-year's week
int tmpWeek = myCalendar.get(Calendar.WEEK_OF_YEAR);
int tmpMonth = myCalendar.get(Calendar.MONTH);
if(tmpMonth==0 & tmpWeek==53 ||tmpMonth==0 & tmpWeek==52){
table.setInt(i, week, 0); //if (month==JAN AND week==53 -> week=0)
}
else{
table.setInt(i, week, tmpWeek);
}

//get the year and also write the years to the yearVector
int tmpYear = myCalendar.get(Calendar.YEAR);
if(yearTracker != tmpYear){
yearTracker = tmpYear;
yearVector.add(new Integer(yearTracker));
}
table.setInt(i, year, tmpYear);

//get the days, months... as Strings for the Labels
table.setString(i, dayLabel, sdfDay.format(tmpDate));
table.setString(i, monthLabel, sdfMonth.format(tmpDate));
table.setString(i, yearLabel, sdfYear.format(tmpDate));
}
}

//output table data on system console [or not]
Boolean doTableOutput = true;
if(doTableOutput){
//OUTPUT: table properties
System.out.println("Table_properties: " + table.toString());
//OUTPUT: table names
for (int j=0; j<table.getColumnCount(); j++){
System.out.print(table.getColumnName(j).toString() + "\t");
if(j==0)System.out.print("\t");//this is only for nicer output because that string is so long ;)
}
//OUTPUT: table values
System.out.print("\n");
for(int i=0; i<table.getRowCount(); i++){
for (int j=0; j<table.getColumnCount(); j++){
System.out.print(table.get(i, j).toString() + "\t");
if(j==5 || j==6)System.out.print("\t"); //this is only for nicer output too
}
System.out.print("\n");
}
}

//-- 2. create a Visualisation instance ------------------------------------
vis = new Visualization();
vis.add(group, table);

//-- 3. the renderers and renderer factory ---------------------------
vis.setRendererFactory(new RendererFactory() {
//renderer for drawing simple shapes - in this case
ShapeRenderer shapeR = new ShapeRenderer(tilesize);

Renderer yaxisR = new AxisRenderer(Constants.CENTER, Constants.CENTER);

Renderer xaxisR = new AxisRenderer(Constants.CENTER, Constants.CENTER);

public Renderer getRenderer(VisualItem item) {
return item.isInGroup(TileMap.dayLabel) ? yaxisR :
item.isInGroup(TileMap.monthLabel) ? xaxisR : shapeR;
}
});

// -- 4. the processing actions --------------------------------------

//the boundingBoxes for the labels and display
int topLeftX = 0;
int topLeftY = 0;
int labelHeight = 30;
int labelWidth = 0;
Rectangle2D yearLabelB = new Rectangle2D.Double(topLeftX, topLeftY, labelWidth, labelHeight);
Rectangle2D dayLabelB = new Rectangle2D.Double(topLeftX, topLeftY+labelHeight, labelWidth, tilesize*7);
Rectangle2D monthLabelB = new Rectangle2D.Double(topLeftX+labelWidth, topLeftY, tilesize*53, labelHeight);
Rectangle2D tileMapB = new Rectangle2D.Double(topLeftX+labelWidth, topLeftY+labelHeight, tilesize*53, tilesize*7);

//set up which values over which axis to be displayed
AxisLayout x_axis = new AxisLayout(group, week, Constants.X_AXIS);
x_axis.setLayoutBounds(tileMapB);
vis.putAction(xAction, x_axis);

AxisLayout y_axis = new AxisLayout(group, day, Constants.Y_AXIS);
y_axis.setLayoutBounds(tileMapB);
vis.putAction(yAction, y_axis);

DataColorAction dataColor = new DataColorAction(group, "Abfluss", Constants.NUMERICAL,
VisualItem.FILLCOLOR);
dataColor.setBinCount(4);
vis.putAction(colorAction, dataColor);

//crate an actionList and add all actions to it. finally add the actionList to the Visualization
draw = new ActionList();
draw.add(x_axis);
draw.add(y_axis);
draw.add(dataColor);
// draw.add(dayLabels);
// draw.add(monthLabels);
draw.add(new RepaintAction());
vis.putAction(drawAction, draw);

// -- 5. the display and interactive controls -------------------------
// +
// -- 6. launch the visualization -------------------------------------

// create a new window to hold the visualization
JFrame frame = new JFrame("T I L E M A P");
// ensure application exits when window is closed
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

JPanel pane = new JPanel(new GridLayout(yearVector.size(), 1));

int borderSize = 0;
int displayHeight = (int)tileMapB.getHeight()+(int)monthLabelB.getHeight();
int displayWidth = (int)tileMapB.getWidth()+(int)dayLabelB.getWidth();

ZoomControl zoomControl = new ZoomControl();

for(int i=0; i<yearVector.size(); i++){
Predicate thatYear = (Predicate)ExpressionParser.parse(year + "==" + yearVector.get(i).toString());
Display d = new Display(vis);
d.setPredicate(thatYear);
d.setBorder(BorderFactory.createEmptyBorder(borderSize, borderSize, borderSize, borderSize));
d.setSize(displayWidth+borderSize, displayHeight+borderSize);

d.panAbs(0, -7); //this is for fine-tuning of the layout
ToolTipControl ttc = new ToolTipControl(new String[] {"Datum", "Abfluss"});
d.addControlListener(ttc);
d.addControlListener(zoomControl);
d.addControlListener(new PanControl());

JPanel innerPane = new JPanel(new BorderLayout());
JLabel label = new JLabel(yearVector.get(i).toString());
label.setHorizontalAlignment(SwingConstants.RIGHT);
label.setVerticalAlignment(SwingConstants.TOP);
label.setBackground(Color.RED);
label.setSize(20, 20);
innerPane.add(label, BorderLayout.WEST);
innerPane.add(d, BorderLayout.CENTER);
innerPane.setBackground(Color.WHITE);

pane.add(innerPane);
// pane.add(d);
}

JScrollPane scroller = new JScrollPane(pane);
JToolBar toolBar = makeToolbar();
frame.getContentPane().add(toolBar, BorderLayout.NORTH);
frame.getContentPane().add(scroller, BorderLayout.CENTER);

// get local graphics environment
GraphicsEnvironment graphicsEnvironment=GraphicsEnvironment.getLocalGraphicsEnvironment();
// get maximum window bounds
Rectangle maximumWindowBounds=graphicsEnvironment.getMaximumWindowBounds();

frame.setSize(maximumWindowBounds.width/2, maximumWindowBounds.height);

frame.setVisible(true); // show the window
vis.run(drawAction);
}

private static JToolBar makeToolbar()
{
JToolBar toolbar = new JToolBar();
toolbar.setLayout(new BoxLayout(toolbar, BoxLayout.X_AXIS));

//add a combobox for switching scales
final String[] scaleNames = {"LINEAR", "SQRT", "LOG"};
final JComboBox scaleChooser = new JComboBox(scaleNames);
// scb.setSelectedItem(sfield);
scaleChooser.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent e) {
DataColorAction dataColorA = (DataColorAction)vis.getAction(colorAction);
String chosen = scaleChooser.getSelectedItem().toString();
if(chosen.equals("LOG")){
dataColorA.setScale(Constants.LOG_SCALE);
}
else if(chosen.equals("SQRT")){
dataColorA.setScale(Constants.SQRT_SCALE);
}
else{
dataColorA.setScale(Constants.LINEAR_SCALE);
}
vis.run(drawAction);
}
});
toolbar.add(new JLabel("SCALE: "));
toolbar.add(scaleChooser);

//add a slider for setting the binsize
int slideStart = ((DataColorAction)vis.getAction(colorAction)).getBinCount();
final JSlider slider = new JSlider(2, 20, slideStart);
slider.setMajorTickSpacing(4);
slider.setMinorTickSpacing(1);
slider.setPaintTicks(true);
slider.setPaintLabels(true);
slider.setSnapToTicks(true);
slider.addChangeListener(new ChangeListener(){
public void stateChanged(ChangeEvent ce){
if(!slider.getValueIsAdjusting()){
int val = slider.getValue();
DataColorAction dataColorA = (DataColorAction)vis.getAction(colorAction);
dataColorA.setBinCount(val);
vis.run(drawAction);
}
}
});
toolbar.add(new JLabel("BINSIZE: "));
toolbar.add(slider);

toolbar.setFloatable(false);
return toolbar;
}

}

==example data==

===example data (InfoVisMain.java)===
Copy that data and store it as ''.csv''. For using it you have to change the path to the file in the sourcecode.
<pre>
Datum;Abfluss
01.01.1977 11:00;5.721
02.01.1977 10:30;5.697
03.01.1977 10:00;5.767
04.01.1977 17:00;5.861
05.01.1977 16:30;5.697
06.01.1977 11:30;5.791
07.01.1977 18:30;5.697
08.01.1977 12:30;5.908
09.01.1977 12:00;5.861
10.01.1977 12:00;5.861
11.01.1977 18:00;5.837
12.01.1977 11:30;6.026
13.01.1977 19:30;5.955
14.01.1977 11:00;5.978
15.01.1977 20:30;5.837
16.01.1977 12:00;6.895
17.01.1977 11:30;6.073
18.01.1977 12:30;5.767
19.01.1977 19:30;6.263
20.01.1977 19:00;5.884
21.01.1977 09:00;6.359
22.01.1977 11:30;6.699
23.01.1977 14:30;5.837
24.01.1977 11:30;5.628
25.01.1977 19:30;5.791
26.01.1977 11:30;5.744
27.01.1977 09:30;5.651
28.01.1977 19:30;5.651
29.01.1977 20:00;6.192
30.01.1977 11:30;5.536
31.01.1977 20:30;5.767
01.02.1977 19:30;5.651
02.02.1977 11:30;6.073
03.02.1977 10:30;6.002
04.02.1977 09:30;6.994
05.02.1977 20:00;6.723
06.02.1977 11:30;7.168
07.02.1977 20:30;6.528
08.02.1977 18:00;6.192
09.02.1977 11:30;7.776
10.02.1977 19:30;7.118
11.02.1977 19:30;7.827
12.02.1977 09:30;7.47
13.02.1977 09:30;7.168
14.02.1977 20:00;6.383
15.02.1977 20:00;6.12
16.02.1977 20:00;6.263
17.02.1977 20:00;6.168
18.02.1977 20:00;5.861
19.02.1977 19:30;5.978
20.02.1977 19:30;6.383
21.02.1977 19:30;9.524
22.02.1977 12:30;7.956
23.02.1977 20:00;7.648
24.02.1977 23:59;8.257
25.02.1977 15:30;10.271
26.02.1977 00:00;9.21
27.02.1977 05:00;8.241
28.02.1977 00:00;6.26
01.03.1977 18:00;5.931
02.03.1977 19:30;5.791
03.03.1977 23:59;8.14
04.03.1977 23:59;17.646
05.03.1977 00:00;17.646
06.03.1977 00:00;11.894
07.03.1977 00:00;10.665
08.03.1977 21:00;10.327
09.03.1977 23:00;10.665
10.03.1977 23:59;10.892
11.03.1977 18:30;11.121
12.03.1977 13:00;10.58
13.03.1977 00:00;10.051
14.03.1977 00:00;9.343
15.03.1977 00:00;8.834
16.03.1977 23:59;8.537
17.03.1977 23:59;10.103
18.03.1977 21:30;12.287
19.03.1977 00:00;12.261
20.03.1977 00:00;10.515
21.03.1977 08:00;10.075
22.03.1977 20:30;10.215
23.03.1977 23:30;11.875
24.03.1977 23:59;13.962
25.03.1977 22:00;14.509
26.03.1977 22:30;15.615
27.03.1977 00:00;15.415
28.03.1977 07:00;18.082
29.03.1977 00:00;16.046
30.03.1977 00:00;13.017
31.03.1977 00:00;10.835
01.04.1977 19:00;10.355
02.04.1977 23:59;12.18
03.04.1977 23:59;13.403
04.04.1977 00:30;13.46
05.04.1977 08:30;12.495
06.04.1977 18:00;12.199
07.04.1977 19:00;11.525
08.04.1977 08:30;11.904
09.04.1977 18:00;11.322
10.04.1977 17:30;10.355
11.04.1977 17:30;10.131
12.04.1977 12:00;9.551
13.04.1977 19:30;10.636
14.04.1977 19:30;11.265
15.04.1977 08:30;10.187
16.04.1977 19:30;8.795
17.04.1977 18:30;10.75
18.04.1977 20:30;12.199
19.04.1977 20:00;12.764
20.04.1977 17:30;11.729
21.04.1977 19:00;12.555
22.04.1977 19:00;13.095
23.04.1977 23:59;16.529
24.04.1977 23:59;20.195
25.04.1977 00:30;20.203
26.04.1977 23:30;23.096
27.04.1977 23:00;28.672
28.04.1977 23:59;36.956
29.04.1977 23:59;56.898
30.04.1977 18:00;81.98
01.05.1977 19:30;77.065
02.05.1977 00:00;70.391
03.05.1977 00:00;51.984
04.05.1977 18:00;93.83
05.05.1977 00:00;86.578
06.05.1977 00:00;57.75
07.05.1977 00:00;37.338
08.05.1977 00:00;29.828
09.05.1977 00:00;28.286
10.05.1977 00:00;22.335
11.05.1977 23:59;23.215
12.05.1977 23:00;42.651
13.05.1977 00:00;41.681
14.05.1977 00:00;37.893
15.05.1977 00:00;30.726
16.05.1977 23:00;29.321
17.05.1977 21:30;32.223
18.05.1977 23:59;33.122
19.05.1977 23:59;99.935
20.05.1977 15:30;137.65
21.05.1977 00:00;110.665
22.05.1977 00:00;75.919
23.05.1977 22:00;59.25
24.05.1977 22:30;63.573
25.05.1977 21:00;76.096
26.05.1977 00:00;73.753
27.05.1977 00:00;67.312
28.05.1977 00:00;53.171
29.05.1977 23:59;52.495
30.05.1977 00:30;52.754
31.05.1977 02:00;50.759
01.06.1977 00:00;38.131
02.06.1977 23:59;36.169
03.06.1977 00:30;36.316
04.06.1977 00:00;30.803
05.06.1977 00:00;26.294
06.06.1977 23:59;29.861
07.06.1977 23:00;51.207
08.06.1977 22:00;63.087
09.06.1977 23:30;82.823
10.06.1977 22:00;109.493
11.06.1977 00:00;104.427
12.06.1977 00:00;90.078
13.06.1977 22:00;103.169
14.06.1977 23:59;120.391
15.06.1977 02:00;125.505
16.06.1977 10:00;85.915
17.06.1977 00:00;58.973
18.06.1977 23:59;74.687
19.06.1977 23:59;86.142
20.06.1977 01:30;86.383
21.06.1977 23:59;73.066
22.06.1977 01:00;73.583
23.06.1977 00:00;62.195
24.06.1977 20:00;54.91
25.06.1977 19:30;75.354
26.06.1977 23:59;94.717
27.06.1977 01:30;94.959
28.06.1977 00:00;64.193
29.06.1977 00:00;51.4
30.06.1977 11:30;62.741
01.07.1977 00:00;49.039
02.07.1977 23:59;48.14
03.07.1977 23:59;65.391
04.07.1977 23:59;72.606
05.07.1977 01:00;72.777
06.07.1977 01:30;62.05
07.07.1977 03:00;55.174
08.07.1977 23:59;54.91
09.07.1977 02:30;55.042
10.07.1977 15:00;65.953
11.07.1977 02:00;61.844
12.07.1977 01:00;55.57
13.07.1977 23:59;100.575
14.07.1977 01:00;115.434
15.07.1977 11:00;93.509
16.07.1977 23:59;70.042
17.07.1977 06:30;101.755
18.07.1977 00:00;65.251
19.07.1977 00:30;60.133
20.07.1977 23:59;73.238
21.07.1977 07:00;207.793
22.07.1977 00:00;76.599
23.07.1977 00:00;44.949
24.07.1977 22:00;47.228
25.07.1977 23:59;66.47
26.07.1977 04:30;85.993
27.07.1977 00:00;56.811
28.07.1977 00:00;40.869
29.07.1977 20:00;34.316
30.07.1977 23:59;40.194
31.07.1977 23:30;253.056
01.08.1977 05:30;271.508
02.08.1977 00:00;119.963
03.08.1977 00:00;54.623
04.08.1977 00:00;39.101
05.08.1977 20:30;82.898
06.08.1977 00:00;71.46
07.08.1977 06:00;68.654
08.08.1977 00:00;53.663
09.08.1977 00:00;49.738
10.08.1977 11:00;59.712
11.08.1977 00:00;46.09
12.08.1977 00:00;33.279
13.08.1977 23:59;38.364
14.08.1977 07:00;54.828
15.08.1977 00:00;34.25
16.08.1977 00:00;27.856
17.08.1977 23:59;35.97
18.08.1977 23:59;39.485
19.08.1977 10:30;45.281
20.08.1977 00:00;42.13
21.08.1977 23:59;41.287
22.08.1977 07:00;64.402
23.08.1977 00:00;43.641
24.08.1977 00:00;32.957
25.08.1977 00:00;27.529
26.08.1977 07:30;26.534
27.08.1977 00:00;25.876
28.08.1977 23:59;30.351
29.08.1977 23:59;42.718
30.08.1977 18:30;47.544
31.08.1977 00:00;47.182
01.09.1977 00:00;40.953
02.09.1977 00:00;31.879
03.09.1977 00:00;31.226
04.09.1977 23:00;47.976
05.09.1977 00:00;46.886
06.09.1977 00:00;30.996
07.09.1977 00:00;21.428
08.09.1977 23:59;25.908
09.09.1977 10:00;104.255
10.09.1977 00:00;44.71
11.09.1977 00:00;26.393
12.09.1977 07:00;25.501
13.09.1977 22:00;24.5
14.09.1977 00:00;24.053
15.09.1977 23:59;21.439
16.09.1977 00:00;21.439
17.09.1977 00:00;17.751
18.09.1977 20:30;16.759
19.09.1977 00:00;16.545
20.09.1977 00:00;16.018
21.09.1977 00:00;14.903
22.09.1977 00:00;14.601
23.09.1977 00:00;14.145
24.09.1977 22:30;14.043
25.09.1977 00:00;14.014
26.09.1977 00:00;13.582
27.09.1977 00:00;12.734
28.09.1977 00:00;12.527
29.09.1977 00:00;11.77
30.09.1977 21:00;11.496
01.10.1977 23:59;11.468
02.10.1977 23:59;12.19
03.10.1977 08:00;12.376
04.10.1977 00:00;12.092
05.10.1977 00:00;11.196
06.10.1977 23:59;10.693
07.10.1977 23:59;10.782
08.10.1977 23:59;13.122
09.10.1977 04:00;13.796
10.10.1977 23:59;13.217
11.10.1977 02:30;14.509
12.10.1977 00:00;12.641
13.10.1977 00:00;12.146
14.10.1977 23:59;11.612
15.10.1977 00:00;11.612
16.10.1977 00:00;10.018
17.10.1977 07:30;9.798
18.10.1977 00:00;9.615
19.10.1977 15:00;9.333
20.10.1977 00:00;9.067
21.10.1977 00:00;8.838
22.10.1977 00:00;8.531
23.10.1977 23:59;8.48
24.10.1977 23:59;8.937
25.10.1977 19:30;9.333
26.10.1977 00:00;9.238
27.10.1977 00:00;8.792
28.10.1977 09:00;9.524
29.10.1977 00:00;9.22
30.10.1977 00:00;8.862
31.10.1977 23:59;8.933
01.11.1977 06:30;9.198
02.11.1977 23:59;10.241
03.11.1977 05:30;11.758
04.11.1977 00:00;10.872
05.11.1977 00:00;8.886
06.11.1977 00:00;8.583
07.11.1977 00:00;8.075
08.11.1977 00:00;7.574
09.11.1977 21:00;6.945
10.11.1977 00:00;6.851
11.11.1977 00:00;6.527
12.11.1977 00:00;6.356
13.11.1977 18:00;7.044
14.11.1977 00:00;6.651
15.11.1977 10:30;6.48
16.11.1977 00:00;6.401
17.11.1977 00:00;6.311
18.11.1977 18:00;6.12
19.11.1977 00:00;6.026
20.11.1977 00:00;4.894
21.11.1977 23:59;4.754
22.11.1977 23:30;4.992
23.11.1977 00:00;4.989
24.11.1977 23:59;5.015
25.11.1977 23:59;5.767
26.11.1977 16:30;5.861
27.11.1977 00:00;5.843
28.11.1977 23:59;6.008
29.11.1977 01:00;6.026
30.11.1977 08:30;5.978
01.12.1977 08:30;5.978
02.12.1977 17:00;5.837
03.12.1977 00:00;5.397
04.12.1977 07:00;5.284
05.12.1977 23:59;5.444
06.12.1977 16:00;5.536
07.12.1977 00:00;4.849
08.12.1977 00:00;4.812
09.12.1977 20:30;5.744
10.12.1977 00:00;5.661
11.12.1977 00:00;5.318
12.12.1977 23:59;5.408
13.12.1977 11:00;6.504
14.12.1977 00:00;6.119
15.12.1977 20:00;5.861
16.12.1977 11:30;5.582
17.12.1977 16:00;5.559
18.12.1977 00:00;5.434
19.12.1977 13:30;5.536
20.12.1977 15:00;5.353
21.12.1977 13:00;5.721
22.12.1977 15:30;5.791
23.12.1977 00:00;5.692
24.12.1977 00:00;5.308
25.12.1977 23:59;5.914
26.12.1977 18:30;6.026
27.12.1977 00:00;5.696
28.12.1977 18:00;5.744
29.12.1977 00:00;5.537
30.12.1977 18:00;5.536
31.12.1977 00:00;4.925
01.01.1978 00:00;4.76
02.01.1978 23:59;4.545
03.01.1978 01:30;4.596
04.01.1978 18:30;4.381
05.01.1978 18:00;4.232
06.01.1978 00:00;3.96
07.01.1978 23:59;3.96
08.01.1978 23:59;3.96
09.01.1978 23:59;3.96
10.01.1978 23:59;3.96
11.01.1978 23:59;3.96
12.01.1978 23:59;3.96
13.01.1978 23:59;3.96
14.01.1978 15:30;4.106
15.01.1978 00:00;3.878
16.01.1978 11:30;4.127
17.01.1978 00:00;4.043
18.01.1978 00:00;3.585
19.01.1978 23:59;3.545
20.01.1978 06:30;3.553
21.01.1978 00:00;3.176
</pre>

==Links==
* [[Teaching:TUW_-_UE_InfoVis_WS_2006/07_-_Gruppe_02|Gruppe 2]]

Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 02 - Aufgabe 3 - Prototype

2007-01-04T20:44:17Z

UE-InfoVis0607 9815963:

=Tile Map Prototype=
==authors==
[[Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 02|Gruppe 02 (Diesenreiter, Weixelbaumer, Felkel, Maier)]]

==architecture==
===description===
===images===

==code==
===class===
<pre>
//@author: simon diesenreiter (sd)
//@year: 2006
//@class TileMap: main class

import java.util.Date;
import java.text.SimpleDateFormat;
import java.text.DateFormat;
import prefuse.data.parser.DateTimeParser;
import prefuse.data.parser.DateParser;
import prefuse.data.parser.TimeParser;
import prefuse.data.parser.DoubleParser;
import prefuse.data.parser.DataParser;
import prefuse.data.parser.ParserFactory;
import prefuse.data.io.CSVTableReader;
import prefuse.data.io.TableReadListener;
import prefuse.data.Table;
import prefuse.data.io.DataIOException;
import prefuse.data.io.DelimitedTextTableReader;
import prefuse.data.Schema;

import prefuse.Visualization;

import prefuse.render.DefaultRendererFactory;
import prefuse.render.RendererFactory;
import prefuse.render.AxisRenderer;
import prefuse.render.Renderer;
import prefuse.render.ShapeRenderer;
import prefuse.render.LabelRenderer;

import java.io.FileInputStream;
import java.io.File;
import java.io.FileNotFoundException;

import java.util.Calendar;

//imports for step4: actions
import prefuse.action.layout.AxisLayout;
import prefuse.Constants;
import prefuse.visual.expression.VisiblePredicate;
import prefuse.action.assignment.ColorAction;
import prefuse.visual.VisualItem;
import prefuse.util.ColorLib;
import prefuse.action.assignment.DataShapeAction;
import prefuse.action.ActionList;
import prefuse.action.RepaintAction;
import prefuse.action.assignment.DataColorAction;
import java.awt.Color;
import prefuse.action.layout.AxisLabelLayout;
import java.awt.geom.Rectangle2D;
import java.awt.geom.Rectangle2D.Double;

//imports for step5: display
import prefuse.Display;
import prefuse.controls.ZoomControl;
import prefuse.controls.PanControl;
import javax.swing.BorderFactory;
import prefuse.controls.ToolTipControl;

//imports for step6: launching the Application
import javax.swing.JFrame;

//misc imports
import prefuse.visual.VisualTable;
import prefuse.data.expression.Predicate;
import prefuse.data.expression.parser.ExpressionParser;
import prefuse.visual.expression.InGroupPredicate;
import prefuse.controls.DragControl;

public class TileMap {

//TABLE-STRINGS
private static final String group = "data";
private static final String abfluss = "Abfluss";
private static final String day = "Day";
private static final String week = "Week";
private static final String month = "Month";
private static final String year = "Year";
private static final String dayLabel = "DayLabel";
private static final String weekLabel = "WeekLabel";
private static final String monthLabel = "MonthLabel";
private static final String yearLabel = "YearLabel";

//ACTION-STRINGS
private static final String xAction = "xAction";
private static final String yAction = "yAction";
private static final String colorAction = "colorAction";
private static final String dayLAction = "dayLAction";
private static final String monthLAction = "monthLAction";
private static final String yearLAction = "yearLAction";
private static final String drawAction = "drawAction";

private static final int tilesize = 10; //tilesize in pixel
private static final int binsize = 5; //number of bins for color-coding
private static boolean logFlag = false; // a flag for setting linear or logarithmic scale

// private static final String absoluteFilePath = "D:\\infovis_eclipse_workspace\\resources\\abfluss_mittersill_csv_1jahr.csv";
private static final String fileURL = "http://stud3.tuwien.ac.at/~e9926534/abfluss_mittersill_csv_1jahr.csv";

public static void main(String[] args){

//1: read the data from a file*******************************************************************
//set up the Parser:

DateTimeParser dateTimeParser = new DateTimeParser();
DoubleParser doubleParser = new DoubleParser();

DataParser[] dP2 = new DataParser[]{dateTimeParser, doubleParser};
ParserFactory pF2 = new ParserFactory(dP2);

// File file = new File(absoluteFilePath);

DelimitedTextTableReader reader = new DelimitedTextTableReader("[;]", pF2);

Table table = new Table();

try{
// table = reader.readTable(absoluteFilePath);
table = reader.readTable(fileURL);
System.out.println("InfoVisMain.main(): reading file: " + fileURL);
}
catch(DataIOException ex){
System.out.println("InfoVisMain.main(): error reading the file: " + ex.getMessage());
}

//add additional columns to the table
table.addColumn(day, int.class);
table.addColumn(week, int.class);
table.addColumn(year, int.class);
table.addColumn(dayLabel, String.class);
table.addColumn(monthLabel, String.class);
table.addColumn(yearLabel, String.class);

SimpleDateFormat sdfDay = new SimpleDateFormat("EEE");//day of week
SimpleDateFormat sdfMonth = new SimpleDateFormat("MMM");
SimpleDateFormat sdfYear = new SimpleDateFormat("yyyy");

for (int i=0; i<table.getRowCount(); i++){
if(table.canGetDate(table.getColumnName(0))){
Date tmpDate = table.getDate(i, 0);
Calendar myCalendar = Calendar.getInstance();
myCalendar.setTime(tmpDate);
table.setInt(i, day, myCalendar.get(Calendar.DAY_OF_WEEK));

//introduce an extra week "0" for the case of the beginning of a year where days belong
//to the old-year's week
int tmpWeek = myCalendar.get(Calendar.WEEK_OF_YEAR);
int tmpMonth = myCalendar.get(Calendar.MONTH);
if(tmpMonth==0 & tmpWeek==53){
table.setInt(i, week, 0); //if (month==JAN AND week==53 -> week=0)
}
else{
table.setInt(i, week, tmpWeek);
}

table.setInt(i, year, myCalendar.get(Calendar.YEAR));
table.setString(i, dayLabel, sdfDay.format(tmpDate));
table.setString(i, monthLabel, sdfMonth.format(tmpDate));
table.setString(i, yearLabel, sdfYear.format(tmpDate));
}
}

//remove year 1978:
Predicate inYear1977 = (Predicate)ExpressionParser.parse(year + "==1977");
Predicate inYear1978 = (Predicate)ExpressionParser.parse(year + "==1978");
// table.remove(inYear1978);

//OUTPUT: table properties
System.out.println("Table_properties: " + table.toString());
//OUTPUT: table names
for (int j=0; j<table.getColumnCount(); j++){
System.out.print(table.getColumnName(j).toString() + "\t");
if(j==0)System.out.print("\t");//this is only for nicer output because that string is so long ;)
}
//OUTPUT: table values
System.out.print("\n");
for(int i=0; i<table.getRowCount(); i++){
for (int j=0; j<table.getColumnCount(); j++){
System.out.print(table.get(i, j).toString() + "\t");
if(j==5 || j==6)System.out.print("\t"); //this is only for nicer output too
}
System.out.print("\n");
}

//2: create a Visualisation... *********************************************************************
Visualization vis = new Visualization();
vis.add(group, table);

//-- 3. the renderers and renderer factory ---------------------------

vis.setRendererFactory(new RendererFactory() {
ShapeRenderer shapeR = new ShapeRenderer(tilesize);

Renderer yaxisR = new AxisRenderer(Constants.CENTER, Constants.CENTER);

Renderer xaxisR = new AxisRenderer(Constants.CENTER, Constants.CENTER);

public Renderer getRenderer(VisualItem item) {
return item.isInGroup(TileMap.dayLabel) ? yaxisR :
item.isInGroup(TileMap.monthLabel) ? xaxisR : shapeR;
}
});

// -- 4. the processing actions --------------------------------------

// InGroupPredicate in1977 = new InGroupPredicate("1977");

//the boundingBoxes for the labels and display
Rectangle2D yearLabelB = new Rectangle2D.Double(0, 0, 50, 50);
Rectangle2D dayLabelB = new Rectangle2D.Double(0, 50, 50, tilesize*7);
Rectangle2D monthLabelB = new Rectangle2D.Double(50, 0, tilesize*53, 50);
Rectangle2D tileMapB = new Rectangle2D.Double(50, 50, tilesize*53, tilesize*7);

//set up which values over which axis to be displayed
AxisLayout x_axis = new AxisLayout(group, week, Constants.X_AXIS);
x_axis.setLayoutBounds(tileMapB);
vis.putAction(xAction, x_axis);

// AxisLayout y_axis = new AxisLayout(group, day, Constants.Y_AXIS, VisiblePredicate.TRUE);
// y_axis.setLayoutBounds(tileMapB);
// vis.putAction(yAction, y_axis);
AxisLayout y_axis = new AxisLayout(group, day, Constants.Y_AXIS);
y_axis.setLayoutBounds(tileMapB);
vis.putAction(yAction, y_axis);

//set up the axis-labels and axis-representation
AxisLabelLayout dayLabels = new AxisLabelLayout(dayLabel, y_axis);
dayLabels.setLayoutBounds(dayLabelB);
dayLabels.setSpacing(10);
vis.putAction(dayLAction, dayLabels);

AxisLabelLayout monthLabels = new AxisLabelLayout(TileMap.monthLabel, x_axis);
monthLabels.setLayoutBounds(monthLabelB);
monthLabels.setSpacing(15);
vis.putAction(monthLAction, monthLabels);

//set up the colors to be used for the tilemap
int[] palette = ColorLib.getInterpolatedPalette(binsize,
ColorLib.color(Color.BLUE), ColorLib.color(Color.RED));

DataColorAction dataColor = new DataColorAction(group, "Abfluss", Constants.NUMERICAL,
VisualItem.FILLCOLOR, palette);

if(logFlag)dataColor.setScale(Constants.LOG_SCALE);
vis.putAction(colorAction, dataColor);

//crate an actionList and add all actions to it. finally add the actionList to the Visualization
ActionList draw = new ActionList();
draw.add(x_axis);
draw.add(y_axis);
draw.add(dataColor);
draw.add(dayLabels);
draw.add(monthLabels);
draw.add(new RepaintAction());
vis.putAction(drawAction, draw);

// -- 5. the display and interactive controls -------------------------

Display d = new Display(vis);
d.setBorder(BorderFactory.createEmptyBorder(20,20,20,20));
d.setSize((int)tileMapB.getWidth()+(int)monthLabelB.getWidth(), (int)tileMapB.getHeight()+(int)dayLabelB.getHeight());
d.setHighQuality(true);
d.setPredicate(inYear1977);
ToolTipControl ttc = new ToolTipControl(new String[] {"Datum", "Abfluss"});
d.addControlListener(ttc);
d.addControlListener(new ZoomControl());
d.addControlListener(new PanControl());
d.addControlListener(new DragControl());

Display d2 = new Display(vis);
d2.setBorder(BorderFactory.createEmptyBorder(20,20,20,20));
d2.setLocation(0, 200);
d2.setSize((int)tileMapB.getWidth()+(int)monthLabelB.getWidth(), (int)tileMapB.getHeight()+(int)dayLabelB.getHeight());

System.out.println("d2-location: x=" + d2.getLocation().x + " y=" + d2.getLocation().y);
d2.setHighQuality(true);
// d2.setPredicate(inYear1978);
ToolTipControl ttc2 = new ToolTipControl(new String[] {"Datum", "Abfluss"});
d2.addControlListener(ttc2);
d2.addControlListener(new ZoomControl());
d2.addControlListener(new PanControl());
d2.addControlListener(new DragControl());

d.validate();
d2.validate();

// -- 6. launch the visualization -------------------------------------

// create a new window to hold the visualization
JFrame frame = new JFrame("T I L E M A P");
// ensure application exits when window is closed
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setSize(500, 500);
frame.add(d);
frame.add(d2);
frame.validate();
frame.pack(); // layout components in window
frame.setVisible(true); // show the window
vis.run(drawAction);

}

}

</pre>

==example data==

===example data (InfoVisMain.java)===
Copy that data and store it as ''.csv''. For using it you have to change the path to the file in the sourcecode.
<pre>
Datum;Abfluss
01.01.1977 11:00;5.721
02.01.1977 10:30;5.697
03.01.1977 10:00;5.767
04.01.1977 17:00;5.861
05.01.1977 16:30;5.697
06.01.1977 11:30;5.791
07.01.1977 18:30;5.697
08.01.1977 12:30;5.908
09.01.1977 12:00;5.861
10.01.1977 12:00;5.861
11.01.1977 18:00;5.837
12.01.1977 11:30;6.026
13.01.1977 19:30;5.955
14.01.1977 11:00;5.978
15.01.1977 20:30;5.837
16.01.1977 12:00;6.895
17.01.1977 11:30;6.073
18.01.1977 12:30;5.767
19.01.1977 19:30;6.263
20.01.1977 19:00;5.884
21.01.1977 09:00;6.359
22.01.1977 11:30;6.699
23.01.1977 14:30;5.837
24.01.1977 11:30;5.628
25.01.1977 19:30;5.791
26.01.1977 11:30;5.744
27.01.1977 09:30;5.651
28.01.1977 19:30;5.651
29.01.1977 20:00;6.192
30.01.1977 11:30;5.536
31.01.1977 20:30;5.767
01.02.1977 19:30;5.651
02.02.1977 11:30;6.073
03.02.1977 10:30;6.002
04.02.1977 09:30;6.994
05.02.1977 20:00;6.723
06.02.1977 11:30;7.168
07.02.1977 20:30;6.528
08.02.1977 18:00;6.192
09.02.1977 11:30;7.776
10.02.1977 19:30;7.118
11.02.1977 19:30;7.827
12.02.1977 09:30;7.47
13.02.1977 09:30;7.168
14.02.1977 20:00;6.383
15.02.1977 20:00;6.12
16.02.1977 20:00;6.263
17.02.1977 20:00;6.168
18.02.1977 20:00;5.861
19.02.1977 19:30;5.978
20.02.1977 19:30;6.383
21.02.1977 19:30;9.524
22.02.1977 12:30;7.956
23.02.1977 20:00;7.648
24.02.1977 23:59;8.257
25.02.1977 15:30;10.271
26.02.1977 00:00;9.21
27.02.1977 05:00;8.241
28.02.1977 00:00;6.26
01.03.1977 18:00;5.931
02.03.1977 19:30;5.791
03.03.1977 23:59;8.14
04.03.1977 23:59;17.646
05.03.1977 00:00;17.646
06.03.1977 00:00;11.894
07.03.1977 00:00;10.665
08.03.1977 21:00;10.327
09.03.1977 23:00;10.665
10.03.1977 23:59;10.892
11.03.1977 18:30;11.121
12.03.1977 13:00;10.58
13.03.1977 00:00;10.051
14.03.1977 00:00;9.343
15.03.1977 00:00;8.834
16.03.1977 23:59;8.537
17.03.1977 23:59;10.103
18.03.1977 21:30;12.287
19.03.1977 00:00;12.261
20.03.1977 00:00;10.515
21.03.1977 08:00;10.075
22.03.1977 20:30;10.215
23.03.1977 23:30;11.875
24.03.1977 23:59;13.962
25.03.1977 22:00;14.509
26.03.1977 22:30;15.615
27.03.1977 00:00;15.415
28.03.1977 07:00;18.082
29.03.1977 00:00;16.046
30.03.1977 00:00;13.017
31.03.1977 00:00;10.835
01.04.1977 19:00;10.355
02.04.1977 23:59;12.18
03.04.1977 23:59;13.403
04.04.1977 00:30;13.46
05.04.1977 08:30;12.495
06.04.1977 18:00;12.199
07.04.1977 19:00;11.525
08.04.1977 08:30;11.904
09.04.1977 18:00;11.322
10.04.1977 17:30;10.355
11.04.1977 17:30;10.131
12.04.1977 12:00;9.551
13.04.1977 19:30;10.636
14.04.1977 19:30;11.265
15.04.1977 08:30;10.187
16.04.1977 19:30;8.795
17.04.1977 18:30;10.75
18.04.1977 20:30;12.199
19.04.1977 20:00;12.764
20.04.1977 17:30;11.729
21.04.1977 19:00;12.555
22.04.1977 19:00;13.095
23.04.1977 23:59;16.529
24.04.1977 23:59;20.195
25.04.1977 00:30;20.203
26.04.1977 23:30;23.096
27.04.1977 23:00;28.672
28.04.1977 23:59;36.956
29.04.1977 23:59;56.898
30.04.1977 18:00;81.98
01.05.1977 19:30;77.065
02.05.1977 00:00;70.391
03.05.1977 00:00;51.984
04.05.1977 18:00;93.83
05.05.1977 00:00;86.578
06.05.1977 00:00;57.75
07.05.1977 00:00;37.338
08.05.1977 00:00;29.828
09.05.1977 00:00;28.286
10.05.1977 00:00;22.335
11.05.1977 23:59;23.215
12.05.1977 23:00;42.651
13.05.1977 00:00;41.681
14.05.1977 00:00;37.893
15.05.1977 00:00;30.726
16.05.1977 23:00;29.321
17.05.1977 21:30;32.223
18.05.1977 23:59;33.122
19.05.1977 23:59;99.935
20.05.1977 15:30;137.65
21.05.1977 00:00;110.665
22.05.1977 00:00;75.919
23.05.1977 22:00;59.25
24.05.1977 22:30;63.573
25.05.1977 21:00;76.096
26.05.1977 00:00;73.753
27.05.1977 00:00;67.312
28.05.1977 00:00;53.171
29.05.1977 23:59;52.495
30.05.1977 00:30;52.754
31.05.1977 02:00;50.759
01.06.1977 00:00;38.131
02.06.1977 23:59;36.169
03.06.1977 00:30;36.316
04.06.1977 00:00;30.803
05.06.1977 00:00;26.294
06.06.1977 23:59;29.861
07.06.1977 23:00;51.207
08.06.1977 22:00;63.087
09.06.1977 23:30;82.823
10.06.1977 22:00;109.493
11.06.1977 00:00;104.427
12.06.1977 00:00;90.078
13.06.1977 22:00;103.169
14.06.1977 23:59;120.391
15.06.1977 02:00;125.505
16.06.1977 10:00;85.915
17.06.1977 00:00;58.973
18.06.1977 23:59;74.687
19.06.1977 23:59;86.142
20.06.1977 01:30;86.383
21.06.1977 23:59;73.066
22.06.1977 01:00;73.583
23.06.1977 00:00;62.195
24.06.1977 20:00;54.91
25.06.1977 19:30;75.354
26.06.1977 23:59;94.717
27.06.1977 01:30;94.959
28.06.1977 00:00;64.193
29.06.1977 00:00;51.4
30.06.1977 11:30;62.741
01.07.1977 00:00;49.039
02.07.1977 23:59;48.14
03.07.1977 23:59;65.391
04.07.1977 23:59;72.606
05.07.1977 01:00;72.777
06.07.1977 01:30;62.05
07.07.1977 03:00;55.174
08.07.1977 23:59;54.91
09.07.1977 02:30;55.042
10.07.1977 15:00;65.953
11.07.1977 02:00;61.844
12.07.1977 01:00;55.57
13.07.1977 23:59;100.575
14.07.1977 01:00;115.434
15.07.1977 11:00;93.509
16.07.1977 23:59;70.042
17.07.1977 06:30;101.755
18.07.1977 00:00;65.251
19.07.1977 00:30;60.133
20.07.1977 23:59;73.238
21.07.1977 07:00;207.793
22.07.1977 00:00;76.599
23.07.1977 00:00;44.949
24.07.1977 22:00;47.228
25.07.1977 23:59;66.47
26.07.1977 04:30;85.993
27.07.1977 00:00;56.811
28.07.1977 00:00;40.869
29.07.1977 20:00;34.316
30.07.1977 23:59;40.194
31.07.1977 23:30;253.056
01.08.1977 05:30;271.508
02.08.1977 00:00;119.963
03.08.1977 00:00;54.623
04.08.1977 00:00;39.101
05.08.1977 20:30;82.898
06.08.1977 00:00;71.46
07.08.1977 06:00;68.654
08.08.1977 00:00;53.663
09.08.1977 00:00;49.738
10.08.1977 11:00;59.712
11.08.1977 00:00;46.09
12.08.1977 00:00;33.279
13.08.1977 23:59;38.364
14.08.1977 07:00;54.828
15.08.1977 00:00;34.25
16.08.1977 00:00;27.856
17.08.1977 23:59;35.97
18.08.1977 23:59;39.485
19.08.1977 10:30;45.281
20.08.1977 00:00;42.13
21.08.1977 23:59;41.287
22.08.1977 07:00;64.402
23.08.1977 00:00;43.641
24.08.1977 00:00;32.957
25.08.1977 00:00;27.529
26.08.1977 07:30;26.534
27.08.1977 00:00;25.876
28.08.1977 23:59;30.351
29.08.1977 23:59;42.718
30.08.1977 18:30;47.544
31.08.1977 00:00;47.182
01.09.1977 00:00;40.953
02.09.1977 00:00;31.879
03.09.1977 00:00;31.226
04.09.1977 23:00;47.976
05.09.1977 00:00;46.886
06.09.1977 00:00;30.996
07.09.1977 00:00;21.428
08.09.1977 23:59;25.908
09.09.1977 10:00;104.255
10.09.1977 00:00;44.71
11.09.1977 00:00;26.393
12.09.1977 07:00;25.501
13.09.1977 22:00;24.5
14.09.1977 00:00;24.053
15.09.1977 23:59;21.439
16.09.1977 00:00;21.439
17.09.1977 00:00;17.751
18.09.1977 20:30;16.759
19.09.1977 00:00;16.545
20.09.1977 00:00;16.018
21.09.1977 00:00;14.903
22.09.1977 00:00;14.601
23.09.1977 00:00;14.145
24.09.1977 22:30;14.043
25.09.1977 00:00;14.014
26.09.1977 00:00;13.582
27.09.1977 00:00;12.734
28.09.1977 00:00;12.527
29.09.1977 00:00;11.77
30.09.1977 21:00;11.496
01.10.1977 23:59;11.468
02.10.1977 23:59;12.19
03.10.1977 08:00;12.376
04.10.1977 00:00;12.092
05.10.1977 00:00;11.196
06.10.1977 23:59;10.693
07.10.1977 23:59;10.782
08.10.1977 23:59;13.122
09.10.1977 04:00;13.796
10.10.1977 23:59;13.217
11.10.1977 02:30;14.509
12.10.1977 00:00;12.641
13.10.1977 00:00;12.146
14.10.1977 23:59;11.612
15.10.1977 00:00;11.612
16.10.1977 00:00;10.018
17.10.1977 07:30;9.798
18.10.1977 00:00;9.615
19.10.1977 15:00;9.333
20.10.1977 00:00;9.067
21.10.1977 00:00;8.838
22.10.1977 00:00;8.531
23.10.1977 23:59;8.48
24.10.1977 23:59;8.937
25.10.1977 19:30;9.333
26.10.1977 00:00;9.238
27.10.1977 00:00;8.792
28.10.1977 09:00;9.524
29.10.1977 00:00;9.22
30.10.1977 00:00;8.862
31.10.1977 23:59;8.933
01.11.1977 06:30;9.198
02.11.1977 23:59;10.241
03.11.1977 05:30;11.758
04.11.1977 00:00;10.872
05.11.1977 00:00;8.886
06.11.1977 00:00;8.583
07.11.1977 00:00;8.075
08.11.1977 00:00;7.574
09.11.1977 21:00;6.945
10.11.1977 00:00;6.851
11.11.1977 00:00;6.527
12.11.1977 00:00;6.356
13.11.1977 18:00;7.044
14.11.1977 00:00;6.651
15.11.1977 10:30;6.48
16.11.1977 00:00;6.401
17.11.1977 00:00;6.311
18.11.1977 18:00;6.12
19.11.1977 00:00;6.026
20.11.1977 00:00;4.894
21.11.1977 23:59;4.754
22.11.1977 23:30;4.992
23.11.1977 00:00;4.989
24.11.1977 23:59;5.015
25.11.1977 23:59;5.767
26.11.1977 16:30;5.861
27.11.1977 00:00;5.843
28.11.1977 23:59;6.008
29.11.1977 01:00;6.026
30.11.1977 08:30;5.978
01.12.1977 08:30;5.978
02.12.1977 17:00;5.837
03.12.1977 00:00;5.397
04.12.1977 07:00;5.284
05.12.1977 23:59;5.444
06.12.1977 16:00;5.536
07.12.1977 00:00;4.849
08.12.1977 00:00;4.812
09.12.1977 20:30;5.744
10.12.1977 00:00;5.661
11.12.1977 00:00;5.318
12.12.1977 23:59;5.408
13.12.1977 11:00;6.504
14.12.1977 00:00;6.119
15.12.1977 20:00;5.861
16.12.1977 11:30;5.582
17.12.1977 16:00;5.559
18.12.1977 00:00;5.434
19.12.1977 13:30;5.536
20.12.1977 15:00;5.353
21.12.1977 13:00;5.721
22.12.1977 15:30;5.791
23.12.1977 00:00;5.692
24.12.1977 00:00;5.308
25.12.1977 23:59;5.914
26.12.1977 18:30;6.026
27.12.1977 00:00;5.696
28.12.1977 18:00;5.744
29.12.1977 00:00;5.537
30.12.1977 18:00;5.536
31.12.1977 00:00;4.925
01.01.1978 00:00;4.76
02.01.1978 23:59;4.545
03.01.1978 01:30;4.596
04.01.1978 18:30;4.381
05.01.1978 18:00;4.232
06.01.1978 00:00;3.96
07.01.1978 23:59;3.96
08.01.1978 23:59;3.96
09.01.1978 23:59;3.96
10.01.1978 23:59;3.96
11.01.1978 23:59;3.96
12.01.1978 23:59;3.96
13.01.1978 23:59;3.96
14.01.1978 15:30;4.106
15.01.1978 00:00;3.878
16.01.1978 11:30;4.127
17.01.1978 00:00;4.043
18.01.1978 00:00;3.585
19.01.1978 23:59;3.545
20.01.1978 06:30;3.553
21.01.1978 00:00;3.176
</pre>

==Links==
* [[Teaching:TUW_-_UE_InfoVis_WS_2006/07_-_Gruppe_02|Gruppe 2]]

Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 02 - Aufgabe 3 - Prototype

2007-01-04T19:55:28Z

UE-InfoVis0607 9815963:

=our prototype here=
==Authors==
[[Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 02|Gruppe 02 (Diesenreiter, Weixelbaumer, Felkel, Maier)]]

==architecture==
===description===
===images===

==code==
===class===
<pre>
//@author: simon diesenreiter (sd)
//@year: 2006
//@class TileMap: main class

import java.util.Date;
import java.text.SimpleDateFormat;
import java.text.DateFormat;
import prefuse.data.parser.DateTimeParser;
import prefuse.data.parser.DateParser;
import prefuse.data.parser.TimeParser;
import prefuse.data.parser.DoubleParser;
import prefuse.data.parser.DataParser;
import prefuse.data.parser.ParserFactory;
import prefuse.data.io.CSVTableReader;
import prefuse.data.io.TableReadListener;
import prefuse.data.Table;
import prefuse.data.io.DataIOException;
import prefuse.data.io.DelimitedTextTableReader;
import prefuse.data.Schema;

import prefuse.Visualization;

import prefuse.render.DefaultRendererFactory;
import prefuse.render.RendererFactory;
import prefuse.render.AxisRenderer;
import prefuse.render.Renderer;
import prefuse.render.ShapeRenderer;
import prefuse.render.LabelRenderer;

import java.io.FileInputStream;
import java.io.File;
import java.io.FileNotFoundException;

import java.util.Calendar;

//imports for step4: actions
import prefuse.action.layout.AxisLayout;
import prefuse.Constants;
import prefuse.visual.expression.VisiblePredicate;
import prefuse.action.assignment.ColorAction;
import prefuse.visual.VisualItem;
import prefuse.util.ColorLib;
import prefuse.action.assignment.DataShapeAction;
import prefuse.action.ActionList;
import prefuse.action.RepaintAction;
import prefuse.action.assignment.DataColorAction;
import java.awt.Color;
import prefuse.action.layout.AxisLabelLayout;
import java.awt.geom.Rectangle2D;
import java.awt.geom.Rectangle2D.Double;

//imports for step5: display
import prefuse.Display;
import prefuse.controls.ZoomControl;
import prefuse.controls.PanControl;
import javax.swing.BorderFactory;
import prefuse.controls.ToolTipControl;

//imports for step6: launching the Application
import javax.swing.JFrame;

//misc imports
import prefuse.visual.VisualTable;
import prefuse.data.expression.Predicate;
import prefuse.data.expression.parser.ExpressionParser;
import prefuse.visual.expression.InGroupPredicate;
import prefuse.controls.DragControl;

public class TileMap {

//TABLE-STRINGS
private static final String group = "data";
private static final String abfluss = "Abfluss";
private static final String day = "Day";
private static final String week = "Week";
private static final String month = "Month";
private static final String year = "Year";
private static final String dayLabel = "DayLabel";
private static final String weekLabel = "WeekLabel";
private static final String monthLabel = "MonthLabel";
private static final String yearLabel = "YearLabel";

//ACTION-STRINGS
private static final String xAction = "xAction";
private static final String yAction = "yAction";
private static final String colorAction = "colorAction";
private static final String dayLAction = "dayLAction";
private static final String monthLAction = "monthLAction";
private static final String yearLAction = "yearLAction";
private static final String drawAction = "drawAction";

private static final int tilesize = 10; //tilesize in pixel
private static final int binsize = 5; //number of bins for color-coding
private static boolean logFlag = false; // a flag for setting linear or logarithmic scale

// private static final String absoluteFilePath = "D:\\infovis_eclipse_workspace\\resources\\abfluss_mittersill_csv_1jahr.csv";
private static final String fileURL = "http://stud3.tuwien.ac.at/~e9926534/abfluss_mittersill_csv_1jahr.csv";

public static void main(String[] args){

//1: read the data from a file*******************************************************************
//set up the Parser:

DateTimeParser dateTimeParser = new DateTimeParser();
DoubleParser doubleParser = new DoubleParser();

DataParser[] dP2 = new DataParser[]{dateTimeParser, doubleParser};
ParserFactory pF2 = new ParserFactory(dP2);

// File file = new File(absoluteFilePath);

DelimitedTextTableReader reader = new DelimitedTextTableReader("[;]", pF2);

Table table = new Table();

try{
// table = reader.readTable(absoluteFilePath);
table = reader.readTable(fileURL);
System.out.println("InfoVisMain.main(): reading file: " + fileURL);
}
catch(DataIOException ex){
System.out.println("InfoVisMain.main(): error reading the file: " + ex.getMessage());
}

//add additional columns to the table
table.addColumn(day, int.class);
table.addColumn(week, int.class);
table.addColumn(year, int.class);
table.addColumn(dayLabel, String.class);
table.addColumn(monthLabel, String.class);
table.addColumn(yearLabel, String.class);

SimpleDateFormat sdfDay = new SimpleDateFormat("EEE");//day of week
SimpleDateFormat sdfMonth = new SimpleDateFormat("MMM");
SimpleDateFormat sdfYear = new SimpleDateFormat("yyyy");

for (int i=0; i<table.getRowCount(); i++){
if(table.canGetDate(table.getColumnName(0))){
Date tmpDate = table.getDate(i, 0);
Calendar myCalendar = Calendar.getInstance();
myCalendar.setTime(tmpDate);
table.setInt(i, day, myCalendar.get(Calendar.DAY_OF_WEEK));

//introduce an extra week "0" for the case of the beginning of a year where days belong
//to the old-year's week
int tmpWeek = myCalendar.get(Calendar.WEEK_OF_YEAR);
int tmpMonth = myCalendar.get(Calendar.MONTH);
if(tmpMonth==0 & tmpWeek==53){
table.setInt(i, week, 0); //if (month==JAN AND week==53 -> week=0)
}
else{
table.setInt(i, week, tmpWeek);
}

table.setInt(i, year, myCalendar.get(Calendar.YEAR));
table.setString(i, dayLabel, sdfDay.format(tmpDate));
table.setString(i, monthLabel, sdfMonth.format(tmpDate));
table.setString(i, yearLabel, sdfYear.format(tmpDate));
}
}

//remove year 1978:
Predicate inYear1977 = (Predicate)ExpressionParser.parse(year + "==1977");
Predicate inYear1978 = (Predicate)ExpressionParser.parse(year + "==1978");
// table.remove(inYear1978);

//OUTPUT: table properties
System.out.println("Table_properties: " + table.toString());
//OUTPUT: table names
for (int j=0; j<table.getColumnCount(); j++){
System.out.print(table.getColumnName(j).toString() + "\t");
if(j==0)System.out.print("\t");//this is only for nicer output because that string is so long ;)
}
//OUTPUT: table values
System.out.print("\n");
for(int i=0; i<table.getRowCount(); i++){
for (int j=0; j<table.getColumnCount(); j++){
System.out.print(table.get(i, j).toString() + "\t");
if(j==5 || j==6)System.out.print("\t"); //this is only for nicer output too
}
System.out.print("\n");
}

//2: create a Visualisation... *********************************************************************
Visualization vis = new Visualization();
vis.add(group, table);

//-- 3. the renderers and renderer factory ---------------------------

vis.setRendererFactory(new RendererFactory() {
ShapeRenderer shapeR = new ShapeRenderer(tilesize);

Renderer yaxisR = new AxisRenderer(Constants.CENTER, Constants.CENTER);

Renderer xaxisR = new AxisRenderer(Constants.CENTER, Constants.CENTER);

public Renderer getRenderer(VisualItem item) {
return item.isInGroup(TileMap.dayLabel) ? yaxisR :
item.isInGroup(TileMap.monthLabel) ? xaxisR : shapeR;
}
});

// -- 4. the processing actions --------------------------------------

// InGroupPredicate in1977 = new InGroupPredicate("1977");

//the boundingBoxes for the labels and display
Rectangle2D yearLabelB = new Rectangle2D.Double(0, 0, 50, 50);
Rectangle2D dayLabelB = new Rectangle2D.Double(0, 50, 50, tilesize*7);
Rectangle2D monthLabelB = new Rectangle2D.Double(50, 0, tilesize*53, 50);
Rectangle2D tileMapB = new Rectangle2D.Double(50, 50, tilesize*53, tilesize*7);

//set up which values over which axis to be displayed
AxisLayout x_axis = new AxisLayout(group, week, Constants.X_AXIS);
x_axis.setLayoutBounds(tileMapB);
vis.putAction(xAction, x_axis);

// AxisLayout y_axis = new AxisLayout(group, day, Constants.Y_AXIS, VisiblePredicate.TRUE);
// y_axis.setLayoutBounds(tileMapB);
// vis.putAction(yAction, y_axis);
AxisLayout y_axis = new AxisLayout(group, day, Constants.Y_AXIS);
y_axis.setLayoutBounds(tileMapB);
vis.putAction(yAction, y_axis);

//set up the axis-labels and axis-representation
AxisLabelLayout dayLabels = new AxisLabelLayout(dayLabel, y_axis);
dayLabels.setLayoutBounds(dayLabelB);
dayLabels.setSpacing(10);
vis.putAction(dayLAction, dayLabels);

AxisLabelLayout monthLabels = new AxisLabelLayout(TileMap.monthLabel, x_axis);
monthLabels.setLayoutBounds(monthLabelB);
monthLabels.setSpacing(15);
vis.putAction(monthLAction, monthLabels);

//set up the colors to be used for the tilemap
int[] palette = ColorLib.getInterpolatedPalette(binsize,
ColorLib.color(Color.BLUE), ColorLib.color(Color.RED));

DataColorAction dataColor = new DataColorAction(group, "Abfluss", Constants.NUMERICAL,
VisualItem.FILLCOLOR, palette);

if(logFlag)dataColor.setScale(Constants.LOG_SCALE);
vis.putAction(colorAction, dataColor);

//crate an actionList and add all actions to it. finally add the actionList to the Visualization
ActionList draw = new ActionList();
draw.add(x_axis);
draw.add(y_axis);
draw.add(dataColor);
draw.add(dayLabels);
draw.add(monthLabels);
draw.add(new RepaintAction());
vis.putAction(drawAction, draw);

// -- 5. the display and interactive controls -------------------------

Display d = new Display(vis);
d.setBorder(BorderFactory.createEmptyBorder(20,20,20,20));
d.setSize((int)tileMapB.getWidth()+(int)monthLabelB.getWidth(), (int)tileMapB.getHeight()+(int)dayLabelB.getHeight());
d.setHighQuality(true);
d.setPredicate(inYear1977);
ToolTipControl ttc = new ToolTipControl(new String[] {"Datum", "Abfluss"});
d.addControlListener(ttc);
d.addControlListener(new ZoomControl());
d.addControlListener(new PanControl());
d.addControlListener(new DragControl());

Display d2 = new Display(vis);
d2.setBorder(BorderFactory.createEmptyBorder(20,20,20,20));
d2.setLocation(0, 200);
d2.setSize((int)tileMapB.getWidth()+(int)monthLabelB.getWidth(), (int)tileMapB.getHeight()+(int)dayLabelB.getHeight());

System.out.println("d2-location: x=" + d2.getLocation().x + " y=" + d2.getLocation().y);
d2.setHighQuality(true);
// d2.setPredicate(inYear1978);
ToolTipControl ttc2 = new ToolTipControl(new String[] {"Datum", "Abfluss"});
d2.addControlListener(ttc2);
d2.addControlListener(new ZoomControl());
d2.addControlListener(new PanControl());
d2.addControlListener(new DragControl());

d.validate();
d2.validate();

// -- 6. launch the visualization -------------------------------------

// create a new window to hold the visualization
JFrame frame = new JFrame("T I L E M A P");
// ensure application exits when window is closed
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setSize(500, 500);
frame.add(d);
frame.add(d2);
frame.validate();
frame.pack(); // layout components in window
frame.setVisible(true); // show the window
vis.run(drawAction);

}

}

</pre>

==example data==

===example data (InfoVisMain.java)===
Copy that data and store it as ''.csv''. For using it you have to change the path to the file in the sourcecode.
<pre>
Datum;Abfluss
01.01.1977 11:00;5.721
02.01.1977 10:30;5.697
03.01.1977 10:00;5.767
04.01.1977 17:00;5.861
05.01.1977 16:30;5.697
06.01.1977 11:30;5.791
07.01.1977 18:30;5.697
08.01.1977 12:30;5.908
09.01.1977 12:00;5.861
10.01.1977 12:00;5.861
11.01.1977 18:00;5.837
12.01.1977 11:30;6.026
13.01.1977 19:30;5.955
14.01.1977 11:00;5.978
15.01.1977 20:30;5.837
16.01.1977 12:00;6.895
17.01.1977 11:30;6.073
18.01.1977 12:30;5.767
19.01.1977 19:30;6.263
20.01.1977 19:00;5.884
21.01.1977 09:00;6.359
22.01.1977 11:30;6.699
23.01.1977 14:30;5.837
24.01.1977 11:30;5.628
25.01.1977 19:30;5.791
26.01.1977 11:30;5.744
27.01.1977 09:30;5.651
28.01.1977 19:30;5.651
29.01.1977 20:00;6.192
30.01.1977 11:30;5.536
31.01.1977 20:30;5.767
01.02.1977 19:30;5.651
02.02.1977 11:30;6.073
03.02.1977 10:30;6.002
04.02.1977 09:30;6.994
05.02.1977 20:00;6.723
06.02.1977 11:30;7.168
07.02.1977 20:30;6.528
08.02.1977 18:00;6.192
09.02.1977 11:30;7.776
10.02.1977 19:30;7.118
11.02.1977 19:30;7.827
12.02.1977 09:30;7.47
13.02.1977 09:30;7.168
14.02.1977 20:00;6.383
15.02.1977 20:00;6.12
16.02.1977 20:00;6.263
17.02.1977 20:00;6.168
18.02.1977 20:00;5.861
19.02.1977 19:30;5.978
20.02.1977 19:30;6.383
21.02.1977 19:30;9.524
22.02.1977 12:30;7.956
23.02.1977 20:00;7.648
24.02.1977 23:59;8.257
25.02.1977 15:30;10.271
26.02.1977 00:00;9.21
27.02.1977 05:00;8.241
28.02.1977 00:00;6.26
01.03.1977 18:00;5.931
02.03.1977 19:30;5.791
03.03.1977 23:59;8.14
04.03.1977 23:59;17.646
05.03.1977 00:00;17.646
06.03.1977 00:00;11.894
07.03.1977 00:00;10.665
08.03.1977 21:00;10.327
09.03.1977 23:00;10.665
10.03.1977 23:59;10.892
11.03.1977 18:30;11.121
12.03.1977 13:00;10.58
13.03.1977 00:00;10.051
14.03.1977 00:00;9.343
15.03.1977 00:00;8.834
16.03.1977 23:59;8.537
17.03.1977 23:59;10.103
18.03.1977 21:30;12.287
19.03.1977 00:00;12.261
20.03.1977 00:00;10.515
21.03.1977 08:00;10.075
22.03.1977 20:30;10.215
23.03.1977 23:30;11.875
24.03.1977 23:59;13.962
25.03.1977 22:00;14.509
26.03.1977 22:30;15.615
27.03.1977 00:00;15.415
28.03.1977 07:00;18.082
29.03.1977 00:00;16.046
30.03.1977 00:00;13.017
31.03.1977 00:00;10.835
01.04.1977 19:00;10.355
02.04.1977 23:59;12.18
03.04.1977 23:59;13.403
04.04.1977 00:30;13.46
05.04.1977 08:30;12.495
06.04.1977 18:00;12.199
07.04.1977 19:00;11.525
08.04.1977 08:30;11.904
09.04.1977 18:00;11.322
10.04.1977 17:30;10.355
11.04.1977 17:30;10.131
12.04.1977 12:00;9.551
13.04.1977 19:30;10.636
14.04.1977 19:30;11.265
15.04.1977 08:30;10.187
16.04.1977 19:30;8.795
17.04.1977 18:30;10.75
18.04.1977 20:30;12.199
19.04.1977 20:00;12.764
20.04.1977 17:30;11.729
21.04.1977 19:00;12.555
22.04.1977 19:00;13.095
23.04.1977 23:59;16.529
24.04.1977 23:59;20.195
25.04.1977 00:30;20.203
26.04.1977 23:30;23.096
27.04.1977 23:00;28.672
28.04.1977 23:59;36.956
29.04.1977 23:59;56.898
30.04.1977 18:00;81.98
01.05.1977 19:30;77.065
02.05.1977 00:00;70.391
03.05.1977 00:00;51.984
04.05.1977 18:00;93.83
05.05.1977 00:00;86.578
06.05.1977 00:00;57.75
07.05.1977 00:00;37.338
08.05.1977 00:00;29.828
09.05.1977 00:00;28.286
10.05.1977 00:00;22.335
11.05.1977 23:59;23.215
12.05.1977 23:00;42.651
13.05.1977 00:00;41.681
14.05.1977 00:00;37.893
15.05.1977 00:00;30.726
16.05.1977 23:00;29.321
17.05.1977 21:30;32.223
18.05.1977 23:59;33.122
19.05.1977 23:59;99.935
20.05.1977 15:30;137.65
21.05.1977 00:00;110.665
22.05.1977 00:00;75.919
23.05.1977 22:00;59.25
24.05.1977 22:30;63.573
25.05.1977 21:00;76.096
26.05.1977 00:00;73.753
27.05.1977 00:00;67.312
28.05.1977 00:00;53.171
29.05.1977 23:59;52.495
30.05.1977 00:30;52.754
31.05.1977 02:00;50.759
01.06.1977 00:00;38.131
02.06.1977 23:59;36.169
03.06.1977 00:30;36.316
04.06.1977 00:00;30.803
05.06.1977 00:00;26.294
06.06.1977 23:59;29.861
07.06.1977 23:00;51.207
08.06.1977 22:00;63.087
09.06.1977 23:30;82.823
10.06.1977 22:00;109.493
11.06.1977 00:00;104.427
12.06.1977 00:00;90.078
13.06.1977 22:00;103.169
14.06.1977 23:59;120.391
15.06.1977 02:00;125.505
16.06.1977 10:00;85.915
17.06.1977 00:00;58.973
18.06.1977 23:59;74.687
19.06.1977 23:59;86.142
20.06.1977 01:30;86.383
21.06.1977 23:59;73.066
22.06.1977 01:00;73.583
23.06.1977 00:00;62.195
24.06.1977 20:00;54.91
25.06.1977 19:30;75.354
26.06.1977 23:59;94.717
27.06.1977 01:30;94.959
28.06.1977 00:00;64.193
29.06.1977 00:00;51.4
30.06.1977 11:30;62.741
01.07.1977 00:00;49.039
02.07.1977 23:59;48.14
03.07.1977 23:59;65.391
04.07.1977 23:59;72.606
05.07.1977 01:00;72.777
06.07.1977 01:30;62.05
07.07.1977 03:00;55.174
08.07.1977 23:59;54.91
09.07.1977 02:30;55.042
10.07.1977 15:00;65.953
11.07.1977 02:00;61.844
12.07.1977 01:00;55.57
13.07.1977 23:59;100.575
14.07.1977 01:00;115.434
15.07.1977 11:00;93.509
16.07.1977 23:59;70.042
17.07.1977 06:30;101.755
18.07.1977 00:00;65.251
19.07.1977 00:30;60.133
20.07.1977 23:59;73.238
21.07.1977 07:00;207.793
22.07.1977 00:00;76.599
23.07.1977 00:00;44.949
24.07.1977 22:00;47.228
25.07.1977 23:59;66.47
26.07.1977 04:30;85.993
27.07.1977 00:00;56.811
28.07.1977 00:00;40.869
29.07.1977 20:00;34.316
30.07.1977 23:59;40.194
31.07.1977 23:30;253.056
01.08.1977 05:30;271.508
02.08.1977 00:00;119.963
03.08.1977 00:00;54.623
04.08.1977 00:00;39.101
05.08.1977 20:30;82.898
06.08.1977 00:00;71.46
07.08.1977 06:00;68.654
08.08.1977 00:00;53.663
09.08.1977 00:00;49.738
10.08.1977 11:00;59.712
11.08.1977 00:00;46.09
12.08.1977 00:00;33.279
13.08.1977 23:59;38.364
14.08.1977 07:00;54.828
15.08.1977 00:00;34.25
16.08.1977 00:00;27.856
17.08.1977 23:59;35.97
18.08.1977 23:59;39.485
19.08.1977 10:30;45.281
20.08.1977 00:00;42.13
21.08.1977 23:59;41.287
22.08.1977 07:00;64.402
23.08.1977 00:00;43.641
24.08.1977 00:00;32.957
25.08.1977 00:00;27.529
26.08.1977 07:30;26.534
27.08.1977 00:00;25.876
28.08.1977 23:59;30.351
29.08.1977 23:59;42.718
30.08.1977 18:30;47.544
31.08.1977 00:00;47.182
01.09.1977 00:00;40.953
02.09.1977 00:00;31.879
03.09.1977 00:00;31.226
04.09.1977 23:00;47.976
05.09.1977 00:00;46.886
06.09.1977 00:00;30.996
07.09.1977 00:00;21.428
08.09.1977 23:59;25.908
09.09.1977 10:00;104.255
10.09.1977 00:00;44.71
11.09.1977 00:00;26.393
12.09.1977 07:00;25.501
13.09.1977 22:00;24.5
14.09.1977 00:00;24.053
15.09.1977 23:59;21.439
16.09.1977 00:00;21.439
17.09.1977 00:00;17.751
18.09.1977 20:30;16.759
19.09.1977 00:00;16.545
20.09.1977 00:00;16.018
21.09.1977 00:00;14.903
22.09.1977 00:00;14.601
23.09.1977 00:00;14.145
24.09.1977 22:30;14.043
25.09.1977 00:00;14.014
26.09.1977 00:00;13.582
27.09.1977 00:00;12.734
28.09.1977 00:00;12.527
29.09.1977 00:00;11.77
30.09.1977 21:00;11.496
01.10.1977 23:59;11.468
02.10.1977 23:59;12.19
03.10.1977 08:00;12.376
04.10.1977 00:00;12.092
05.10.1977 00:00;11.196
06.10.1977 23:59;10.693
07.10.1977 23:59;10.782
08.10.1977 23:59;13.122
09.10.1977 04:00;13.796
10.10.1977 23:59;13.217
11.10.1977 02:30;14.509
12.10.1977 00:00;12.641
13.10.1977 00:00;12.146
14.10.1977 23:59;11.612
15.10.1977 00:00;11.612
16.10.1977 00:00;10.018
17.10.1977 07:30;9.798
18.10.1977 00:00;9.615
19.10.1977 15:00;9.333
20.10.1977 00:00;9.067
21.10.1977 00:00;8.838
22.10.1977 00:00;8.531
23.10.1977 23:59;8.48
24.10.1977 23:59;8.937
25.10.1977 19:30;9.333
26.10.1977 00:00;9.238
27.10.1977 00:00;8.792
28.10.1977 09:00;9.524
29.10.1977 00:00;9.22
30.10.1977 00:00;8.862
31.10.1977 23:59;8.933
01.11.1977 06:30;9.198
02.11.1977 23:59;10.241
03.11.1977 05:30;11.758
04.11.1977 00:00;10.872
05.11.1977 00:00;8.886
06.11.1977 00:00;8.583
07.11.1977 00:00;8.075
08.11.1977 00:00;7.574
09.11.1977 21:00;6.945
10.11.1977 00:00;6.851
11.11.1977 00:00;6.527
12.11.1977 00:00;6.356
13.11.1977 18:00;7.044
14.11.1977 00:00;6.651
15.11.1977 10:30;6.48
16.11.1977 00:00;6.401
17.11.1977 00:00;6.311
18.11.1977 18:00;6.12
19.11.1977 00:00;6.026
20.11.1977 00:00;4.894
21.11.1977 23:59;4.754
22.11.1977 23:30;4.992
23.11.1977 00:00;4.989
24.11.1977 23:59;5.015
25.11.1977 23:59;5.767
26.11.1977 16:30;5.861
27.11.1977 00:00;5.843
28.11.1977 23:59;6.008
29.11.1977 01:00;6.026
30.11.1977 08:30;5.978
01.12.1977 08:30;5.978
02.12.1977 17:00;5.837
03.12.1977 00:00;5.397
04.12.1977 07:00;5.284
05.12.1977 23:59;5.444
06.12.1977 16:00;5.536
07.12.1977 00:00;4.849
08.12.1977 00:00;4.812
09.12.1977 20:30;5.744
10.12.1977 00:00;5.661
11.12.1977 00:00;5.318
12.12.1977 23:59;5.408
13.12.1977 11:00;6.504
14.12.1977 00:00;6.119
15.12.1977 20:00;5.861
16.12.1977 11:30;5.582
17.12.1977 16:00;5.559
18.12.1977 00:00;5.434
19.12.1977 13:30;5.536
20.12.1977 15:00;5.353
21.12.1977 13:00;5.721
22.12.1977 15:30;5.791
23.12.1977 00:00;5.692
24.12.1977 00:00;5.308
25.12.1977 23:59;5.914
26.12.1977 18:30;6.026
27.12.1977 00:00;5.696
28.12.1977 18:00;5.744
29.12.1977 00:00;5.537
30.12.1977 18:00;5.536
31.12.1977 00:00;4.925
01.01.1978 00:00;4.76
02.01.1978 23:59;4.545
03.01.1978 01:30;4.596
04.01.1978 18:30;4.381
05.01.1978 18:00;4.232
06.01.1978 00:00;3.96
07.01.1978 23:59;3.96
08.01.1978 23:59;3.96
09.01.1978 23:59;3.96
10.01.1978 23:59;3.96
11.01.1978 23:59;3.96
12.01.1978 23:59;3.96
13.01.1978 23:59;3.96
14.01.1978 15:30;4.106
15.01.1978 00:00;3.878
16.01.1978 11:30;4.127
17.01.1978 00:00;4.043
18.01.1978 00:00;3.585
19.01.1978 23:59;3.545
20.01.1978 06:30;3.553
21.01.1978 00:00;3.176
</pre>

==Links==
* [[Teaching:TUW_-_UE_InfoVis_WS_2006/07_-_Gruppe_02|Gruppe 2]]

Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 02 - Aufgabe 3 - Prototype

2007-01-04T19:53:59Z

UE-InfoVis0607 9815963:

=our prototype here=
==Authors==
[[Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 02|Gruppe 02 (Diesenreiter, Weixelbaumer, Felkel, Maier)]]

==architecture==
===description===
===images===

==code==
===class1===
<pre>
package InfoVis;

//@author: simon diesenreiter (sd)
//@year: 2006
//@class TileMap: main class

import java.util.Date;
import java.text.SimpleDateFormat;
import java.text.DateFormat;
import prefuse.data.parser.DateTimeParser;
import prefuse.data.parser.DateParser;
import prefuse.data.parser.TimeParser;
import prefuse.data.parser.DoubleParser;
import prefuse.data.parser.DataParser;
import prefuse.data.parser.ParserFactory;
import prefuse.data.io.CSVTableReader;
import prefuse.data.io.TableReadListener;
import prefuse.data.Table;
import prefuse.data.io.DataIOException;
import prefuse.data.io.DelimitedTextTableReader;
import prefuse.data.Schema;

import prefuse.Visualization;

import prefuse.render.DefaultRendererFactory;
import prefuse.render.RendererFactory;
import prefuse.render.AxisRenderer;
import prefuse.render.Renderer;
import prefuse.render.ShapeRenderer;
import prefuse.render.LabelRenderer;

import java.io.FileInputStream;
import java.io.File;
import java.io.FileNotFoundException;

import java.util.Calendar;

//imports for step4: actions
import prefuse.action.layout.AxisLayout;
import prefuse.Constants;
import prefuse.visual.expression.VisiblePredicate;
import prefuse.action.assignment.ColorAction;
import prefuse.visual.VisualItem;
import prefuse.util.ColorLib;
import prefuse.action.assignment.DataShapeAction;
import prefuse.action.ActionList;
import prefuse.action.RepaintAction;
import prefuse.action.assignment.DataColorAction;
import java.awt.Color;
import prefuse.action.layout.AxisLabelLayout;
import java.awt.geom.Rectangle2D;
import java.awt.geom.Rectangle2D.Double;

//imports for step5: display
import prefuse.Display;
import prefuse.controls.ZoomControl;
import prefuse.controls.PanControl;
import javax.swing.BorderFactory;
import prefuse.controls.ToolTipControl;

//imports for step6: launching the Application
import javax.swing.JFrame;

//misc imports
import prefuse.visual.VisualTable;
import prefuse.data.expression.Predicate;
import prefuse.data.expression.parser.ExpressionParser;
import prefuse.visual.expression.InGroupPredicate;
import prefuse.controls.DragControl;

public class TileMap {

//TABLE-STRINGS
private static final String group = "data";
private static final String abfluss = "Abfluss";
private static final String day = "Day";
private static final String week = "Week";
private static final String month = "Month";
private static final String year = "Year";
private static final String dayLabel = "DayLabel";
private static final String weekLabel = "WeekLabel";
private static final String monthLabel = "MonthLabel";
private static final String yearLabel = "YearLabel";

//ACTION-STRINGS
private static final String xAction = "xAction";
private static final String yAction = "yAction";
private static final String colorAction = "colorAction";
private static final String dayLAction = "dayLAction";
private static final String monthLAction = "monthLAction";
private static final String yearLAction = "yearLAction";
private static final String drawAction = "drawAction";

private static final int tilesize = 10; //tilesize in pixel
private static final int binsize = 5; //number of bins for color-coding
private static boolean logFlag = false; // a flag for setting linear or logarithmic scale

// private static final String absoluteFilePath = "D:\\infovis_eclipse_workspace\\resources\\abfluss_mittersill_csv_1jahr.csv";
private static final String fileURL = "http://stud3.tuwien.ac.at/~e9926534/abfluss_mittersill_csv_1jahr.csv";

public static void main(String[] args){

//1: read the data from a file*******************************************************************
//set up the Parser:

DateTimeParser dateTimeParser = new DateTimeParser();
DoubleParser doubleParser = new DoubleParser();

DataParser[] dP2 = new DataParser[]{dateTimeParser, doubleParser};
ParserFactory pF2 = new ParserFactory(dP2);

// File file = new File(absoluteFilePath);

DelimitedTextTableReader reader = new DelimitedTextTableReader("[;]", pF2);

Table table = new Table();

try{
// table = reader.readTable(absoluteFilePath);
table = reader.readTable(fileURL);
System.out.println("InfoVisMain.main(): reading file: " + fileURL);
}
catch(DataIOException ex){
System.out.println("InfoVisMain.main(): error reading the file: " + ex.getMessage());
}

//add additional columns to the table
table.addColumn(day, int.class);
table.addColumn(week, int.class);
table.addColumn(year, int.class);
table.addColumn(dayLabel, String.class);
table.addColumn(monthLabel, String.class);
table.addColumn(yearLabel, String.class);

SimpleDateFormat sdfDay = new SimpleDateFormat("EEE");//day of week
SimpleDateFormat sdfMonth = new SimpleDateFormat("MMM");
SimpleDateFormat sdfYear = new SimpleDateFormat("yyyy");

for (int i=0; i<table.getRowCount(); i++){
if(table.canGetDate(table.getColumnName(0))){
Date tmpDate = table.getDate(i, 0);
Calendar myCalendar = Calendar.getInstance();
myCalendar.setTime(tmpDate);
table.setInt(i, day, myCalendar.get(Calendar.DAY_OF_WEEK));

//introduce an extra week "0" for the case of the beginning of a year where days belong
//to the old-year's week
int tmpWeek = myCalendar.get(Calendar.WEEK_OF_YEAR);
int tmpMonth = myCalendar.get(Calendar.MONTH);
if(tmpMonth==0 & tmpWeek==53){
table.setInt(i, week, 0); //if (month==JAN AND week==53 -> week=0)
}
else{
table.setInt(i, week, tmpWeek);
}

table.setInt(i, year, myCalendar.get(Calendar.YEAR));
table.setString(i, dayLabel, sdfDay.format(tmpDate));
table.setString(i, monthLabel, sdfMonth.format(tmpDate));
table.setString(i, yearLabel, sdfYear.format(tmpDate));
}
}

//remove year 1978:
Predicate inYear1977 = (Predicate)ExpressionParser.parse(year + "==1977");
Predicate inYear1978 = (Predicate)ExpressionParser.parse(year + "==1978");
// table.remove(inYear1978);

//OUTPUT: table properties
System.out.println("Table_properties: " + table.toString());
//OUTPUT: table names
for (int j=0; j<table.getColumnCount(); j++){
System.out.print(table.getColumnName(j).toString() + "\t");
if(j==0)System.out.print("\t");//this is only for nicer output because that string is so long ;)
}
//OUTPUT: table values
System.out.print("\n");
for(int i=0; i<table.getRowCount(); i++){
for (int j=0; j<table.getColumnCount(); j++){
System.out.print(table.get(i, j).toString() + "\t");
if(j==5 || j==6)System.out.print("\t"); //this is only for nicer output too
}
System.out.print("\n");
}

//2: create a Visualisation... *********************************************************************
Visualization vis = new Visualization();
vis.add(group, table);

//-- 3. the renderers and renderer factory ---------------------------

vis.setRendererFactory(new RendererFactory() {
ShapeRenderer shapeR = new ShapeRenderer(tilesize);

Renderer yaxisR = new AxisRenderer(Constants.CENTER, Constants.CENTER);

Renderer xaxisR = new AxisRenderer(Constants.CENTER, Constants.CENTER);

public Renderer getRenderer(VisualItem item) {
return item.isInGroup(TileMap.dayLabel) ? yaxisR :
item.isInGroup(TileMap.monthLabel) ? xaxisR : shapeR;
}
});

// -- 4. the processing actions --------------------------------------

// InGroupPredicate in1977 = new InGroupPredicate("1977");

//the boundingBoxes for the labels and display
Rectangle2D yearLabelB = new Rectangle2D.Double(0, 0, 50, 50);
Rectangle2D dayLabelB = new Rectangle2D.Double(0, 50, 50, tilesize*7);
Rectangle2D monthLabelB = new Rectangle2D.Double(50, 0, tilesize*53, 50);
Rectangle2D tileMapB = new Rectangle2D.Double(50, 50, tilesize*53, tilesize*7);

//set up which values over which axis to be displayed
AxisLayout x_axis = new AxisLayout(group, week, Constants.X_AXIS);
x_axis.setLayoutBounds(tileMapB);
vis.putAction(xAction, x_axis);

// AxisLayout y_axis = new AxisLayout(group, day, Constants.Y_AXIS, VisiblePredicate.TRUE);
// y_axis.setLayoutBounds(tileMapB);
// vis.putAction(yAction, y_axis);
AxisLayout y_axis = new AxisLayout(group, day, Constants.Y_AXIS);
y_axis.setLayoutBounds(tileMapB);
vis.putAction(yAction, y_axis);

//set up the axis-labels and axis-representation
AxisLabelLayout dayLabels = new AxisLabelLayout(dayLabel, y_axis);
dayLabels.setLayoutBounds(dayLabelB);
dayLabels.setSpacing(10);
vis.putAction(dayLAction, dayLabels);

AxisLabelLayout monthLabels = new AxisLabelLayout(TileMap.monthLabel, x_axis);
monthLabels.setLayoutBounds(monthLabelB);
monthLabels.setSpacing(15);
vis.putAction(monthLAction, monthLabels);

//set up the colors to be used for the tilemap
int[] palette = ColorLib.getInterpolatedPalette(binsize,
ColorLib.color(Color.BLUE), ColorLib.color(Color.RED));

DataColorAction dataColor = new DataColorAction(group, "Abfluss", Constants.NUMERICAL,
VisualItem.FILLCOLOR, palette);

if(logFlag)dataColor.setScale(Constants.LOG_SCALE);
vis.putAction(colorAction, dataColor);

//crate an actionList and add all actions to it. finally add the actionList to the Visualization
ActionList draw = new ActionList();
draw.add(x_axis);
draw.add(y_axis);
draw.add(dataColor);
draw.add(dayLabels);
draw.add(monthLabels);
draw.add(new RepaintAction());
vis.putAction(drawAction, draw);

// -- 5. the display and interactive controls -------------------------

Display d = new Display(vis);
d.setBorder(BorderFactory.createEmptyBorder(20,20,20,20));
d.setSize((int)tileMapB.getWidth()+(int)monthLabelB.getWidth(), (int)tileMapB.getHeight()+(int)dayLabelB.getHeight());
d.setHighQuality(true);
d.setPredicate(inYear1977);
ToolTipControl ttc = new ToolTipControl(new String[] {"Datum", "Abfluss"});
d.addControlListener(ttc);
d.addControlListener(new ZoomControl());
d.addControlListener(new PanControl());
d.addControlListener(new DragControl());

Display d2 = new Display(vis);
d2.setBorder(BorderFactory.createEmptyBorder(20,20,20,20));
d2.setLocation(0, 200);
d2.setSize((int)tileMapB.getWidth()+(int)monthLabelB.getWidth(), (int)tileMapB.getHeight()+(int)dayLabelB.getHeight());

System.out.println("d2-location: x=" + d2.getLocation().x + " y=" + d2.getLocation().y);
d2.setHighQuality(true);
// d2.setPredicate(inYear1978);
ToolTipControl ttc2 = new ToolTipControl(new String[] {"Datum", "Abfluss"});
d2.addControlListener(ttc2);
d2.addControlListener(new ZoomControl());
d2.addControlListener(new PanControl());
d2.addControlListener(new DragControl());

d.validate();
d2.validate();

// -- 6. launch the visualization -------------------------------------

// create a new window to hold the visualization
JFrame frame = new JFrame("T I L E M A P");
// ensure application exits when window is closed
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
frame.setSize(500, 500);
frame.add(d);
frame.add(d2);
frame.validate();
frame.pack(); // layout components in window
frame.setVisible(true); // show the window
vis.run(drawAction);

}

}

</pre>

===class2===
===class3===

==example data==

===example data for class1 (InfoVisMain.java)===
Copy that data and store it as ''.csv''. For using it you have to change the path to the file in the sourcecode.
<pre>
Datum;Abfluss
01.01.1977 11:00;5.721
02.01.1977 10:30;5.697
03.01.1977 10:00;5.767
04.01.1977 17:00;5.861
05.01.1977 16:30;5.697
06.01.1977 11:30;5.791
07.01.1977 18:30;5.697
08.01.1977 12:30;5.908
09.01.1977 12:00;5.861
10.01.1977 12:00;5.861
11.01.1977 18:00;5.837
12.01.1977 11:30;6.026
13.01.1977 19:30;5.955
14.01.1977 11:00;5.978
15.01.1977 20:30;5.837
16.01.1977 12:00;6.895
17.01.1977 11:30;6.073
18.01.1977 12:30;5.767
19.01.1977 19:30;6.263
20.01.1977 19:00;5.884
21.01.1977 09:00;6.359
22.01.1977 11:30;6.699
23.01.1977 14:30;5.837
24.01.1977 11:30;5.628
25.01.1977 19:30;5.791
26.01.1977 11:30;5.744
27.01.1977 09:30;5.651
28.01.1977 19:30;5.651
29.01.1977 20:00;6.192
30.01.1977 11:30;5.536
31.01.1977 20:30;5.767
01.02.1977 19:30;5.651
02.02.1977 11:30;6.073
03.02.1977 10:30;6.002
04.02.1977 09:30;6.994
05.02.1977 20:00;6.723
06.02.1977 11:30;7.168
07.02.1977 20:30;6.528
08.02.1977 18:00;6.192
09.02.1977 11:30;7.776
10.02.1977 19:30;7.118
11.02.1977 19:30;7.827
12.02.1977 09:30;7.47
13.02.1977 09:30;7.168
14.02.1977 20:00;6.383
15.02.1977 20:00;6.12
16.02.1977 20:00;6.263
17.02.1977 20:00;6.168
18.02.1977 20:00;5.861
19.02.1977 19:30;5.978
20.02.1977 19:30;6.383
21.02.1977 19:30;9.524
22.02.1977 12:30;7.956
23.02.1977 20:00;7.648
24.02.1977 23:59;8.257
25.02.1977 15:30;10.271
26.02.1977 00:00;9.21
27.02.1977 05:00;8.241
28.02.1977 00:00;6.26
01.03.1977 18:00;5.931
02.03.1977 19:30;5.791
03.03.1977 23:59;8.14
04.03.1977 23:59;17.646
05.03.1977 00:00;17.646
06.03.1977 00:00;11.894
07.03.1977 00:00;10.665
08.03.1977 21:00;10.327
09.03.1977 23:00;10.665
10.03.1977 23:59;10.892
11.03.1977 18:30;11.121
12.03.1977 13:00;10.58
13.03.1977 00:00;10.051
14.03.1977 00:00;9.343
15.03.1977 00:00;8.834
16.03.1977 23:59;8.537
17.03.1977 23:59;10.103
18.03.1977 21:30;12.287
19.03.1977 00:00;12.261
20.03.1977 00:00;10.515
21.03.1977 08:00;10.075
22.03.1977 20:30;10.215
23.03.1977 23:30;11.875
24.03.1977 23:59;13.962
25.03.1977 22:00;14.509
26.03.1977 22:30;15.615
27.03.1977 00:00;15.415
28.03.1977 07:00;18.082
29.03.1977 00:00;16.046
30.03.1977 00:00;13.017
31.03.1977 00:00;10.835
01.04.1977 19:00;10.355
02.04.1977 23:59;12.18
03.04.1977 23:59;13.403
04.04.1977 00:30;13.46
05.04.1977 08:30;12.495
06.04.1977 18:00;12.199
07.04.1977 19:00;11.525
08.04.1977 08:30;11.904
09.04.1977 18:00;11.322
10.04.1977 17:30;10.355
11.04.1977 17:30;10.131
12.04.1977 12:00;9.551
13.04.1977 19:30;10.636
14.04.1977 19:30;11.265
15.04.1977 08:30;10.187
16.04.1977 19:30;8.795
17.04.1977 18:30;10.75
18.04.1977 20:30;12.199
19.04.1977 20:00;12.764
20.04.1977 17:30;11.729
21.04.1977 19:00;12.555
22.04.1977 19:00;13.095
23.04.1977 23:59;16.529
24.04.1977 23:59;20.195
25.04.1977 00:30;20.203
26.04.1977 23:30;23.096
27.04.1977 23:00;28.672
28.04.1977 23:59;36.956
29.04.1977 23:59;56.898
30.04.1977 18:00;81.98
01.05.1977 19:30;77.065
02.05.1977 00:00;70.391
03.05.1977 00:00;51.984
04.05.1977 18:00;93.83
05.05.1977 00:00;86.578
06.05.1977 00:00;57.75
07.05.1977 00:00;37.338
08.05.1977 00:00;29.828
09.05.1977 00:00;28.286
10.05.1977 00:00;22.335
11.05.1977 23:59;23.215
12.05.1977 23:00;42.651
13.05.1977 00:00;41.681
14.05.1977 00:00;37.893
15.05.1977 00:00;30.726
16.05.1977 23:00;29.321
17.05.1977 21:30;32.223
18.05.1977 23:59;33.122
19.05.1977 23:59;99.935
20.05.1977 15:30;137.65
21.05.1977 00:00;110.665
22.05.1977 00:00;75.919
23.05.1977 22:00;59.25
24.05.1977 22:30;63.573
25.05.1977 21:00;76.096
26.05.1977 00:00;73.753
27.05.1977 00:00;67.312
28.05.1977 00:00;53.171
29.05.1977 23:59;52.495
30.05.1977 00:30;52.754
31.05.1977 02:00;50.759
01.06.1977 00:00;38.131
02.06.1977 23:59;36.169
03.06.1977 00:30;36.316
04.06.1977 00:00;30.803
05.06.1977 00:00;26.294
06.06.1977 23:59;29.861
07.06.1977 23:00;51.207
08.06.1977 22:00;63.087
09.06.1977 23:30;82.823
10.06.1977 22:00;109.493
11.06.1977 00:00;104.427
12.06.1977 00:00;90.078
13.06.1977 22:00;103.169
14.06.1977 23:59;120.391
15.06.1977 02:00;125.505
16.06.1977 10:00;85.915
17.06.1977 00:00;58.973
18.06.1977 23:59;74.687
19.06.1977 23:59;86.142
20.06.1977 01:30;86.383
21.06.1977 23:59;73.066
22.06.1977 01:00;73.583
23.06.1977 00:00;62.195
24.06.1977 20:00;54.91
25.06.1977 19:30;75.354
26.06.1977 23:59;94.717
27.06.1977 01:30;94.959
28.06.1977 00:00;64.193
29.06.1977 00:00;51.4
30.06.1977 11:30;62.741
01.07.1977 00:00;49.039
02.07.1977 23:59;48.14
03.07.1977 23:59;65.391
04.07.1977 23:59;72.606
05.07.1977 01:00;72.777
06.07.1977 01:30;62.05
07.07.1977 03:00;55.174
08.07.1977 23:59;54.91
09.07.1977 02:30;55.042
10.07.1977 15:00;65.953
11.07.1977 02:00;61.844
12.07.1977 01:00;55.57
13.07.1977 23:59;100.575
14.07.1977 01:00;115.434
15.07.1977 11:00;93.509
16.07.1977 23:59;70.042
17.07.1977 06:30;101.755
18.07.1977 00:00;65.251
19.07.1977 00:30;60.133
20.07.1977 23:59;73.238
21.07.1977 07:00;207.793
22.07.1977 00:00;76.599
23.07.1977 00:00;44.949
24.07.1977 22:00;47.228
25.07.1977 23:59;66.47
26.07.1977 04:30;85.993
27.07.1977 00:00;56.811
28.07.1977 00:00;40.869
29.07.1977 20:00;34.316
30.07.1977 23:59;40.194
31.07.1977 23:30;253.056
01.08.1977 05:30;271.508
02.08.1977 00:00;119.963
03.08.1977 00:00;54.623
04.08.1977 00:00;39.101
05.08.1977 20:30;82.898
06.08.1977 00:00;71.46
07.08.1977 06:00;68.654
08.08.1977 00:00;53.663
09.08.1977 00:00;49.738
10.08.1977 11:00;59.712
11.08.1977 00:00;46.09
12.08.1977 00:00;33.279
13.08.1977 23:59;38.364
14.08.1977 07:00;54.828
15.08.1977 00:00;34.25
16.08.1977 00:00;27.856
17.08.1977 23:59;35.97
18.08.1977 23:59;39.485
19.08.1977 10:30;45.281
20.08.1977 00:00;42.13
21.08.1977 23:59;41.287
22.08.1977 07:00;64.402
23.08.1977 00:00;43.641
24.08.1977 00:00;32.957
25.08.1977 00:00;27.529
26.08.1977 07:30;26.534
27.08.1977 00:00;25.876
28.08.1977 23:59;30.351
29.08.1977 23:59;42.718
30.08.1977 18:30;47.544
31.08.1977 00:00;47.182
01.09.1977 00:00;40.953
02.09.1977 00:00;31.879
03.09.1977 00:00;31.226
04.09.1977 23:00;47.976
05.09.1977 00:00;46.886
06.09.1977 00:00;30.996
07.09.1977 00:00;21.428
08.09.1977 23:59;25.908
09.09.1977 10:00;104.255
10.09.1977 00:00;44.71
11.09.1977 00:00;26.393
12.09.1977 07:00;25.501
13.09.1977 22:00;24.5
14.09.1977 00:00;24.053
15.09.1977 23:59;21.439
16.09.1977 00:00;21.439
17.09.1977 00:00;17.751
18.09.1977 20:30;16.759
19.09.1977 00:00;16.545
20.09.1977 00:00;16.018
21.09.1977 00:00;14.903
22.09.1977 00:00;14.601
23.09.1977 00:00;14.145
24.09.1977 22:30;14.043
25.09.1977 00:00;14.014
26.09.1977 00:00;13.582
27.09.1977 00:00;12.734
28.09.1977 00:00;12.527
29.09.1977 00:00;11.77
30.09.1977 21:00;11.496
01.10.1977 23:59;11.468
02.10.1977 23:59;12.19
03.10.1977 08:00;12.376
04.10.1977 00:00;12.092
05.10.1977 00:00;11.196
06.10.1977 23:59;10.693
07.10.1977 23:59;10.782
08.10.1977 23:59;13.122
09.10.1977 04:00;13.796
10.10.1977 23:59;13.217
11.10.1977 02:30;14.509
12.10.1977 00:00;12.641
13.10.1977 00:00;12.146
14.10.1977 23:59;11.612
15.10.1977 00:00;11.612
16.10.1977 00:00;10.018
17.10.1977 07:30;9.798
18.10.1977 00:00;9.615
19.10.1977 15:00;9.333
20.10.1977 00:00;9.067
21.10.1977 00:00;8.838
22.10.1977 00:00;8.531
23.10.1977 23:59;8.48
24.10.1977 23:59;8.937
25.10.1977 19:30;9.333
26.10.1977 00:00;9.238
27.10.1977 00:00;8.792
28.10.1977 09:00;9.524
29.10.1977 00:00;9.22
30.10.1977 00:00;8.862
31.10.1977 23:59;8.933
01.11.1977 06:30;9.198
02.11.1977 23:59;10.241
03.11.1977 05:30;11.758
04.11.1977 00:00;10.872
05.11.1977 00:00;8.886
06.11.1977 00:00;8.583
07.11.1977 00:00;8.075
08.11.1977 00:00;7.574
09.11.1977 21:00;6.945
10.11.1977 00:00;6.851
11.11.1977 00:00;6.527
12.11.1977 00:00;6.356
13.11.1977 18:00;7.044
14.11.1977 00:00;6.651
15.11.1977 10:30;6.48
16.11.1977 00:00;6.401
17.11.1977 00:00;6.311
18.11.1977 18:00;6.12
19.11.1977 00:00;6.026
20.11.1977 00:00;4.894
21.11.1977 23:59;4.754
22.11.1977 23:30;4.992
23.11.1977 00:00;4.989
24.11.1977 23:59;5.015
25.11.1977 23:59;5.767
26.11.1977 16:30;5.861
27.11.1977 00:00;5.843
28.11.1977 23:59;6.008
29.11.1977 01:00;6.026
30.11.1977 08:30;5.978
01.12.1977 08:30;5.978
02.12.1977 17:00;5.837
03.12.1977 00:00;5.397
04.12.1977 07:00;5.284
05.12.1977 23:59;5.444
06.12.1977 16:00;5.536
07.12.1977 00:00;4.849
08.12.1977 00:00;4.812
09.12.1977 20:30;5.744
10.12.1977 00:00;5.661
11.12.1977 00:00;5.318
12.12.1977 23:59;5.408
13.12.1977 11:00;6.504
14.12.1977 00:00;6.119
15.12.1977 20:00;5.861
16.12.1977 11:30;5.582
17.12.1977 16:00;5.559
18.12.1977 00:00;5.434
19.12.1977 13:30;5.536
20.12.1977 15:00;5.353
21.12.1977 13:00;5.721
22.12.1977 15:30;5.791
23.12.1977 00:00;5.692
24.12.1977 00:00;5.308
25.12.1977 23:59;5.914
26.12.1977 18:30;6.026
27.12.1977 00:00;5.696
28.12.1977 18:00;5.744
29.12.1977 00:00;5.537
30.12.1977 18:00;5.536
31.12.1977 00:00;4.925
01.01.1978 00:00;4.76
02.01.1978 23:59;4.545
03.01.1978 01:30;4.596
04.01.1978 18:30;4.381
05.01.1978 18:00;4.232
06.01.1978 00:00;3.96
07.01.1978 23:59;3.96
08.01.1978 23:59;3.96
09.01.1978 23:59;3.96
10.01.1978 23:59;3.96
11.01.1978 23:59;3.96
12.01.1978 23:59;3.96
13.01.1978 23:59;3.96
14.01.1978 15:30;4.106
15.01.1978 00:00;3.878
16.01.1978 11:30;4.127
17.01.1978 00:00;4.043
18.01.1978 00:00;3.585
19.01.1978 23:59;3.545
20.01.1978 06:30;3.553
21.01.1978 00:00;3.176
</pre>

==Links==
* [[Teaching:TUW_-_UE_InfoVis_WS_2006/07_-_Gruppe_02|Gruppe 2]]

Teaching:TUW - UE InfoVis WS 2006/07 - Aufgabe 3 - Technikauswahl

2007-01-04T19:39:26Z

UE-InfoVis0607 9815963:

{|
|-
|'''Gruppe: '''
|'''Gewählte Technik:'''
|-
|01
|2 SpiraClock
|-
|02
|4 Tile Maps
|-
|03
|13 Conversation Landscape
|-
|08
|3 Perspective Wall oder 6 ThemeRiver
|-
|}

Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 02 - Aufgabe 3 - Technique

2006-12-01T22:27:01Z

UE-InfoVis0607 9815963: /* Which technique for which purpose */

=Tile Maps=

== What are Tile Maps ==

===Summary===

{{Quotation|The tile map is a useful semi-graphical display for data with seasonal variation. |[Friendly, 2006]}}

{{Quotation|The Tile map, if carefully constructed, can convey complicated temoral patterns in an easily understood manner.|[Mintz et al., 1997]}}

===Images===

[[Image:Tilemaps_bw.jpg | Tilemap (greyscale)]]

Figure 1: a tilemap showing different levels of ocone-concentration in different shades of grey [Mintz et al., 1997].

[[Image:Tilemaps_color.jpg | Tilemap (color)]]

Figure2: ocone-concentration over several years, color-coded [Friendly, 2006].

===Description===

A tile map is a representation of a discrete - respectively quantized (discretion by quantization)- two-dimensional dataset, where each dataset-entry is represented by a colored square (tile). Usually the first dimension is an instance of time (like one day, hour, etc), and with each entry representing the same amount of time. The second dimension then represents some arbitray data, like the amount of rain for that day, the average temperature for a certain amount of time, or the concentration of ocone for a certain day (like in figure 2).

The speciality of this visualization technique is the arrangement of the time-axis: it is not a straight line, but rather a zigzag-line thus forming a block of a bigger time-entity from many smaller entities. For better understanding see figure 1: there is one tile for each day. The days are grouped into vertical lines of one week each, and the weeks are aligned along the horizontal axis forming months and consequently a whole year.
As in figure 2 several of these bigger entities can again be arranged along a vertical axis thus providing a quick overview over a long period of time which makes it possible to easily detect certain trends in the dataset.

The values for each time-entity can be coded by color or shades of grey. In following the function to give a quick overview there should not be used to many levels of colors. Furthermore the assignment of values to colors might not be linear: eg in figure 2 there are four levels of ozone-concentration, but the last level covering 50% of the concentration-spectrum.

===Notes===

Maybe there could be used (almost) continuous values for the second dimension, by mapping the whole dataset on a big-enough color-space. That might also appeal to the time-dimension by increasing time-resolution, but possibly this would result in a loss of simplicity and overview, which is the biggest strength of the tile maps.

== Visual Mapping ==

=== Introduction ===
The aim of the visual representation with tile maps is to abstract and simplify seasonal patterns. This makes it easier to recognize patterns or to compare them.

=== Visualisation / Abstraction ===
With this visualization technique the measured data (in our case weather) is represented by "tiles" (squares) which are arranged in 2 dimesions. Every "tile" is represent a certain amount of time. E.g. the images above showing a tile map where every "tile" representing a day which are vertically grouped into weeks. So the chronological sequence is illustrated vertical, from top to bottom, and horizontal, from left to right ... like a 90 degree rotated calendar. The tile map can also be used to display other temporal patterns. For example, displaying diurnal patterns would work much the same way, except each tile represents an hour of the day and would be vertically grouped into days. [Mintz et al., 1997]

The value of the measured data is illustrated by the color or color intensity of the "tiles". For example a light shade indicating low values, darker shades indicating higher values. [Mintz et al., 1997]

== Interaction practices ==

=== Considerations ===

Tile maps are mainly used to visualize temporal patterns. A suggesting first step of adding interactivity to a tile map could be added with the possibility of regulating the timeframe of the analyzed dataset.
Depending on the granularity of the given data-stream(s) it is also possible to add a way of modifying the size of the time units.

In the given example of an weather data analysis this could be implemented by letting the user refine or modify the analysed units of time from years to month or days or even smaller unit-sizes e.g. via an alpha-slider.
Additionally the size of each tile can be adapted according to the size of the chosen unit of time.

This and the possibility of coloring every tile corresponding to it´s representing value emphasises the graphical nature of this visualization technique. Each range of values can thus be mapped to a certain color and each tile will than be rendered with the color relating to it´s representing value.

It is farther possible to add a kind of bifocal navigation to a tile map, allowing the user to select certain sectors or lines of the tile-matrix.

Finally a hover function can be implemented to easily provide the user with the detailed value corresponding to a single tile.

=== Which technique for which purpose ===

* Zooming: Offers the possibility of varying the unit/entity of time.

* Selection: Bifocal navigation allows selection of a single line of the dataset. Also hovering over each tile allows to select certain values.

* Color Encoding: Gray-Scale vs. couloured tiles. Number/Diversity of colors used.

* Size Encoding: The size of each tile can be adapted to the chosen unit of time.

== References ==
[Friendly, 2006] Michael Friendly. Gallery of Data Visualization. York University: Statistical Consulting Service and Psychology Department. Accessed: 27.11.2006. [http://www.ecn.wfu.edu/SCS/Gallery/ Gallery of Data Visualization]

[Mintz et al., 1997] Mintz, D., Fitz-Simons, T., and Wayland, M.. Tracking Air Quality Trends with SAS/GRAPH. In ''Proceedings of the 22nd Annual SAS User Group International Conference (SUGI97)'', pages 807–812, 1997. [http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/papers/tilemaps-PAPER173.PDF PDF]

== Links ==
* [[Teaching:TUW_-_UE_InfoVis_WS_2006/07_-_Gruppe_02_-_Aufgabe_3_-_Prototype|Prototype]]

* [[Teaching:TUW_-_UE_InfoVis_WS_2006/07_-_Gruppe_02|InfoVis:Wiki Gruppe 2 Startseite]]

* [[Teaching:TUW_-_UE_InfoVis_WS_2006/07|InfoVis:Wiki UE Homepage]]

* [http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/index.html UE InfoVis]

Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 02 - Aufgabe 3 - Technique

2006-12-01T21:55:55Z

UE-InfoVis0607 9815963: /* Which technique for which purpose */

=Tile Maps=

== What are Tile Maps ==

===Summary===

{{Quotation|The tile map is a useful semi-graphical display for data with seasonal variation. |[Friendly, 2006]}}

{{Quotation|The Tile map, if carefully constructed, can convey complicated temoral patterns in an easily understood manner.|[Mintz et al., 1997]}}

===Images===

[[Image:Tilemaps_bw.jpg | Tilemap (greyscale)]]

Figure 1: a tilemap showing different levels of ocone-concentration in different shades of grey [Mintz et al., 1997].

[[Image:Tilemaps_color.jpg | Tilemap (color)]]

Figure2: ocone-concentration over several years, color-coded [Friendly, 2006].

===Description===

A tile map is a representation of a discrete - respectively quantized (discretion by quantization)- two-dimensional dataset, where each dataset-entry is represented by a colored square (tile). Usually the first dimension is an instance of time (like one day, hour, etc), and with each entry representing the same amount of time. The second dimension then represents some arbitray data, like the amount of rain for that day, the average temperature for a certain amount of time, or the concentration of ocone for a certain day (like in figure 2).

The speciality of this visualization technique is the arrangement of the time-axis: it is not a straight line, but rather a zigzag-line thus forming a block of a bigger time-entity from many smaller entities. For better understanding see figure 1: there is one tile for each day. The days are grouped into vertical lines of one week each, and the weeks are aligned along the horizontal axis forming months and consequently a whole year.
As in figure 2 several of these bigger entities can again be arranged along a vertical axis thus providing a quick overview over a long period of time which makes it possible to easily detect certain trends in the dataset.

The values for each time-entity can be coded by color or shades of grey. In following the function to give a quick overview there should not be used to many levels of colors. Furthermore the assignment of values to colors might not be linear: eg in figure 2 there are four levels of ozone-concentration, but the last level covering 50% of the concentration-spectrum.

===Notes===

Maybe there could be used (almost) continuous values for the second dimension, by mapping the whole dataset on a big-enough color-space. That might also appeal to the time-dimension by increasing time-resolution, but possibly this would result in a loss of simplicity and overview, which is the biggest strength of the tile maps.

== Visual Mapping ==

=== Introduction ===
The aim of the visual representation with tile maps is to abstract and simplify seasonal patterns. This makes it easier to recognize patterns or to compare them.

=== Visualisation / Abstraction ===
With this visualization technique the measured data (in our case weather) is represented by "tiles" (squares) which are arranged in 2 dimesions. Every "tile" is represent a certain amount of time. E.g. the images above showing a tile map where every "tile" representing a day which are vertically grouped into weeks. So the chronological sequence is illustrated vertical, from top to bottom, and horizontal, from left to right ... like a 90 degree rotated calendar. The tile map can also be used to display other temporal patterns. For example, displaying diurnal patterns would work much the same way, except each tile represents an hour of the day and would be vertically grouped into days. [Mintz et al., 1997]

The value of the measured data is illustrated by the color or color intensity of the "tiles". For example a light shade indicating low values, darker shades indicating higher values. [Mintz et al., 1997]

== Interaction practices ==

=== Considerations ===

Tile maps are mainly used to visualize temporal patterns. A suggesting first step of adding interactivity to a tile map could be added with the possibility of regulating the timeframe of the analyzed dataset.
Depending on the granularity of the given data-stream(s) it is also possible to add a way of modifying the size of the time units.

In the given example of an weather data analysis this could be implemented by letting the user refine or modify the analysed units of time from years to month or days or even smaller unit-sizes e.g. via an alpha-slider.
Additionally the size of each tile can be adapted according to the size of the chosen unit of time.

This and the possibility of coloring every tile corresponding to it´s representing value emphasises the graphical nature of this visualization technique. Each range of values can thus be mapped to a certain color and each tile will than be rendered with the color relating to it´s representing value.

It is farther possible to add a kind of bifocal navigation to a tile map, allowing the user to select certain sectors or lines of the tile-matrix.

Finally a hover function can be implemented to easily provide the user with the detailed value corresponding to a single tile.

=== Which technique for which purpose ===

* Zooming: The possibility of varying the unit/entity of time.

* Selection: Bifocal navigation allows selection of a single line of the dataset.

* Color Encoding: Gray-Scale vs. couloured tiles. Number/Diversity of colors used.

* Size Encoding: The size of each tile can be adapted to the chosen unit of time.

== References ==
[Friendly, 2006] Michael Friendly. Gallery of Data Visualization. York University: Statistical Consulting Service and Psychology Department. Accessed: 27.11.2006. [http://www.ecn.wfu.edu/SCS/Gallery/ Gallery of Data Visualization]

[Mintz et al., 1997] Mintz, D., Fitz-Simons, T., and Wayland, M.. Tracking Air Quality Trends with SAS/GRAPH. In ''Proceedings of the 22nd Annual SAS User Group International Conference (SUGI97)'', pages 807–812, 1997. [http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/papers/tilemaps-PAPER173.PDF PDF]

== Links ==
* [[Teaching:TUW_-_UE_InfoVis_WS_2006/07_-_Gruppe_02_-_Aufgabe_3_-_Prototype|Prototype]]

* [[Teaching:TUW_-_UE_InfoVis_WS_2006/07_-_Gruppe_02|InfoVis:Wiki Gruppe 2 Startseite]]

* [[Teaching:TUW_-_UE_InfoVis_WS_2006/07|InfoVis:Wiki UE Homepage]]

* [http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/index.html UE InfoVis]

Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 02 - Aufgabe 3 - Technique

2006-12-01T21:39:10Z

UE-InfoVis0607 9815963: /* Which technique for which purpose */

=Tile Maps=

== What are Tile Maps ==

===Summary===

{{Quotation|The tile map is a useful semi-graphical display for data with seasonal variation. |[Friendly, 2006]}}

{{Quotation|The Tile map, if carefully constructed, can convey complicated temoral patterns in an easily understood manner.|[Mintz et al., 1997]}}

===Images===

[[Image:Tilemaps_bw.jpg | Tilemap (greyscale)]]

Figure 1: a tilemap showing different levels of ocone-concentration in different shades of grey [Mintz et al., 1997].

[[Image:Tilemaps_color.jpg | Tilemap (color)]]

Figure2: ocone-concentration over several years, color-coded [Friendly, 2006].

===Description===

A tile map is a representation of a discrete - respectively quantized (discretion by quantization)- two-dimensional dataset, where each dataset-entry is represented by a colored square (tile). Usually the first dimension is an instance of time (like one day, hour, etc), and with each entry representing the same amount of time. The second dimension then represents some arbitray data, like the amount of rain for that day, the average temperature for a certain amount of time, or the concentration of ocone for a certain day (like in figure 2).

The speciality of this visualization technique is the arrangement of the time-axis: it is not a straight line, but rather a zigzag-line thus forming a block of a bigger time-entity from many smaller entities. For better understanding see figure 1: there is one tile for each day. The days are grouped into vertical lines of one week each, and the weeks are aligned along the horizontal axis forming months and consequently a whole year.
As in figure 2 several of these bigger entities can again be arranged along a vertical axis thus providing a quick overview over a long period of time which makes it possible to easily detect certain trends in the dataset.

The values for each time-entity can be coded by color or shades of grey. In following the function to give a quick overview there should not be used to many levels of colors. Furthermore the assignment of values to colors might not be linear: eg in figure 2 there are four levels of ozone-concentration, but the last level covering 50% of the concentration-spectrum.

===Notes===

Maybe there could be used (almost) continuous values for the second dimension, by mapping the whole dataset on a big-enough color-space. That might also appeal to the time-dimension by increasing time-resolution, but possibly this would result in a loss of simplicity and overview, which is the biggest strength of the tile maps.

== Visual Mapping ==

=== Introduction ===
The aim of the visual representation with tile maps is to abstract and simplify seasonal patterns. This makes it easier to recognize patterns or to compare them.

=== Visualisation / Abstraction ===
With this visualization technique the measured data (in our case weather) is represented by "tiles" (squares) which are arranged in 2 dimesions. Every "tile" is represent a certain amount of time. E.g. the images above showing a tile map where every "tile" representing a day which are vertically grouped into weeks. So the chronological sequence is illustrated vertical, from top to bottom, and horizontal, from left to right ... like a 90 degree rotated calendar. The tile map can also be used to display other temporal patterns. For example, displaying diurnal patterns would work much the same way, except each tile represents an hour of the day and would be vertically grouped into days. [Mintz et al., 1997]

The value of the measured data is illustrated by the color or color intensity of the "tiles". For example a light shade indicating low values, darker shades indicating higher values. [Mintz et al., 1997]

== Interaction practices ==

=== Considerations ===

Tile maps are mainly used to visualize temporal patterns. A suggesting first step of adding interactivity to a tile map could be added with the possibility of regulating the timeframe of the analyzed dataset.
Depending on the granularity of the given data-stream(s) it is also possible to add a way of modifying the size of the time units.

In the given example of an weather data analysis this could be implemented by letting the user refine or modify the analysed units of time from years to month or days or even smaller unit-sizes e.g. via an alpha-slider.
Additionally the size of each tile can be adapted according to the size of the chosen unit of time.

This and the possibility of coloring every tile corresponding to it´s representing value emphasises the graphical nature of this visualization technique. Each range of values can thus be mapped to a certain color and each tile will than be rendered with the color relating to it´s representing value.

It is farther possible to add a kind of bifocal navigation to a tile map, allowing the user to select certain sectors or lines of the tile-matrix.

Finally a hover function can be implemented to easily provide the user with the detailed value corresponding to a single tile.

=== Which technique for which purpose ===

* Zooming: The possibility of varying the unit/entity of time.

* Selection: Bifocal navigation allows selection of a single line of the dataset.

* Variation of Color: Gray-Scale vs. couloured tiles. Number/Diversity of colors used.

* Variation in Size: The size of each tile can be adapted to the chosen unit of time.

== References ==
[Friendly, 2006] Michael Friendly. Gallery of Data Visualization. York University: Statistical Consulting Service and Psychology Department. Accessed: 27.11.2006. [http://www.ecn.wfu.edu/SCS/Gallery/ Gallery of Data Visualization]

[Mintz et al., 1997] Mintz, D., Fitz-Simons, T., and Wayland, M.. Tracking Air Quality Trends with SAS/GRAPH. In ''Proceedings of the 22nd Annual SAS User Group International Conference (SUGI97)'', pages 807–812, 1997. [http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/papers/tilemaps-PAPER173.PDF PDF]

== Links ==
* [[Teaching:TUW_-_UE_InfoVis_WS_2006/07_-_Gruppe_02_-_Aufgabe_3_-_Prototype|Prototype]]

* [[Teaching:TUW_-_UE_InfoVis_WS_2006/07_-_Gruppe_02|InfoVis:Wiki Gruppe 2 Startseite]]

* [[Teaching:TUW_-_UE_InfoVis_WS_2006/07|InfoVis:Wiki UE Homepage]]

* [http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/index.html UE InfoVis]

Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 02 - Aufgabe 3 - Technique

2006-12-01T21:38:52Z

UE-InfoVis0607 9815963: /* Which technique for which purpos */

=Tile Maps=

== What are Tile Maps ==

===Summary===

{{Quotation|The tile map is a useful semi-graphical display for data with seasonal variation. |[Friendly, 2006]}}

{{Quotation|The Tile map, if carefully constructed, can convey complicated temoral patterns in an easily understood manner.|[Mintz et al., 1997]}}

===Images===

[[Image:Tilemaps_bw.jpg | Tilemap (greyscale)]]

Figure 1: a tilemap showing different levels of ocone-concentration in different shades of grey [Mintz et al., 1997].

[[Image:Tilemaps_color.jpg | Tilemap (color)]]

Figure2: ocone-concentration over several years, color-coded [Friendly, 2006].

===Description===

A tile map is a representation of a discrete - respectively quantized (discretion by quantization)- two-dimensional dataset, where each dataset-entry is represented by a colored square (tile). Usually the first dimension is an instance of time (like one day, hour, etc), and with each entry representing the same amount of time. The second dimension then represents some arbitray data, like the amount of rain for that day, the average temperature for a certain amount of time, or the concentration of ocone for a certain day (like in figure 2).

The speciality of this visualization technique is the arrangement of the time-axis: it is not a straight line, but rather a zigzag-line thus forming a block of a bigger time-entity from many smaller entities. For better understanding see figure 1: there is one tile for each day. The days are grouped into vertical lines of one week each, and the weeks are aligned along the horizontal axis forming months and consequently a whole year.
As in figure 2 several of these bigger entities can again be arranged along a vertical axis thus providing a quick overview over a long period of time which makes it possible to easily detect certain trends in the dataset.

The values for each time-entity can be coded by color or shades of grey. In following the function to give a quick overview there should not be used to many levels of colors. Furthermore the assignment of values to colors might not be linear: eg in figure 2 there are four levels of ozone-concentration, but the last level covering 50% of the concentration-spectrum.

===Notes===

Maybe there could be used (almost) continuous values for the second dimension, by mapping the whole dataset on a big-enough color-space. That might also appeal to the time-dimension by increasing time-resolution, but possibly this would result in a loss of simplicity and overview, which is the biggest strength of the tile maps.

== Visual Mapping ==

=== Introduction ===
The aim of the visual representation with tile maps is to abstract and simplify seasonal patterns. This makes it easier to recognize patterns or to compare them.

=== Visualisation / Abstraction ===
With this visualization technique the measured data (in our case weather) is represented by "tiles" (squares) which are arranged in 2 dimesions. Every "tile" is represent a certain amount of time. E.g. the images above showing a tile map where every "tile" representing a day which are vertically grouped into weeks. So the chronological sequence is illustrated vertical, from top to bottom, and horizontal, from left to right ... like a 90 degree rotated calendar. The tile map can also be used to display other temporal patterns. For example, displaying diurnal patterns would work much the same way, except each tile represents an hour of the day and would be vertically grouped into days. [Mintz et al., 1997]

The value of the measured data is illustrated by the color or color intensity of the "tiles". For example a light shade indicating low values, darker shades indicating higher values. [Mintz et al., 1997]

== Interaction practices ==

=== Considerations ===

Tile maps are mainly used to visualize temporal patterns. A suggesting first step of adding interactivity to a tile map could be added with the possibility of regulating the timeframe of the analyzed dataset.
Depending on the granularity of the given data-stream(s) it is also possible to add a way of modifying the size of the time units.

In the given example of an weather data analysis this could be implemented by letting the user refine or modify the analysed units of time from years to month or days or even smaller unit-sizes e.g. via an alpha-slider.
Additionally the size of each tile can be adapted according to the size of the chosen unit of time.

This and the possibility of coloring every tile corresponding to it´s representing value emphasises the graphical nature of this visualization technique. Each range of values can thus be mapped to a certain color and each tile will than be rendered with the color relating to it´s representing value.

It is farther possible to add a kind of bifocal navigation to a tile map, allowing the user to select certain sectors or lines of the tile-matrix.

Finally a hover function can be implemented to easily provide the user with the detailed value corresponding to a single tile.

=== Which technique for which purpose ===

* Zooming: The possibility of varying the unit/entity of time.

* Selection: Bifocal navigation allows selection of a single line of the dataset.

* Variation of Color: Gray-Scale vs. couloured tiles. Number/Diversity of colors used.

* Variation in Size: The size of each tile can be adapted to the chosen units of data.

== References ==
[Friendly, 2006] Michael Friendly. Gallery of Data Visualization. York University: Statistical Consulting Service and Psychology Department. Accessed: 27.11.2006. [http://www.ecn.wfu.edu/SCS/Gallery/ Gallery of Data Visualization]

[Mintz et al., 1997] Mintz, D., Fitz-Simons, T., and Wayland, M.. Tracking Air Quality Trends with SAS/GRAPH. In ''Proceedings of the 22nd Annual SAS User Group International Conference (SUGI97)'', pages 807–812, 1997. [http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/papers/tilemaps-PAPER173.PDF PDF]

== Links ==
* [[Teaching:TUW_-_UE_InfoVis_WS_2006/07_-_Gruppe_02_-_Aufgabe_3_-_Prototype|Prototype]]

* [[Teaching:TUW_-_UE_InfoVis_WS_2006/07_-_Gruppe_02|InfoVis:Wiki Gruppe 2 Startseite]]

* [[Teaching:TUW_-_UE_InfoVis_WS_2006/07|InfoVis:Wiki UE Homepage]]

* [http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/index.html UE InfoVis]

Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 02 - Aufgabe 3 - Technique

2006-12-01T21:36:54Z

UE-InfoVis0607 9815963: /* Which technique for which purpos */

=Tile Maps=

== What are Tile Maps ==

===Summary===

{{Quotation|The tile map is a useful semi-graphical display for data with seasonal variation. |[Friendly, 2006]}}

{{Quotation|The Tile map, if carefully constructed, can convey complicated temoral patterns in an easily understood manner.|[Mintz et al., 1997]}}

===Images===

[[Image:Tilemaps_bw.jpg | Tilemap (greyscale)]]

Figure 1: a tilemap showing different levels of ocone-concentration in different shades of grey [Mintz et al., 1997].

[[Image:Tilemaps_color.jpg | Tilemap (color)]]

Figure2: ocone-concentration over several years, color-coded [Friendly, 2006].

===Description===

A tile map is a representation of a discrete - respectively quantized (discretion by quantization)- two-dimensional dataset, where each dataset-entry is represented by a colored square (tile). Usually the first dimension is an instance of time (like one day, hour, etc), and with each entry representing the same amount of time. The second dimension then represents some arbitray data, like the amount of rain for that day, the average temperature for a certain amount of time, or the concentration of ocone for a certain day (like in figure 2).

The speciality of this visualization technique is the arrangement of the time-axis: it is not a straight line, but rather a zigzag-line thus forming a block of a bigger time-entity from many smaller entities. For better understanding see figure 1: there is one tile for each day. The days are grouped into vertical lines of one week each, and the weeks are aligned along the horizontal axis forming months and consequently a whole year.
As in figure 2 several of these bigger entities can again be arranged along a vertical axis thus providing a quick overview over a long period of time which makes it possible to easily detect certain trends in the dataset.

The values for each time-entity can be coded by color or shades of grey. In following the function to give a quick overview there should not be used to many levels of colors. Furthermore the assignment of values to colors might not be linear: eg in figure 2 there are four levels of ozone-concentration, but the last level covering 50% of the concentration-spectrum.

===Notes===

Maybe there could be used (almost) continuous values for the second dimension, by mapping the whole dataset on a big-enough color-space. That might also appeal to the time-dimension by increasing time-resolution, but possibly this would result in a loss of simplicity and overview, which is the biggest strength of the tile maps.

== Visual Mapping ==

=== Introduction ===
The aim of the visual representation with tile maps is to abstract and simplify seasonal patterns. This makes it easier to recognize patterns or to compare them.

=== Visualisation / Abstraction ===
With this visualization technique the measured data (in our case weather) is represented by "tiles" (squares) which are arranged in 2 dimesions. Every "tile" is represent a certain amount of time. E.g. the images above showing a tile map where every "tile" representing a day which are vertically grouped into weeks. So the chronological sequence is illustrated vertical, from top to bottom, and horizontal, from left to right ... like a 90 degree rotated calendar. The tile map can also be used to display other temporal patterns. For example, displaying diurnal patterns would work much the same way, except each tile represents an hour of the day and would be vertically grouped into days. [Mintz et al., 1997]

The value of the measured data is illustrated by the color or color intensity of the "tiles". For example a light shade indicating low values, darker shades indicating higher values. [Mintz et al., 1997]

== Interaction practices ==

=== Considerations ===

Tile maps are mainly used to visualize temporal patterns. A suggesting first step of adding interactivity to a tile map could be added with the possibility of regulating the timeframe of the analyzed dataset.
Depending on the granularity of the given data-stream(s) it is also possible to add a way of modifying the size of the time units.

In the given example of an weather data analysis this could be implemented by letting the user refine or modify the analysed units of time from years to month or days or even smaller unit-sizes e.g. via an alpha-slider.
Additionally the size of each tile can be adapted according to the size of the chosen unit of time.

This and the possibility of coloring every tile corresponding to it´s representing value emphasises the graphical nature of this visualization technique. Each range of values can thus be mapped to a certain color and each tile will than be rendered with the color relating to it´s representing value.

It is farther possible to add a kind of bifocal navigation to a tile map, allowing the user to select certain sectors or lines of the tile-matrix.

Finally a hover function can be implemented to easily provide the user with the detailed value corresponding to a single tile.

=== Which technique for which purpos ===

A more formal way of describing those ways of interaction:

* Zooming: The possibility of varying the unit/entity of time.

* Selection: Bifocal navigation allows selection of a single line of the dataset.

* Variation of Color: Gray-Scale vs. couloured tiles. Number/Diversity of colors used.

* Variation in Size: The size of each tile can be adapted to the chosen units of data.

== References ==
[Friendly, 2006] Michael Friendly. Gallery of Data Visualization. York University: Statistical Consulting Service and Psychology Department. Accessed: 27.11.2006. [http://www.ecn.wfu.edu/SCS/Gallery/ Gallery of Data Visualization]

[Mintz et al., 1997] Mintz, D., Fitz-Simons, T., and Wayland, M.. Tracking Air Quality Trends with SAS/GRAPH. In ''Proceedings of the 22nd Annual SAS User Group International Conference (SUGI97)'', pages 807–812, 1997. [http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/papers/tilemaps-PAPER173.PDF PDF]

== Links ==
* [[Teaching:TUW_-_UE_InfoVis_WS_2006/07_-_Gruppe_02_-_Aufgabe_3_-_Prototype|Prototype]]

* [[Teaching:TUW_-_UE_InfoVis_WS_2006/07_-_Gruppe_02|InfoVis:Wiki Gruppe 2 Startseite]]

* [[Teaching:TUW_-_UE_InfoVis_WS_2006/07|InfoVis:Wiki UE Homepage]]

* [http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/index.html UE InfoVis]

Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 02 - Aufgabe 3 - Technique

2006-12-01T21:36:34Z

UE-InfoVis0607 9815963: /* Interaction practices */

=Tile Maps=

== What are Tile Maps ==

===Summary===

{{Quotation|The tile map is a useful semi-graphical display for data with seasonal variation. |[Friendly, 2006]}}

{{Quotation|The Tile map, if carefully constructed, can convey complicated temoral patterns in an easily understood manner.|[Mintz et al., 1997]}}

===Images===

[[Image:Tilemaps_bw.jpg | Tilemap (greyscale)]]

Figure 1: a tilemap showing different levels of ocone-concentration in different shades of grey [Mintz et al., 1997].

[[Image:Tilemaps_color.jpg | Tilemap (color)]]

Figure2: ocone-concentration over several years, color-coded [Friendly, 2006].

===Description===

A tile map is a representation of a discrete - respectively quantized (discretion by quantization)- two-dimensional dataset, where each dataset-entry is represented by a colored square (tile). Usually the first dimension is an instance of time (like one day, hour, etc), and with each entry representing the same amount of time. The second dimension then represents some arbitray data, like the amount of rain for that day, the average temperature for a certain amount of time, or the concentration of ocone for a certain day (like in figure 2).

The speciality of this visualization technique is the arrangement of the time-axis: it is not a straight line, but rather a zigzag-line thus forming a block of a bigger time-entity from many smaller entities. For better understanding see figure 1: there is one tile for each day. The days are grouped into vertical lines of one week each, and the weeks are aligned along the horizontal axis forming months and consequently a whole year.
As in figure 2 several of these bigger entities can again be arranged along a vertical axis thus providing a quick overview over a long period of time which makes it possible to easily detect certain trends in the dataset.

The values for each time-entity can be coded by color or shades of grey. In following the function to give a quick overview there should not be used to many levels of colors. Furthermore the assignment of values to colors might not be linear: eg in figure 2 there are four levels of ozone-concentration, but the last level covering 50% of the concentration-spectrum.

===Notes===

Maybe there could be used (almost) continuous values for the second dimension, by mapping the whole dataset on a big-enough color-space. That might also appeal to the time-dimension by increasing time-resolution, but possibly this would result in a loss of simplicity and overview, which is the biggest strength of the tile maps.

== Visual Mapping ==

=== Introduction ===
The aim of the visual representation with tile maps is to abstract and simplify seasonal patterns. This makes it easier to recognize patterns or to compare them.

=== Visualisation / Abstraction ===
With this visualization technique the measured data (in our case weather) is represented by "tiles" (squares) which are arranged in 2 dimesions. Every "tile" is represent a certain amount of time. E.g. the images above showing a tile map where every "tile" representing a day which are vertically grouped into weeks. So the chronological sequence is illustrated vertical, from top to bottom, and horizontal, from left to right ... like a 90 degree rotated calendar. The tile map can also be used to display other temporal patterns. For example, displaying diurnal patterns would work much the same way, except each tile represents an hour of the day and would be vertically grouped into days. [Mintz et al., 1997]

The value of the measured data is illustrated by the color or color intensity of the "tiles". For example a light shade indicating low values, darker shades indicating higher values. [Mintz et al., 1997]

== Interaction practices ==

=== Considerations ===

Tile maps are mainly used to visualize temporal patterns. A suggesting first step of adding interactivity to a tile map could be added with the possibility of regulating the timeframe of the analyzed dataset.
Depending on the granularity of the given data-stream(s) it is also possible to add a way of modifying the size of the time units.

In the given example of an weather data analysis this could be implemented by letting the user refine or modify the analysed units of time from years to month or days or even smaller unit-sizes e.g. via an alpha-slider.
Additionally the size of each tile can be adapted according to the size of the chosen unit of time.

This and the possibility of coloring every tile corresponding to it´s representing value emphasises the graphical nature of this visualization technique. Each range of values can thus be mapped to a certain color and each tile will than be rendered with the color relating to it´s representing value.

It is farther possible to add a kind of bifocal navigation to a tile map, allowing the user to select certain sectors or lines of the tile-matrix.

Finally a hover function can be implemented to easily provide the user with the detailed value corresponding to a single tile.

=== Which technique for which purpos ===

A more formal way of describing those ways of interaction:

* Zooming: The possibility of varying the unit/entity of time.

* Selection: Bifocal navigation allows selection of a single line of the dataset.

* Color: Gray-Scale vs. couloured tiles.
Number/Diversity of colors used.

* Size: The size of each tile can be adapted to the chosen units of data.

== References ==
[Friendly, 2006] Michael Friendly. Gallery of Data Visualization. York University: Statistical Consulting Service and Psychology Department. Accessed: 27.11.2006. [http://www.ecn.wfu.edu/SCS/Gallery/ Gallery of Data Visualization]

[Mintz et al., 1997] Mintz, D., Fitz-Simons, T., and Wayland, M.. Tracking Air Quality Trends with SAS/GRAPH. In ''Proceedings of the 22nd Annual SAS User Group International Conference (SUGI97)'', pages 807–812, 1997. [http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/papers/tilemaps-PAPER173.PDF PDF]

== Links ==
* [[Teaching:TUW_-_UE_InfoVis_WS_2006/07_-_Gruppe_02_-_Aufgabe_3_-_Prototype|Prototype]]

* [[Teaching:TUW_-_UE_InfoVis_WS_2006/07_-_Gruppe_02|InfoVis:Wiki Gruppe 2 Startseite]]

* [[Teaching:TUW_-_UE_InfoVis_WS_2006/07|InfoVis:Wiki UE Homepage]]

* [http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/index.html UE InfoVis]

Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 02 - Aufgabe 3 - Technique

2006-12-01T21:35:02Z

UE-InfoVis0607 9815963: /* Techniques */

=Tile Maps=

== What are Tile Maps ==

===Summary===

{{Quotation|The tile map is a useful semi-graphical display for data with seasonal variation. |[Friendly, 2006]}}

{{Quotation|The Tile map, if carefully constructed, can convey complicated temoral patterns in an easily understood manner.|[Mintz et al., 1997]}}

===Images===

[[Image:Tilemaps_bw.jpg | Tilemap (greyscale)]]

Figure 1: a tilemap showing different levels of ocone-concentration in different shades of grey [Mintz et al., 1997].

[[Image:Tilemaps_color.jpg | Tilemap (color)]]

Figure2: ocone-concentration over several years, color-coded [Friendly, 2006].

===Description===

A tile map is a representation of a discrete - respectively quantized (discretion by quantization)- two-dimensional dataset, where each dataset-entry is represented by a colored square (tile). Usually the first dimension is an instance of time (like one day, hour, etc), and with each entry representing the same amount of time. The second dimension then represents some arbitray data, like the amount of rain for that day, the average temperature for a certain amount of time, or the concentration of ocone for a certain day (like in figure 2).

The speciality of this visualization technique is the arrangement of the time-axis: it is not a straight line, but rather a zigzag-line thus forming a block of a bigger time-entity from many smaller entities. For better understanding see figure 1: there is one tile for each day. The days are grouped into vertical lines of one week each, and the weeks are aligned along the horizontal axis forming months and consequently a whole year.
As in figure 2 several of these bigger entities can again be arranged along a vertical axis thus providing a quick overview over a long period of time which makes it possible to easily detect certain trends in the dataset.

The values for each time-entity can be coded by color or shades of grey. In following the function to give a quick overview there should not be used to many levels of colors. Furthermore the assignment of values to colors might not be linear: eg in figure 2 there are four levels of ozone-concentration, but the last level covering 50% of the concentration-spectrum.

===Notes===

Maybe there could be used (almost) continuous values for the second dimension, by mapping the whole dataset on a big-enough color-space. That might also appeal to the time-dimension by increasing time-resolution, but possibly this would result in a loss of simplicity and overview, which is the biggest strength of the tile maps.

== Visual Mapping ==

=== Introduction ===
The aim of the visual representation with tile maps is to abstract and simplify seasonal patterns. This makes it easier to recognize patterns or to compare them.

=== Visualisation / Abstraction ===
With this visualization technique the measured data (in our case weather) is represented by "tiles" (squares) which are arranged in 2 dimesions. Every "tile" is represent a certain amount of time. E.g. the images above showing a tile map where every "tile" representing a day which are vertically grouped into weeks. So the chronological sequence is illustrated vertical, from top to bottom, and horizontal, from left to right ... like a 90 degree rotated calendar. The tile map can also be used to display other temporal patterns. For example, displaying diurnal patterns would work much the same way, except each tile represents an hour of the day and would be vertically grouped into days. [Mintz et al., 1997]

The value of the measured data is illustrated by the color or color intensity of the "tiles". For example a light shade indicating low values, darker shades indicating higher values. [Mintz et al., 1997]

== Interaction practices ==

=== Considerations ===

Tile maps are mainly used to visualize temporal patterns. A suggesting first step of adding interactivity to a tile map could be added with the possibility of regulating the timeframe of the analyzed dataset.
Depending on the granularity of the given data-stream(s) it is also possible to add a way of modifying the size of the time units.

In the given example of an weather data analysis this could be implemented by letting the user refine or modify the analysed units of time from years to month or days or even smaller unit-sizes e.g. via an alpha-slider.
Additionally the size of each tile can be adapted according to the size of the chosen unit of time.

This and the possibility of coloring every tile corresponding to it´s representing value emphasises the graphical nature of this visualization technique. Each range of values can thus be mapped to a certain color and each tile will than be rendered with the color relating to it´s representing value.

It is farther possible to add a kind of bifocal navigation to a tile map, allowing the user to select certain sectors or lines of the tile-matrix.

Finally a hover function can be implemented to easily provide the user with the detailed value corresponding to a single tile.

=== Which technique for which purpos ===

A more formal way of describing those ways of interaction:

* Zooming:
The possibility of varying the unit/entity of time.

* Selection:
Bifocal navigation allows selection of a single line of the dataset.

* Color:
Gray-Scale vs. couloured tiles.
Number/Diversity of colors used.

* Size:
The size of each tile can be adapted to the chosen units of data.

== References ==
[Friendly, 2006] Michael Friendly. Gallery of Data Visualization. York University: Statistical Consulting Service and Psychology Department. Accessed: 27.11.2006. [http://www.ecn.wfu.edu/SCS/Gallery/ Gallery of Data Visualization]

[Mintz et al., 1997] Mintz, D., Fitz-Simons, T., and Wayland, M.. Tracking Air Quality Trends with SAS/GRAPH. In ''Proceedings of the 22nd Annual SAS User Group International Conference (SUGI97)'', pages 807–812, 1997. [http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/papers/tilemaps-PAPER173.PDF PDF]

== Links ==
* [[Teaching:TUW_-_UE_InfoVis_WS_2006/07_-_Gruppe_02_-_Aufgabe_3_-_Prototype|Prototype]]

* [[Teaching:TUW_-_UE_InfoVis_WS_2006/07_-_Gruppe_02|InfoVis:Wiki Gruppe 2 Startseite]]

* [[Teaching:TUW_-_UE_InfoVis_WS_2006/07|InfoVis:Wiki UE Homepage]]

* [http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/index.html UE InfoVis]

Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 02 - Aufgabe 3 - Technique

2006-12-01T21:32:44Z

UE-InfoVis0607 9815963: /* considerations */

=Tile Maps=

== What are Tile Maps ==

===Summary===

{{Quotation|The tile map is a useful semi-graphical display for data with seasonal variation. |[Friendly, 2006]}}

{{Quotation|The Tile map, if carefully constructed, can convey complicated temoral patterns in an easily understood manner.|[Mintz et al., 1997]}}

===Images===

[[Image:Tilemaps_bw.jpg | Tilemap (greyscale)]]

Figure 1: a tilemap showing different levels of ocone-concentration in different shades of grey [Mintz et al., 1997].

[[Image:Tilemaps_color.jpg | Tilemap (color)]]

Figure2: ocone-concentration over several years, color-coded [Friendly, 2006].

===Description===

A tile map is a representation of a discrete - respectively quantized (discretion by quantization)- two-dimensional dataset, where each dataset-entry is represented by a colored square (tile). Usually the first dimension is an instance of time (like one day, hour, etc), and with each entry representing the same amount of time. The second dimension then represents some arbitray data, like the amount of rain for that day, the average temperature for a certain amount of time, or the concentration of ocone for a certain day (like in figure 2).

The speciality of this visualization technique is the arrangement of the time-axis: it is not a straight line, but rather a zigzag-line thus forming a block of a bigger time-entity from many smaller entities. For better understanding see figure 1: there is one tile for each day. The days are grouped into vertical lines of one week each, and the weeks are aligned along the horizontal axis forming months and consequently a whole year.
As in figure 2 several of these bigger entities can again be arranged along a vertical axis thus providing a quick overview over a long period of time which makes it possible to easily detect certain trends in the dataset.

The values for each time-entity can be coded by color or shades of grey. In following the function to give a quick overview there should not be used to many levels of colors. Furthermore the assignment of values to colors might not be linear: eg in figure 2 there are four levels of ozone-concentration, but the last level covering 50% of the concentration-spectrum.

===Notes===

Maybe there could be used (almost) continuous values for the second dimension, by mapping the whole dataset on a big-enough color-space. That might also appeal to the time-dimension by increasing time-resolution, but possibly this would result in a loss of simplicity and overview, which is the biggest strength of the tile maps.

== Visual Mapping ==

=== Introduction ===
The aim of the visual representation with tile maps is to abstract and simplify seasonal patterns. This makes it easier to recognize patterns or to compare them.

=== Visualisation / Abstraction ===
With this visualization technique the measured data (in our case weather) is represented by "tiles" (squares) which are arranged in 2 dimesions. Every "tile" is represent a certain amount of time. E.g. the images above showing a tile map where every "tile" representing a day which are vertically grouped into weeks. So the chronological sequence is illustrated vertical, from top to bottom, and horizontal, from left to right ... like a 90 degree rotated calendar. The tile map can also be used to display other temporal patterns. For example, displaying diurnal patterns would work much the same way, except each tile represents an hour of the day and would be vertically grouped into days. [Mintz et al., 1997]

The value of the measured data is illustrated by the color or color intensity of the "tiles". For example a light shade indicating low values, darker shades indicating higher values. [Mintz et al., 1997]

== Interaction practices ==

=== Considerations ===

Tile maps are mainly used to visualize temporal patterns. A suggesting first step of adding interactivity to a tile map could be added with the possibility of regulating the timeframe of the analyzed dataset.
Depending on the granularity of the given data-stream(s) it is also possible to add a way of modifying the size of the time units.

In the given example of an weather data analysis this could be implemented by letting the user refine or modify the analysed units of time from years to month or days or even smaller unit-sizes e.g. via an alpha-slider.
Additionally the size of each tile can be adapted according to the size of the chosen unit of time.

This and the possibility of coloring every tile corresponding to it´s representing value emphasises the graphical nature of this visualization technique. Each range of values can thus be mapped to a certain color and each tile will than be rendered with the color relating to it´s representing value.

It is farther possible to add a kind of bifocal navigation to a tile map, allowing the user to select certain sectors or lines of the tile-matrix.

Finally a hover function can be implemented to easily provide the user with the detailed value corresponding to a single tile.

=== Techniques ===

A more formal way of describing those ways of interaction:

* Zooming:
The possibility of varying the unit/entity of time.

* Selection:
Bifocal navigation allows selection of a single line of the dataset.

* Color:
Gray-Scale vs. couloured tiles.
Number/Diversity of colors used.

* Size:
The size of each tile can be adapted to the chosen units of data.

== References ==
[Friendly, 2006] Michael Friendly. Gallery of Data Visualization. York University: Statistical Consulting Service and Psychology Department. Accessed: 27.11.2006. [http://www.ecn.wfu.edu/SCS/Gallery/ Gallery of Data Visualization]

[Mintz et al., 1997] Mintz, D., Fitz-Simons, T., and Wayland, M.. Tracking Air Quality Trends with SAS/GRAPH. In ''Proceedings of the 22nd Annual SAS User Group International Conference (SUGI97)'', pages 807–812, 1997. [http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/papers/tilemaps-PAPER173.PDF PDF]

== Links ==
* [[Teaching:TUW_-_UE_InfoVis_WS_2006/07_-_Gruppe_02_-_Aufgabe_3_-_Prototype|Prototype]]

* [[Teaching:TUW_-_UE_InfoVis_WS_2006/07_-_Gruppe_02|InfoVis:Wiki Gruppe 2 Startseite]]

* [[Teaching:TUW_-_UE_InfoVis_WS_2006/07|InfoVis:Wiki UE Homepage]]

* [http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/index.html UE InfoVis]

Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 02 - Aufgabe 3 - Technique

2006-12-01T21:31:51Z

UE-InfoVis0607 9815963:

=Tile Maps=

== What are Tile Maps ==

===Summary===

{{Quotation|The tile map is a useful semi-graphical display for data with seasonal variation. |[Friendly, 2006]}}

{{Quotation|The Tile map, if carefully constructed, can convey complicated temoral patterns in an easily understood manner.|[Mintz et al., 1997]}}

===Images===

[[Image:Tilemaps_bw.jpg | Tilemap (greyscale)]]

Figure 1: a tilemap showing different levels of ocone-concentration in different shades of grey [Mintz et al., 1997].

[[Image:Tilemaps_color.jpg | Tilemap (color)]]

Figure2: ocone-concentration over several years, color-coded [Friendly, 2006].

===Description===

A tile map is a representation of a discrete - respectively quantized (discretion by quantization)- two-dimensional dataset, where each dataset-entry is represented by a colored square (tile). Usually the first dimension is an instance of time (like one day, hour, etc), and with each entry representing the same amount of time. The second dimension then represents some arbitray data, like the amount of rain for that day, the average temperature for a certain amount of time, or the concentration of ocone for a certain day (like in figure 2).

The speciality of this visualization technique is the arrangement of the time-axis: it is not a straight line, but rather a zigzag-line thus forming a block of a bigger time-entity from many smaller entities. For better understanding see figure 1: there is one tile for each day. The days are grouped into vertical lines of one week each, and the weeks are aligned along the horizontal axis forming months and consequently a whole year.
As in figure 2 several of these bigger entities can again be arranged along a vertical axis thus providing a quick overview over a long period of time which makes it possible to easily detect certain trends in the dataset.

The values for each time-entity can be coded by color or shades of grey. In following the function to give a quick overview there should not be used to many levels of colors. Furthermore the assignment of values to colors might not be linear: eg in figure 2 there are four levels of ozone-concentration, but the last level covering 50% of the concentration-spectrum.

===Notes===

Maybe there could be used (almost) continuous values for the second dimension, by mapping the whole dataset on a big-enough color-space. That might also appeal to the time-dimension by increasing time-resolution, but possibly this would result in a loss of simplicity and overview, which is the biggest strength of the tile maps.

== Visual Mapping ==

=== Introduction ===
The aim of the visual representation with tile maps is to abstract and simplify seasonal patterns. This makes it easier to recognize patterns or to compare them.

=== Visualisation / Abstraction ===
With this visualization technique the measured data (in our case weather) is represented by "tiles" (squares) which are arranged in 2 dimesions. Every "tile" is represent a certain amount of time. E.g. the images above showing a tile map where every "tile" representing a day which are vertically grouped into weeks. So the chronological sequence is illustrated vertical, from top to bottom, and horizontal, from left to right ... like a 90 degree rotated calendar. The tile map can also be used to display other temporal patterns. For example, displaying diurnal patterns would work much the same way, except each tile represents an hour of the day and would be vertically grouped into days. [Mintz et al., 1997]

The value of the measured data is illustrated by the color or color intensity of the "tiles". For example a light shade indicating low values, darker shades indicating higher values. [Mintz et al., 1997]

== Interaction practices ==

=== considerations ===

Tile maps are mainly used to visualize temporal patterns. A suggesting first step of adding interactivity to a tile map could be added with the possibility of regulating the timeframe of the analyzed dataset.
Depending on the granularity of the given data-stream(s) it is also possible to add a way of modifying the size of the time units.

In the given example of an weather data analysis this could be implemented by letting the user refine or modify the analysed units of time from years to month or days or even smaller unit-sizes e.g. via an alpha-slider.
Additionally the size of each tile can be adapted according to the size of the chosen unit of time.

This and the possibility of coloring every tile corresponding to it´s representing value emphasises the graphical nature of this visualization technique. Each range of values can thus be mapped to a certain color and each tile will than be rendered with the color relating to it´s representing value.

It is farther possible to add a kind of bifocal navigation to a tile map, allowing the user to select certain sectors or lines of the tile-matrix.

Finally a hover function can be implemented to easily provide the user with the detailed value corresponding to a single tile.

=== Techniques ===

A more formal way of describing those ways of interaction:

* Zooming:
The possibility of varying the unit/entity of time.

* Selection:
Bifocal navigation allows selection of a single line of the dataset.

* Color:
Gray-Scale vs. couloured tiles.
Number/Diversity of colors used.

* Size:
The size of each tile can be adapted to the chosen units of data.

== References ==
[Friendly, 2006] Michael Friendly. Gallery of Data Visualization. York University: Statistical Consulting Service and Psychology Department. Accessed: 27.11.2006. [http://www.ecn.wfu.edu/SCS/Gallery/ Gallery of Data Visualization]

[Mintz et al., 1997] Mintz, D., Fitz-Simons, T., and Wayland, M.. Tracking Air Quality Trends with SAS/GRAPH. In ''Proceedings of the 22nd Annual SAS User Group International Conference (SUGI97)'', pages 807–812, 1997. [http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/papers/tilemaps-PAPER173.PDF PDF]

== Links ==
* [[Teaching:TUW_-_UE_InfoVis_WS_2006/07_-_Gruppe_02_-_Aufgabe_3_-_Prototype|Prototype]]

* [[Teaching:TUW_-_UE_InfoVis_WS_2006/07_-_Gruppe_02|InfoVis:Wiki Gruppe 2 Startseite]]

* [[Teaching:TUW_-_UE_InfoVis_WS_2006/07|InfoVis:Wiki UE Homepage]]

* [http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/index.html UE InfoVis]

Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 02 - Aufgabe 3 - Technique

2006-12-01T21:31:25Z

UE-InfoVis0607 9815963: /* Techniques/Functions */

=Tile Maps=

== What are Tile Maps ==

===Summary===

{{Quotation|The tile map is a useful semi-graphical display for data with seasonal variation. |[Friendly, 2006]}}

{{Quotation|The Tile map, if carefully constructed, can convey complicated temoral patterns in an easily understood manner.|[Mintz et al., 1997]}}

===Images===

[[Image:Tilemaps_bw.jpg | Tilemap (greyscale)]]

Figure 1: a tilemap showing different levels of ocone-concentration in different shades of grey [Mintz et al., 1997].

[[Image:Tilemaps_color.jpg | Tilemap (color)]]

Figure2: ocone-concentration over several years, color-coded [Friendly, 2006].

===Description===

A tile map is a representation of a discrete - respectively quantized (discretion by quantization)- two-dimensional dataset, where each dataset-entry is represented by a colored square (tile). Usually the first dimension is an instance of time (like one day, hour, etc), and with each entry representing the same amount of time. The second dimension then represents some arbitray data, like the amount of rain for that day, the average temperature for a certain amount of time, or the concentration of ocone for a certain day (like in figure 2).

The speciality of this visualization technique is the arrangement of the time-axis: it is not a straight line, but rather a zigzag-line thus forming a block of a bigger time-entity from many smaller entities. For better understanding see figure 1: there is one tile for each day. The days are grouped into vertical lines of one week each, and the weeks are aligned along the horizontal axis forming months and consequently a whole year.
As in figure 2 several of these bigger entities can again be arranged along a vertical axis thus providing a quick overview over a long period of time which makes it possible to easily detect certain trends in the dataset.

The values for each time-entity can be coded by color or shades of grey. In following the function to give a quick overview there should not be used to many levels of colors. Furthermore the assignment of values to colors might not be linear: eg in figure 2 there are four levels of ozone-concentration, but the last level covering 50% of the concentration-spectrum.

===Notes===

Maybe there could be used (almost) continuous values for the second dimension, by mapping the whole dataset on a big-enough color-space. That might also appeal to the time-dimension by increasing time-resolution, but possibly this would result in a loss of simplicity and overview, which is the biggest strength of the tile maps.

== Visual Mapping ==

=== Introduction ===
The aim of the visual representation with tile maps is to abstract and simplify seasonal patterns. This makes it easier to recognize patterns or to compare them.

=== Visualisation / Abstraction ===
With this visualization technique the measured data (in our case weather) is represented by "tiles" (squares) which are arranged in 2 dimesions. Every "tile" is represent a certain amount of time. E.g. the images above showing a tile map where every "tile" representing a day which are vertically grouped into weeks. So the chronological sequence is illustrated vertical, from top to bottom, and horizontal, from left to right ... like a 90 degree rotated calendar. The tile map can also be used to display other temporal patterns. For example, displaying diurnal patterns would work much the same way, except each tile represents an hour of the day and would be vertically grouped into days. [Mintz et al., 1997]

The value of the measured data is illustrated by the color or color intensity of the "tiles". For example a light shade indicating low values, darker shades indicating higher values. [Mintz et al., 1997]

== Interaction practices ==

=== considerations ===

Tile maps are mainly used to visualize temporal patterns. A suggesting first step of adding interactivity to a tile map could be added with the possibility of regulating the timeframe of the analyzed dataset.
Depending on the granularity of the given data-stream(s) it is also possible to add a way of modifying the size of the time units.

In the given example of an weather data analysis this could be implemented by letting the user refine or modify the analysed units of time from years to month or days or even smaller unit-sizes e.g. via an alpha-slider.
Additionally the size of each tile can be adapted according to the size of the chosen unit of time.

This and the possibility of coloring every tile corresponding to it´s representing value emphasises the graphical nature of this visualization technique. Each range of values can thus be mapped to a certain color and each tile will than be rendered with the color relating to it´s representing value.

It is farther possible to add a kind of bifocal navigation to a tile map, allowing the user to select certain sectors or lines of the tile-matrix.

Finally a hover function can be implemented to easily provide the user with the detailed value corresponding to a single tile.

=== Techniques ===

A more formal way of describing those ways of interaction:

* Zooming:
The possibility of varying the unit/entity of time.

* Selection:
Bifocal navigation allows selection of a single line of the dataset.

* Color:
Gray-Scale vs. couloured tiles.
Number/Diversity of colors used.

* Size:
The size of each tile can be adapted to the chosen units of data.

== References ==
[Friendly, 2006] Michael Friendly. Gallery of Data Visualization. York University: Statistical Consulting Service and Psychology Department. Accessed: 27.11.2006. [http://www.ecn.wfu.edu/SCS/Gallery/ Gallery of Data Visualization]

[Mintz et al., 1997] Mintz, D., Fitz-Simons, T., and Wayland, M.. Tracking Air Quality Trends with SAS/GRAPH. In ''Proceedings of the 22nd Annual SAS User Group International Conference (SUGI97)'', pages 807–812, 1997. [http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/papers/tilemaps-PAPER173.PDF PDF]

Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 02 - Aufgabe 3 - Technique

2006-12-01T21:31:00Z

UE-InfoVis0607 9815963: /* considerations */

=Tile Maps=

== What are Tile Maps ==

===Summary===

{{Quotation|The tile map is a useful semi-graphical display for data with seasonal variation. |[Friendly, 2006]}}

{{Quotation|The Tile map, if carefully constructed, can convey complicated temoral patterns in an easily understood manner.|[Mintz et al., 1997]}}

===Images===

[[Image:Tilemaps_bw.jpg | Tilemap (greyscale)]]

Figure 1: a tilemap showing different levels of ocone-concentration in different shades of grey [Mintz et al., 1997].

[[Image:Tilemaps_color.jpg | Tilemap (color)]]

Figure2: ocone-concentration over several years, color-coded [Friendly, 2006].

===Description===

A tile map is a representation of a discrete - respectively quantized (discretion by quantization)- two-dimensional dataset, where each dataset-entry is represented by a colored square (tile). Usually the first dimension is an instance of time (like one day, hour, etc), and with each entry representing the same amount of time. The second dimension then represents some arbitray data, like the amount of rain for that day, the average temperature for a certain amount of time, or the concentration of ocone for a certain day (like in figure 2).

The speciality of this visualization technique is the arrangement of the time-axis: it is not a straight line, but rather a zigzag-line thus forming a block of a bigger time-entity from many smaller entities. For better understanding see figure 1: there is one tile for each day. The days are grouped into vertical lines of one week each, and the weeks are aligned along the horizontal axis forming months and consequently a whole year.
As in figure 2 several of these bigger entities can again be arranged along a vertical axis thus providing a quick overview over a long period of time which makes it possible to easily detect certain trends in the dataset.

The values for each time-entity can be coded by color or shades of grey. In following the function to give a quick overview there should not be used to many levels of colors. Furthermore the assignment of values to colors might not be linear: eg in figure 2 there are four levels of ozone-concentration, but the last level covering 50% of the concentration-spectrum.

===Notes===

Maybe there could be used (almost) continuous values for the second dimension, by mapping the whole dataset on a big-enough color-space. That might also appeal to the time-dimension by increasing time-resolution, but possibly this would result in a loss of simplicity and overview, which is the biggest strength of the tile maps.

== Visual Mapping ==

=== Introduction ===
The aim of the visual representation with tile maps is to abstract and simplify seasonal patterns. This makes it easier to recognize patterns or to compare them.

=== Visualisation / Abstraction ===
With this visualization technique the measured data (in our case weather) is represented by "tiles" (squares) which are arranged in 2 dimesions. Every "tile" is represent a certain amount of time. E.g. the images above showing a tile map where every "tile" representing a day which are vertically grouped into weeks. So the chronological sequence is illustrated vertical, from top to bottom, and horizontal, from left to right ... like a 90 degree rotated calendar. The tile map can also be used to display other temporal patterns. For example, displaying diurnal patterns would work much the same way, except each tile represents an hour of the day and would be vertically grouped into days. [Mintz et al., 1997]

The value of the measured data is illustrated by the color or color intensity of the "tiles". For example a light shade indicating low values, darker shades indicating higher values. [Mintz et al., 1997]

== Interaction practices ==

=== Considerations ===

Tile maps are mainly used to visualize temporal patterns. A suggesting first step of adding interactivity to a tile map could be added with the possibility of regulating the timeframe of the analyzed dataset.
Depending on the granularity of the given data-stream(s) it is also possible to add a way of modifying the size of the time units.

In the given example of an weather data analysis this could be implemented by letting the user refine or modify the analysed units of time from years to month or days or even smaller unit-sizes e.g. via an alpha-slider.
Additionally the size of each tile can be adapted according to the size of the chosen unit of time.

This and the possibility of coloring every tile corresponding to it´s representing value emphasises the graphical nature of this visualization technique. Each range of values can thus be mapped to a certain color and each tile will than be rendered with the color relating to it´s representing value.

It is farther possible to add a kind of bifocal navigation to a tile map, allowing the user to select certain sectors or lines of the tile-matrix.

Finally a hover function can be implemented to easily provide the user with the detailed value corresponding to a single tile.

=== Techniques/Functions ===

A more formal way of describing those ways of interaction:

* Zooming:
The possibility of varying the unit/entity of time.

* Selection:
Bifocal navigation allows selection of a single line of the dataset.

* Color:
Gray-Scale vs. couloured tiles.
Number/Diversity of colors used.

* Size:
The size of each tile can be adapted to the chosen units of data.

== References ==
[Friendly, 2006] Michael Friendly. Gallery of Data Visualization. York University: Statistical Consulting Service and Psychology Department. Accessed: 27.11.2006. [http://www.ecn.wfu.edu/SCS/Gallery/ Gallery of Data Visualization]

[Mintz et al., 1997] Mintz, D., Fitz-Simons, T., and Wayland, M.. Tracking Air Quality Trends with SAS/GRAPH. In ''Proceedings of the 22nd Annual SAS User Group International Conference (SUGI97)'', pages 807–812, 1997. [http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/papers/tilemaps-PAPER173.PDF PDF]

Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 02 - Aufgabe 3 - Technique

2006-12-01T21:30:14Z

UE-InfoVis0607 9815963: /* possible ways of user-interaction */

=Tile Maps=

== What are Tile Maps ==

===Summary===

{{Quotation|The tile map is a useful semi-graphical display for data with seasonal variation. |[Friendly, 2006]}}

{{Quotation|The Tile map, if carefully constructed, can convey complicated temoral patterns in an easily understood manner.|[Mintz et al., 1997]}}

===Images===

[[Image:Tilemaps_bw.jpg | Tilemap (greyscale)]]

Figure 1: a tilemap showing different levels of ocone-concentration in different shades of grey [Mintz et al., 1997].

[[Image:Tilemaps_color.jpg | Tilemap (color)]]

Figure2: ocone-concentration over several years, color-coded [Friendly, 2006].

===Description===

A tile map is a representation of a discrete - respectively quantized (discretion by quantization)- two-dimensional dataset, where each dataset-entry is represented by a colored square (tile). Usually the first dimension is an instance of time (like one day, hour, etc), and with each entry representing the same amount of time. The second dimension then represents some arbitray data, like the amount of rain for that day, the average temperature for a certain amount of time, or the concentration of ocone for a certain day (like in figure 2).

The speciality of this visualization technique is the arrangement of the time-axis: it is not a straight line, but rather a zigzag-line thus forming a block of a bigger time-entity from many smaller entities. For better understanding see figure 1: there is one tile for each day. The days are grouped into vertical lines of one week each, and the weeks are aligned along the horizontal axis forming months and consequently a whole year.
As in figure 2 several of these bigger entities can again be arranged along a vertical axis thus providing a quick overview over a long period of time which makes it possible to easily detect certain trends in the dataset.

The values for each time-entity can be coded by color or shades of grey. In following the function to give a quick overview there should not be used to many levels of colors. Furthermore the assignment of values to colors might not be linear: eg in figure 2 there are four levels of ozone-concentration, but the last level covering 50% of the concentration-spectrum.

===Notes===

Maybe there could be used (almost) continuous values for the second dimension, by mapping the whole dataset on a big-enough color-space. That might also appeal to the time-dimension by increasing time-resolution, but possibly this would result in a loss of simplicity and overview, which is the biggest strength of the tile maps.

== Visual Mapping ==

=== Introduction ===
The aim of the visual representation with tile maps is to abstract and simplify seasonal patterns. This makes it easier to recognize patterns or to compare them.

=== Visualisation / Abstraction ===
With this visualization technique the measured data (in our case weather) is represented by "tiles" (squares) which are arranged in 2 dimesions. Every "tile" is represent a certain amount of time. E.g. the images above showing a tile map where every "tile" representing a day which are vertically grouped into weeks. So the chronological sequence is illustrated vertical, from top to bottom, and horizontal, from left to right ... like a 90 degree rotated calendar. The tile map can also be used to display other temporal patterns. For example, displaying diurnal patterns would work much the same way, except each tile represents an hour of the day and would be vertically grouped into days. [Mintz et al., 1997]

The value of the measured data is illustrated by the color or color intensity of the "tiles". For example a light shade indicating low values, darker shades indicating higher values. [Mintz et al., 1997]

== Interaction practices ==

=== considerations ===

Tile maps are mainly used to visualize temporal patterns. A suggesting first step of adding interactivity to a tile map could be added with the possibility of regulating the timeframe of the analyzed dataset.
Depending on the granularity of the given data-stream(s) it is also possible to add a way of modifying the size of the time units.

In the given example of an weather data analysis this could be implemented by letting the user refine or modify the analysed units of time from years to month or days or even smaller unit-sizes e.g. via an alpha-slider.
Additionally the size of each tile can be adapted according to the size of the chosen unit of time.

This and the possibility of coloring every tile corresponding to it´s representing value emphasises the graphical nature of this visualization technique. Each range of values can thus be mapped to a certain color and each tile will than be rendered with the color relating to it´s representing value.

It is farther possible to add a kind of bifocal navigation to a tile map, allowing the user to select certain sectors or lines of the tile-matrix.

Finally a hover function can be implemented to easily provide the user with the detailed value corresponding to a single tile.

=== Techniques/Functions ===

A more formal way of describing those ways of interaction:

* Zooming:
The possibility of varying the unit/entity of time.

* Selection:
Bifocal navigation allows selection of a single line of the dataset.

* Color:
Gray-Scale vs. couloured tiles.
Number/Diversity of colors used.

* Size:
The size of each tile can be adapted to the chosen units of data.

== References ==
[Friendly, 2006] Michael Friendly. Gallery of Data Visualization. York University: Statistical Consulting Service and Psychology Department. Accessed: 27.11.2006. [http://www.ecn.wfu.edu/SCS/Gallery/ Gallery of Data Visualization]

[Mintz et al., 1997] Mintz, D., Fitz-Simons, T., and Wayland, M.. Tracking Air Quality Trends with SAS/GRAPH. In ''Proceedings of the 22nd Annual SAS User Group International Conference (SUGI97)'', pages 807–812, 1997. [http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/papers/tilemaps-PAPER173.PDF PDF]

Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 02 - Aufgabe 3 - Technique

2006-12-01T20:57:29Z

UE-InfoVis0607 9815963: /* Techniques/Functions */

=Tile Maps=

== What are Tile Maps ==

===Summary===

{{Quotation|The tile map is a useful semi-graphical display for data with seasonal variation. |[Friendly, 2006]}}

{{Quotation|The Tile map, if carefully constructed, can convey complicated temoral patterns in an easily understood manner.|[Mintz et al., 1997]}}

===Images===

[[Image:Tilemaps_bw.jpg | Tilemap (greyscale)]]

Figure 1: a tilemap showing different levels of ocone-concentration in different shades of grey [Mintz et al., 1997].

[[Image:Tilemaps_color.jpg | Tilemap (color)]]

Figure2: ocone-concentration over several years, color-coded [Friendly, 2006].

===Description===

A tile map is a representation of a discrete - respectively quantized (discretion by quantization)- two-dimensional dataset, where each dataset-entry is represented by a colored square (tile). Usually the first dimension is an instance of time (like one day, hour, etc), and with each entry representing the same amount of time. The second dimension then represents some arbitray data, like the amount of rain for that day, the average temperature for a certain amount of time, or the concentration of ocone for a certain day (like in figure 2).

The speciality of this visualization technique is the arrangement of the time-axis: it is not a straight line, but rather a zigzag-line thus forming a block of a bigger time-entity from many smaller entities. For better understanding see figure 1: there is one tile for each day. The days are grouped into vertical lines of one week each, and the weeks are aligned along the horizontal axis forming months and consequently a whole year.
As in figure 2 several of these bigger entities can again be arranged along a vertical axis thus providing a quick overview over a long period of time which makes it possible to easily detect certain trends in the dataset.

The values for each time-entity can be coded by color or shades of grey. In following the function to give a quick overview there should not be used to many levels of colors. Furthermore the assignment of values to colors might not be linear: eg in figure 2 there are four levels of ozone-concentration, but the last level covering 50% of the concentration-spectrum.

===Notes===

Maybe there could be used (almost) continuous values for the second dimension, by mapping the whole dataset on a big-enough color-space. That might also appeal to the time-dimension by increasing time-resolution, but possibly this would result in a loss of simplicity and overview, which is the biggest strength of the tile maps.

== Visual Mapping ==

=== Introduction ===
The aim of the visual representation with tile maps is to abstract and simplify seasonal patterns. This makes it easier to recognize patterns or to compare them.

=== Visualisation / Abstraction ===
With this visualization technique the measured data (in our case weather) is represented by "tiles" (squares) which are arranged in 2 dimesions. Every "tile" is represent a certain amount of time. E.g. the images above showing a tile map where every "tile" representing a day which are vertically grouped into weeks. So the chronological sequence is illustrated vertical, from top to bottom, and horizontal, from left to right ... like a 90 degree rotated calendar. The tile map can also be used to display other temporal patterns. For example, displaying diurnal patterns would work much the same way, except each tile represents an hour of the day and would be vertically grouped into days. [Mintz et al., 1997]

The value of the measured data is illustrated by the color or color intensity of the "tiles". For example a light shade indicating low values, darker shades indicating higher values. [Mintz et al., 1997]

== Interaction practices ==

=== possible ways of user-interaction ===

Tile maps are mainly used to visualize temporal patterns. A suggesting first step of adding interactivity to a tile map could be added with the possibility of regulating the timeframe of the analyzed dataset.
Depending on the granularity of the given data-stream(s) it is also possible to add a way of modifying the size of the time units.

In the given example of an weather data analysis this could be implemented by letting the user refine or modify the analysed units of time from years to month or days or even smaller unit-sizes e.g. via an alpha-slider.
Additionally the size of each tile can be adapted according to the size of the chosen unit of time.

This and the possibility of coloring every tile corresponding to it´s representing value emphasises the graphical nature of this visualization technique. Each range of values can thus be mapped to a certain color and each tile will than be rendered with the color relating to it´s representing value.

It is farther possible to add a kind of bifocal navigation to a tile map, allowing the user to select certain sectors or lines of the tile-matrix.

Finally a hover function can be implemented to easily provide the user with the detailed value corresponding to a single tile.

=== Techniques/Functions ===

A more formal way of describing those ways of interaction:

* Zooming:
The possibility of varying the unit/entity of time.

* Selection:
Bifocal navigation allows selection of a single line of the dataset.

* Color:
Gray-Scale vs. couloured tiles.
Number/Diversity of colors used.

* Size:
The size of each tile can be adapted to the chosen units of data.

== References ==
[Friendly, 2006] Michael Friendly. Gallery of Data Visualization. York University: Statistical Consulting Service and Psychology Department. Accessed: 27.11.2006. [http://www.ecn.wfu.edu/SCS/Gallery/ Gallery of Data Visualization]

[Mintz et al., 1997] Mintz, D., Fitz-Simons, T., and Wayland, M.. Tracking Air Quality Trends with SAS/GRAPH. In ''Proceedings of the 22nd Annual SAS User Group International Conference (SUGI97)'', pages 807–812, 1997. [http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/papers/tilemaps-PAPER173.PDF PDF]

Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 02 - Aufgabe 3 - Technique

2006-12-01T20:56:55Z

UE-InfoVis0607 9815963: /* Techniques/Functions */

=Tile Maps=

== What are Tile Maps ==

===Summary===

{{Quotation|The tile map is a useful semi-graphical display for data with seasonal variation. |[Friendly, 2006]}}

{{Quotation|The Tile map, if carefully constructed, can convey complicated temoral patterns in an easily understood manner.|[Mintz et al., 1997]}}

===Images===

[[Image:Tilemaps_bw.jpg | Tilemap (greyscale)]]

Figure 1: a tilemap showing different levels of ocone-concentration in different shades of grey [Mintz et al., 1997].

[[Image:Tilemaps_color.jpg | Tilemap (color)]]

Figure2: ocone-concentration over several years, color-coded [Friendly, 2006].

===Description===

A tile map is a representation of a discrete - respectively quantized (discretion by quantization)- two-dimensional dataset, where each dataset-entry is represented by a colored square (tile). Usually the first dimension is an instance of time (like one day, hour, etc), and with each entry representing the same amount of time. The second dimension then represents some arbitray data, like the amount of rain for that day, the average temperature for a certain amount of time, or the concentration of ocone for a certain day (like in figure 2).

The speciality of this visualization technique is the arrangement of the time-axis: it is not a straight line, but rather a zigzag-line thus forming a block of a bigger time-entity from many smaller entities. For better understanding see figure 1: there is one tile for each day. The days are grouped into vertical lines of one week each, and the weeks are aligned along the horizontal axis forming months and consequently a whole year.
As in figure 2 several of these bigger entities can again be arranged along a vertical axis thus providing a quick overview over a long period of time which makes it possible to easily detect certain trends in the dataset.

The values for each time-entity can be coded by color or shades of grey. In following the function to give a quick overview there should not be used to many levels of colors. Furthermore the assignment of values to colors might not be linear: eg in figure 2 there are four levels of ozone-concentration, but the last level covering 50% of the concentration-spectrum.

===Notes===

Maybe there could be used (almost) continuous values for the second dimension, by mapping the whole dataset on a big-enough color-space. That might also appeal to the time-dimension by increasing time-resolution, but possibly this would result in a loss of simplicity and overview, which is the biggest strength of the tile maps.

== Visual Mapping ==

=== Introduction ===
The aim of the visual representation with tile maps is to abstract and simplify seasonal patterns. This makes it easier to recognize patterns or to compare them.

=== Visualisation / Abstraction ===
With this visualization technique the measured data (in our case weather) is represented by "tiles" (squares) which are arranged in 2 dimesions. Every "tile" is represent a certain amount of time. E.g. the images above showing a tile map where every "tile" representing a day which are vertically grouped into weeks. So the chronological sequence is illustrated vertical, from top to bottom, and horizontal, from left to right ... like a 90 degree rotated calendar. The tile map can also be used to display other temporal patterns. For example, displaying diurnal patterns would work much the same way, except each tile represents an hour of the day and would be vertically grouped into days. [Mintz et al., 1997]

The value of the measured data is illustrated by the color or color intensity of the "tiles". For example a light shade indicating low values, darker shades indicating higher values. [Mintz et al., 1997]

== Interaction practices ==

=== possible ways of user-interaction ===

Tile maps are mainly used to visualize temporal patterns. A suggesting first step of adding interactivity to a tile map could be added with the possibility of regulating the timeframe of the analyzed dataset.
Depending on the granularity of the given data-stream(s) it is also possible to add a way of modifying the size of the time units.

In the given example of an weather data analysis this could be implemented by letting the user refine or modify the analysed units of time from years to month or days or even smaller unit-sizes e.g. via an alpha-slider.
Additionally the size of each tile can be adapted according to the size of the chosen unit of time.

This and the possibility of coloring every tile corresponding to it´s representing value emphasises the graphical nature of this visualization technique. Each range of values can thus be mapped to a certain color and each tile will than be rendered with the color relating to it´s representing value.

It is farther possible to add a kind of bifocal navigation to a tile map, allowing the user to select certain sectors or lines of the tile-matrix.

Finally a hover function can be implemented to easily provide the user with the detailed value corresponding to a single tile.

=== Techniques/Functions ===

A more formal way of describing those ways of interaction:

* Zooming:
The possibility of varying the

* Selection:
Bifocal navigation allows selection of a single line of the dataset.

* Color:
Gray-Scale vs. couloured tiles.
Number/Diversity of colors used.

* Size:
The size of each tile can be adapted to the chosen units of data.

* Animation:

== References ==
[Friendly, 2006] Michael Friendly. Gallery of Data Visualization. York University: Statistical Consulting Service and Psychology Department. Accessed: 27.11.2006. [http://www.ecn.wfu.edu/SCS/Gallery/ Gallery of Data Visualization]

[Mintz et al., 1997] Mintz, D., Fitz-Simons, T., and Wayland, M.. Tracking Air Quality Trends with SAS/GRAPH. In ''Proceedings of the 22nd Annual SAS User Group International Conference (SUGI97)'', pages 807–812, 1997. [http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/papers/tilemaps-PAPER173.PDF PDF]

Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 02 - Aufgabe 3 - Technique

2006-12-01T20:56:42Z

UE-InfoVis0607 9815963: /* possible ways of user-interaction */

=Tile Maps=

== What are Tile Maps ==

===Summary===

{{Quotation|The tile map is a useful semi-graphical display for data with seasonal variation. |[Friendly, 2006]}}

{{Quotation|The Tile map, if carefully constructed, can convey complicated temoral patterns in an easily understood manner.|[Mintz et al., 1997]}}

===Images===

[[Image:Tilemaps_bw.jpg | Tilemap (greyscale)]]

Figure 1: a tilemap showing different levels of ocone-concentration in different shades of grey [Mintz et al., 1997].

[[Image:Tilemaps_color.jpg | Tilemap (color)]]

Figure2: ocone-concentration over several years, color-coded [Friendly, 2006].

===Description===

A tile map is a representation of a discrete - respectively quantized (discretion by quantization)- two-dimensional dataset, where each dataset-entry is represented by a colored square (tile). Usually the first dimension is an instance of time (like one day, hour, etc), and with each entry representing the same amount of time. The second dimension then represents some arbitray data, like the amount of rain for that day, the average temperature for a certain amount of time, or the concentration of ocone for a certain day (like in figure 2).

The speciality of this visualization technique is the arrangement of the time-axis: it is not a straight line, but rather a zigzag-line thus forming a block of a bigger time-entity from many smaller entities. For better understanding see figure 1: there is one tile for each day. The days are grouped into vertical lines of one week each, and the weeks are aligned along the horizontal axis forming months and consequently a whole year.
As in figure 2 several of these bigger entities can again be arranged along a vertical axis thus providing a quick overview over a long period of time which makes it possible to easily detect certain trends in the dataset.

The values for each time-entity can be coded by color or shades of grey. In following the function to give a quick overview there should not be used to many levels of colors. Furthermore the assignment of values to colors might not be linear: eg in figure 2 there are four levels of ozone-concentration, but the last level covering 50% of the concentration-spectrum.

===Notes===

Maybe there could be used (almost) continuous values for the second dimension, by mapping the whole dataset on a big-enough color-space. That might also appeal to the time-dimension by increasing time-resolution, but possibly this would result in a loss of simplicity and overview, which is the biggest strength of the tile maps.

== Visual Mapping ==

=== Introduction ===
The aim of the visual representation with tile maps is to abstract and simplify seasonal patterns. This makes it easier to recognize patterns or to compare them.

=== Visualisation / Abstraction ===
With this visualization technique the measured data (in our case weather) is represented by "tiles" (squares) which are arranged in 2 dimesions. Every "tile" is represent a certain amount of time. E.g. the images above showing a tile map where every "tile" representing a day which are vertically grouped into weeks. So the chronological sequence is illustrated vertical, from top to bottom, and horizontal, from left to right ... like a 90 degree rotated calendar. The tile map can also be used to display other temporal patterns. For example, displaying diurnal patterns would work much the same way, except each tile represents an hour of the day and would be vertically grouped into days. [Mintz et al., 1997]

The value of the measured data is illustrated by the color or color intensity of the "tiles". For example a light shade indicating low values, darker shades indicating higher values. [Mintz et al., 1997]

== Interaction practices ==

=== possible ways of user-interaction ===

Tile maps are mainly used to visualize temporal patterns. A suggesting first step of adding interactivity to a tile map could be added with the possibility of modifying the timeframe of the analyzed dataset.
Depending on the granularity of the given data-stream(s) it is also possible to add a way of modifying the size of the time units.

In the given example of an weather data analysis this could be implemented by letting the user refine or modify the analysed units of time from years to month or days or even smaller unit-sizes e.g. via an alpha-slider.
Additionally the size of each tile can be adapted according to the size of the chosen unit of time.

This and the possibility of coloring every tile corresponding to it´s representing value emphasises the graphical nature of this visualization technique. Each range of values can thus be mapped to a certain color and each tile will than be rendered with the color relating to it´s representing value.

It is farther possible to add a kind of bifocal navigation to a tile map, allowing the user to select certain sectors or lines of the tile-matrix.

Finally a hover function can be implemented to easily provide the user with the detailed value corresponding to a single tile.

=== Techniques/Functions ===

A more formal way of describing those ways of interaction:

* Selection :
Bifocal navigation allows selection of a single line of the dataset.

* Color:
Gray-Scale vs. couloured tiles.
Number/Diversity of colors used.

* Size:
The size of each tile can be adapted to the chosen units of data.

* Animation:

== References ==
[Friendly, 2006] Michael Friendly. Gallery of Data Visualization. York University: Statistical Consulting Service and Psychology Department. Accessed: 27.11.2006. [http://www.ecn.wfu.edu/SCS/Gallery/ Gallery of Data Visualization]

[Mintz et al., 1997] Mintz, D., Fitz-Simons, T., and Wayland, M.. Tracking Air Quality Trends with SAS/GRAPH. In ''Proceedings of the 22nd Annual SAS User Group International Conference (SUGI97)'', pages 807–812, 1997. [http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/papers/tilemaps-PAPER173.PDF PDF]

Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 02 - Aufgabe 3 - Technique

2006-12-01T20:55:06Z

UE-InfoVis0607 9815963: /* Interaction practices */

=Tile Maps=

== What are Tile Maps ==

===Summary===

{{Quotation|The tile map is a useful semi-graphical display for data with seasonal variation. |[Friendly, 2006]}}

{{Quotation|The Tile map, if carefully constructed, can convey complicated temoral patterns in an easily understood manner.|[Mintz et al., 1997]}}

===Images===

[[Image:Tilemaps_bw.jpg | Tilemap (greyscale)]]

Figure 1: a tilemap showing different levels of ocone-concentration in different shades of grey [Mintz et al., 1997].

[[Image:Tilemaps_color.jpg | Tilemap (color)]]

Figure2: ocone-concentration over several years, color-coded [Friendly, 2006].

===Description===

A tile map is a representation of a discrete - respectively quantized (discretion by quantization)- two-dimensional dataset, where each dataset-entry is represented by a colored square (tile). Usually the first dimension is an instance of time (like one day, hour, etc), and with each entry representing the same amount of time. The second dimension then represents some arbitray data, like the amount of rain for that day, the average temperature for a certain amount of time, or the concentration of ocone for a certain day (like in figure 2).

The speciality of this visualization technique is the arrangement of the time-axis: it is not a straight line, but rather a zigzag-line thus forming a block of a bigger time-entity from many smaller entities. For better understanding see figure 1: there is one tile for each day. The days are grouped into vertical lines of one week each, and the weeks are aligned along the horizontal axis forming months and consequently a whole year.
As in figure 2 several of these bigger entities can again be arranged along a vertical axis thus providing a quick overview over a long period of time which makes it possible to easily detect certain trends in the dataset.

The values for each time-entity can be coded by color or shades of grey. In following the function to give a quick overview there should not be used to many levels of colors. Furthermore the assignment of values to colors might not be linear: eg in figure 2 there are four levels of ozone-concentration, but the last level covering 50% of the concentration-spectrum.

===Notes===

Maybe there could be used (almost) continuous values for the second dimension, by mapping the whole dataset on a big-enough color-space. That might also appeal to the time-dimension by increasing time-resolution, but possibly this would result in a loss of simplicity and overview, which is the biggest strength of the tile maps.

== Visual Mapping ==

=== Introduction ===
The aim of the visual representation with tile maps is to abstract and simplify seasonal patterns. This makes it easier to recognize patterns or to compare them.

=== Visualisation / Abstraction ===
With this visualization technique the measured data (in our case weather) is represented by "tiles" (squares) which are arranged in 2 dimesions. Every "tile" is represent a certain amount of time. E.g. the images above showing a tile map where every "tile" representing a day which are vertically grouped into weeks. So the chronological sequence is illustrated vertical, from top to bottom, and horizontal, from left to right ... like a 90 degree rotated calendar. The tile map can also be used to display other temporal patterns. For example, displaying diurnal patterns would work much the same way, except each tile represents an hour of the day and would be vertically grouped into days. [Mintz et al., 1997]

The value of the measured data is illustrated by the color or color intensity of the "tiles". For example a light shade indicating low values, darker shades indicating higher values. [Mintz et al., 1997]

== Interaction practices ==

=== possible ways of user-interaction ===

Tile maps are mainly used to visualize temporal patterns. A suggesting first step of adding interactivity to a tile map could be added with the possibility of regulating the timeframe of the analyzed dataset.
Depending on the granularity of the given data-stream(s) it is also possible to add a way of modifying the size of the time units.

In the given example of an weather data analysis this could be implemented by letting the user refine or modify the analysed units of time from years to month or days or even smaller unit-sizes e.g. via an alpha-slider.
Additionally the size of each tile can be adapted according to the size of the chosen unit of time.

This and the possibility of coloring every tile corresponding to it´s representing value emphasises the graphical nature of this visualization technique. Each range of values can thus be mapped to a certain color and each tile will than be rendered with the color relating to it´s representing value.

It is farther possible to add a kind of bifocal navigation to a tile map, allowing the user to select certain sectors or lines of the tile-matrix.

Finally a hover function can be implemented to easily provide the user with the detailed value corresponding to a single tile.

=== Techniques/Functions ===

A more formal way of describing those ways of interaction:

* Selection :
Bifocal navigation allows selection of a single line of the dataset.

* Color:
Gray-Scale vs. couloured tiles.
Number/Diversity of colors used.

* Size:
The size of each tile can be adapted to the chosen units of data.

* Animation:

== References ==
[Friendly, 2006] Michael Friendly. Gallery of Data Visualization. York University: Statistical Consulting Service and Psychology Department. Accessed: 27.11.2006. [http://www.ecn.wfu.edu/SCS/Gallery/ Gallery of Data Visualization]

[Mintz et al., 1997] Mintz, D., Fitz-Simons, T., and Wayland, M.. Tracking Air Quality Trends with SAS/GRAPH. In ''Proceedings of the 22nd Annual SAS User Group International Conference (SUGI97)'', pages 807–812, 1997. [http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/papers/tilemaps-PAPER173.PDF PDF]

Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 02 - Aufgabe 3 - Technique

2006-12-01T20:54:45Z

UE-InfoVis0607 9815963: /* Techniques/Functions */

=Tile Maps=

== What are Tile Maps ==

===Summary===

{{Quotation|The tile map is a useful semi-graphical display for data with seasonal variation. |[Friendly, 2006]}}

{{Quotation|The Tile map, if carefully constructed, can convey complicated temoral patterns in an easily understood manner.|[Mintz et al., 1997]}}

===Images===

[[Image:Tilemaps_bw.jpg | Tilemap (greyscale)]]

Figure 1: a tilemap showing different levels of ocone-concentration in different shades of grey [Mintz et al., 1997].

[[Image:Tilemaps_color.jpg | Tilemap (color)]]

Figure2: ocone-concentration over several years, color-coded [Friendly, 2006].

===Description===

A tile map is a representation of a discrete - respectively quantized (discretion by quantization)- two-dimensional dataset, where each dataset-entry is represented by a colored square (tile). Usually the first dimension is an instance of time (like one day, hour, etc), and with each entry representing the same amount of time. The second dimension then represents some arbitray data, like the amount of rain for that day, the average temperature for a certain amount of time, or the concentration of ocone for a certain day (like in figure 2).

The speciality of this visualization technique is the arrangement of the time-axis: it is not a straight line, but rather a zigzag-line thus forming a block of a bigger time-entity from many smaller entities. For better understanding see figure 1: there is one tile for each day. The days are grouped into vertical lines of one week each, and the weeks are aligned along the horizontal axis forming months and consequently a whole year.
As in figure 2 several of these bigger entities can again be arranged along a vertical axis thus providing a quick overview over a long period of time which makes it possible to easily detect certain trends in the dataset.

The values for each time-entity can be coded by color or shades of grey. In following the function to give a quick overview there should not be used to many levels of colors. Furthermore the assignment of values to colors might not be linear: eg in figure 2 there are four levels of ozone-concentration, but the last level covering 50% of the concentration-spectrum.

===Notes===

Maybe there could be used (almost) continuous values for the second dimension, by mapping the whole dataset on a big-enough color-space. That might also appeal to the time-dimension by increasing time-resolution, but possibly this would result in a loss of simplicity and overview, which is the biggest strength of the tile maps.

== Visual Mapping ==

=== Introduction ===
The aim of the visual representation with tile maps is to abstract and simplify seasonal patterns. This makes it easier to recognize patterns or to compare them.

=== Visualisation / Abstraction ===
With this visualization technique the measured data (in our case weather) is represented by "tiles" (squares) which are arranged in 2 dimesions. Every "tile" is represent a certain amount of time. E.g. the images above showing a tile map where every "tile" representing a day which are vertically grouped into weeks. So the chronological sequence is illustrated vertical, from top to bottom, and horizontal, from left to right ... like a 90 degree rotated calendar. The tile map can also be used to display other temporal patterns. For example, displaying diurnal patterns would work much the same way, except each tile represents an hour of the day and would be vertically grouped into days. [Mintz et al., 1997]

The value of the measured data is illustrated by the color or color intensity of the "tiles". For example a light shade indicating low values, darker shades indicating higher values. [Mintz et al., 1997]

== Interaction practices ==

=== possible interactions ===

Tile maps are mainly used to visualize temporal patterns. A suggesting first step of adding interactivity to a tile map could be added with the possibility of regulating the timeframe of the analyzed dataset.
Depending on the granularity of the given data-stream(s) it is also possible to add a way of modifying the size of the time units.

In the given example of an weather data analysis this could be implemented by letting the user refine or modify the analysed units of time from years to month or days or even smaller unit-sizes e.g. via an alpha-slider.
Additionally the size of each tile can be adapted according to the size of the chosen unit of time.

This and the possibility of coloring every tile corresponding to it´s representing value emphasises the graphical nature of this visualization technique. Each range of values can thus be mapped to a certain color and each tile will than be rendered with the color relating to it´s representing value.

It is farther possible to add a kind of bifocal navigation to a tile map, allowing the user to select certain sectors or lines of the tile-matrix.

Finally a hover function can be implemented to easily provide the user with the detailed value corresponding to a single tile.

=== Techniques/Functions ===

A more formal way of describing those ways of interaction:

* Selection :
Bifocal navigation allows selection of a single line of the dataset.

* Color:
Gray-Scale vs. couloured tiles.
Number/Diversity of colors used.

* Size:
The size of each tile can be adapted to the chosen units of data.

* Animation:

== References ==
[Friendly, 2006] Michael Friendly. Gallery of Data Visualization. York University: Statistical Consulting Service and Psychology Department. Accessed: 27.11.2006. [http://www.ecn.wfu.edu/SCS/Gallery/ Gallery of Data Visualization]

[Mintz et al., 1997] Mintz, D., Fitz-Simons, T., and Wayland, M.. Tracking Air Quality Trends with SAS/GRAPH. In ''Proceedings of the 22nd Annual SAS User Group International Conference (SUGI97)'', pages 807–812, 1997. [http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/papers/tilemaps-PAPER173.PDF PDF]

Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 02 - Aufgabe 3 - Technique

2006-12-01T20:54:03Z

UE-InfoVis0607 9815963: /* Interaction practices */

=Tile Maps=

== What are Tile Maps ==

===Summary===

{{Quotation|The tile map is a useful semi-graphical display for data with seasonal variation. |[Friendly, 2006]}}

{{Quotation|The Tile map, if carefully constructed, can convey complicated temoral patterns in an easily understood manner.|[Mintz et al., 1997]}}

===Images===

[[Image:Tilemaps_bw.jpg | Tilemap (greyscale)]]

Figure 1: a tilemap showing different levels of ocone-concentration in different shades of grey [Mintz et al., 1997].

[[Image:Tilemaps_color.jpg | Tilemap (color)]]

Figure2: ocone-concentration over several years, color-coded [Friendly, 2006].

===Description===

A tile map is a representation of a discrete - respectively quantized (discretion by quantization)- two-dimensional dataset, where each dataset-entry is represented by a colored square (tile). Usually the first dimension is an instance of time (like one day, hour, etc), and with each entry representing the same amount of time. The second dimension then represents some arbitray data, like the amount of rain for that day, the average temperature for a certain amount of time, or the concentration of ocone for a certain day (like in figure 2).

The speciality of this visualization technique is the arrangement of the time-axis: it is not a straight line, but rather a zigzag-line thus forming a block of a bigger time-entity from many smaller entities. For better understanding see figure 1: there is one tile for each day. The days are grouped into vertical lines of one week each, and the weeks are aligned along the horizontal axis forming months and consequently a whole year.
As in figure 2 several of these bigger entities can again be arranged along a vertical axis thus providing a quick overview over a long period of time which makes it possible to easily detect certain trends in the dataset.

The values for each time-entity can be coded by color or shades of grey. In following the function to give a quick overview there should not be used to many levels of colors. Furthermore the assignment of values to colors might not be linear: eg in figure 2 there are four levels of ozone-concentration, but the last level covering 50% of the concentration-spectrum.

===Notes===

Maybe there could be used (almost) continuous values for the second dimension, by mapping the whole dataset on a big-enough color-space. That might also appeal to the time-dimension by increasing time-resolution, but possibly this would result in a loss of simplicity and overview, which is the biggest strength of the tile maps.

== Visual Mapping ==

=== Introduction ===
The aim of the visual representation with tile maps is to abstract and simplify seasonal patterns. This makes it easier to recognize patterns or to compare them.

=== Visualisation / Abstraction ===
With this visualization technique the measured data (in our case weather) is represented by "tiles" (squares) which are arranged in 2 dimesions. Every "tile" is represent a certain amount of time. E.g. the images above showing a tile map where every "tile" representing a day which are vertically grouped into weeks. So the chronological sequence is illustrated vertical, from top to bottom, and horizontal, from left to right ... like a 90 degree rotated calendar. The tile map can also be used to display other temporal patterns. For example, displaying diurnal patterns would work much the same way, except each tile represents an hour of the day and would be vertically grouped into days. [Mintz et al., 1997]

The value of the measured data is illustrated by the color or color intensity of the "tiles". For example a light shade indicating low values, darker shades indicating higher values. [Mintz et al., 1997]

== Interaction practices ==

=== possible interactions ===

Tile maps are mainly used to visualize temporal patterns. A suggesting first step of adding interactivity to a tile map could be added with the possibility of regulating the timeframe of the analyzed dataset.
Depending on the granularity of the given data-stream(s) it is also possible to add a way of modifying the size of the time units.

In the given example of an weather data analysis this could be implemented by letting the user refine or modify the analysed units of time from years to month or days or even smaller unit-sizes e.g. via an alpha-slider.
Additionally the size of each tile can be adapted according to the size of the chosen unit of time.

This and the possibility of coloring every tile corresponding to it´s representing value emphasises the graphical nature of this visualization technique. Each range of values can thus be mapped to a certain color and each tile will than be rendered with the color relating to it´s representing value.

It is farther possible to add a kind of bifocal navigation to a tile map, allowing the user to select certain sectors or lines of the tile-matrix.

Finally a hover function can be implemented to easily provide the user with the detailed value corresponding to a single tile.

=== Techniques/Functions ===

A more formal way of describing those ways of interaction:

- Selection :
Bifocal navigation allows selection of a single line of the dataset.

- Color:
Gray-Scale vs. couloured tiles.
Number/Diversity of colors used.

- Shape:
The size of each tile can be adapted to the chosen units of data.

* Highlighting
* Dynamic Querying
* Selection
* Brushing
* Distortion Techniques
* layout, color, size, and shape encodings, distortion techniques, animation
* query language

== References ==
[Friendly, 2006] Michael Friendly. Gallery of Data Visualization. York University: Statistical Consulting Service and Psychology Department. Accessed: 27.11.2006. [http://www.ecn.wfu.edu/SCS/Gallery/ Gallery of Data Visualization]

[Mintz et al., 1997] Mintz, D., Fitz-Simons, T., and Wayland, M.. Tracking Air Quality Trends with SAS/GRAPH. In ''Proceedings of the 22nd Annual SAS User Group International Conference (SUGI97)'', pages 807–812, 1997. [http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/papers/tilemaps-PAPER173.PDF PDF]

Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 02 - Aufgabe 3 - Technique

2006-12-01T20:50:02Z

UE-InfoVis0607 9815963: /* Techniques/Functions */

=Tile Maps=

== What are Tile Maps ==

===Summary===

{{Quotation|The tile map is a useful semi-graphical display for data with seasonal variation. |[Friendly, 2006]}}

{{Quotation|The Tile map, if carefully constructed, can convey complicated temoral patterns in an easily understood manner.|[Mintz et al., 1997]}}

===Images===

[[Image:Tilemaps_bw.jpg | Tilemap (greyscale)]]

Figure 1: a tilemap showing different levels of ocone-concentration in different shades of grey [Mintz et al., 1997].

[[Image:Tilemaps_color.jpg | Tilemap (color)]]

Figure2: ocone-concentration over several years, color-coded [Friendly, 2006].

===Description===

A tile map is a representation of a discrete - respectively quantized (discretion by quantization)- two-dimensional dataset, where each dataset-entry is represented by a colored square (tile). Usually the first dimension is an instance of time (like one day, hour, etc), and with each entry representing the same amount of time. The second dimension then represents some arbitray data, like the amount of rain for that day, the average temperature for a certain amount of time, or the concentration of ocone for a certain day (like in figure 2).

The speciality of this visualization technique is the arrangement of the time-axis: it is not a straight line, but rather a zigzag-line thus forming a block of a bigger time-entity from many smaller entities. For better understanding see figure 1: there is one tile for each day. The days are grouped into vertical lines of one week each, and the weeks are aligned along the horizontal axis forming months and consequently a whole year.
As in figure 2 several of these bigger entities can again be arranged along a vertical axis thus providing a quick overview over a long period of time which makes it possible to easily detect certain trends in the dataset.

The values for each time-entity can be coded by color or shades of grey. In following the function to give a quick overview there should not be used to many levels of colors. Furthermore the assignment of values to colors might not be linear: eg in figure 2 there are four levels of ozone-concentration, but the last level covering 50% of the concentration-spectrum.

===Notes===

Maybe there could be used (almost) continuous values for the second dimension, by mapping the whole dataset on a big-enough color-space. That might also appeal to the time-dimension by increasing time-resolution, but possibly this would result in a loss of simplicity and overview, which is the biggest strength of the tile maps.

== Visual Mapping ==

=== Introduction ===
The aim of the visual representation with tile maps is to abstract and simplify seasonal patterns. This makes it easier to recognize patterns or to compare them.

=== Visualisation / Abstraction ===
With this visualization technique the measured data (in our case weather) is represented by "tiles" (squares) which are arranged in 2 dimesions. Every "tile" is represent a certain amount of time. E.g. the images above showing a tile map where every "tile" representing a day which are vertically grouped into weeks. So the chronological sequence is illustrated vertical, from top to bottom, and horizontal, from left to right ... like a 90 degree rotated calendar. The tile map can also be used to display other temporal patterns. For example, displaying diurnal patterns would work much the same way, except each tile represents an hour of the day and would be vertically grouped into days. [Mintz et al., 1997]

The value of the measured data is illustrated by the color or color intensity of the "tiles". For example a light shade indicating low values, darker shades indicating higher values. [Mintz et al., 1997]

== Interaction practices ==

=== possible interactions ===

Tile maps are mainly used to visualize temporal patterns. A suggesting first step of adding interactivity to a tile map could be added with the possibility of regulating the timeframe of the analyzed dataset.
Depending on the granularity of the given data-stream(s) it is also possible to add a way of modifying the size of the time units.

In the given example of an weather data analysis this could be implemented by letting the user refine or modify the analysed units of time from years to month or days or even smaller unit-sizes e.g. via an auto-slider.
Additionally the size of each tile can be adapted according to the size of the chosen unit of time.

This and the possibility of coloring every tile corresponding to it´s representing value emphasises the graphical nature of this visualization technique. Each range of values can thus be mapped to a certain color and each tile will than be rendered with the color relating to it´s representing value.

It is farther possible to add a kind of bifocal navigation to a tile map, allowing the user to select certain sectors or lines of the tile-matrix.

Finally a hover function can be implemented to easily provide the user with the detailed value corresponding to a single tile.

=== Techniques/Functions ===

A more formal way of describing those ways of interaction:

* Selection :
Bifocal navigation allows selection of a single line of the dataset.

* Zooming:
Selecting a certain area of data

* Color:

* Table Data
* Navigation
* Text
* Zooming
* Alpha-Slider
* Highlighting
* Dynamic Querying
* Selection
* Brushing
* Distortion Techniques
* layout, color, size, and shape encodings, distortion techniques, animation
* query language
* If you are regularly issuing queries (via Predicate filters) to data sets, it might help to index the data columns referenced by the Predicate. This can be done using the index() method of the Table class.
* rendering
* use simple shapes - performance

== References ==
[Friendly, 2006] Michael Friendly. Gallery of Data Visualization. York University: Statistical Consulting Service and Psychology Department. Accessed: 27.11.2006. [http://www.ecn.wfu.edu/SCS/Gallery/ Gallery of Data Visualization]

[Mintz et al., 1997] Mintz, D., Fitz-Simons, T., and Wayland, M.. Tracking Air Quality Trends with SAS/GRAPH. In ''Proceedings of the 22nd Annual SAS User Group International Conference (SUGI97)'', pages 807–812, 1997. [http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/papers/tilemaps-PAPER173.PDF PDF]

Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 02 - Aufgabe 3 - Technique

2006-12-01T20:47:51Z

UE-InfoVis0607 9815963: /* possible interactions */

=Tile Maps=

== What are Tile Maps ==

===Summary===

{{Quotation|The tile map is a useful semi-graphical display for data with seasonal variation. |[Friendly, 2006]}}

{{Quotation|The Tile map, if carefully constructed, can convey complicated temoral patterns in an easily understood manner.|[Mintz et al., 1997]}}

===Images===

[[Image:Tilemaps_bw.jpg | Tilemap (greyscale)]]

Figure 1: a tilemap showing different levels of ocone-concentration in different shades of grey [Mintz et al., 1997].

[[Image:Tilemaps_color.jpg | Tilemap (color)]]

Figure2: ocone-concentration over several years, color-coded [Friendly, 2006].

===Description===

A tile map is a representation of a discrete - respectively quantized (discretion by quantization)- two-dimensional dataset, where each dataset-entry is represented by a colored square (tile). Usually the first dimension is an instance of time (like one day, hour, etc), and with each entry representing the same amount of time. The second dimension then represents some arbitray data, like the amount of rain for that day, the average temperature for a certain amount of time, or the concentration of ocone for a certain day (like in figure 2).

The speciality of this visualization technique is the arrangement of the time-axis: it is not a straight line, but rather a zigzag-line thus forming a block of a bigger time-entity from many smaller entities. For better understanding see figure 1: there is one tile for each day. The days are grouped into vertical lines of one week each, and the weeks are aligned along the horizontal axis forming months and consequently a whole year.
As in figure 2 several of these bigger entities can again be arranged along a vertical axis thus providing a quick overview over a long period of time which makes it possible to easily detect certain trends in the dataset.

The values for each time-entity can be coded by color or shades of grey. In following the function to give a quick overview there should not be used to many levels of colors. Furthermore the assignment of values to colors might not be linear: eg in figure 2 there are four levels of ozone-concentration, but the last level covering 50% of the concentration-spectrum.

===Notes===

Maybe there could be used (almost) continuous values for the second dimension, by mapping the whole dataset on a big-enough color-space. That might also appeal to the time-dimension by increasing time-resolution, but possibly this would result in a loss of simplicity and overview, which is the biggest strength of the tile maps.

== Visual Mapping ==

=== Introduction ===
The aim of the visual representation with tile maps is to abstract and simplify seasonal patterns. This makes it easier to recognize patterns or to compare them.

=== Visualisation / Abstraction ===
With this visualization technique the measured data (in our case weather) is represented by "tiles" (squares) which are arranged in 2 dimesions. Every "tile" is represent a certain amount of time. E.g. the images above showing a tile map where every "tile" representing a day which are vertically grouped into weeks. So the chronological sequence is illustrated vertical, from top to bottom, and horizontal, from left to right ... like a 90 degree rotated calendar. The tile map can also be used to display other temporal patterns. For example, displaying diurnal patterns would work much the same way, except each tile represents an hour of the day and would be vertically grouped into days. [Mintz et al., 1997]

The value of the measured data is illustrated by the color or color intensity of the "tiles". For example a light shade indicating low values, darker shades indicating higher values. [Mintz et al., 1997]

== Interaction practices ==

=== possible interactions ===

Tile maps are mainly used to visualize temporal patterns. A suggesting first step of adding interactivity to a tile map could be added with the possibility of regulating the timeframe of the analyzed dataset.
Depending on the granularity of the given data-stream(s) it is also possible to add a way of modifying the size of the time units.

In the given example of an weather data analysis this could be implemented by letting the user refine or modify the analysed units of time from years to month or days or even smaller unit-sizes e.g. via an auto-slider.
Additionally the size of each tile can be adapted according to the size of the chosen unit of time.

This and the possibility of coloring every tile corresponding to it´s representing value emphasises the graphical nature of this visualization technique. Each range of values can thus be mapped to a certain color and each tile will than be rendered with the color relating to it´s representing value.

It is farther possible to add a kind of bifocal navigation to a tile map, allowing the user to select certain sectors or lines of the tile-matrix.

Finally a hover function can be implemented to easily provide the user with the detailed value corresponding to a single tile.

=== Techniques/Functions ===

A more formal way of describing those ways of interaction:

* Selection :
Hover-Function to display the concrete value of a tile.
* Zooming:
Selecting a certain area of data

* Table Data
* Navigation
* Text
* Zooming
* Alpha-Slider
* Highlighting
* Dynamic Querying
* Selection
* Brushing
* Distortion Techniques
* layout, color, size, and shape encodings, distortion techniques, animation
* query language
* If you are regularly issuing queries (via Predicate filters) to data sets, it might help to index the data columns referenced by the Predicate. This can be done using the index() method of the Table class.
* rendering
* use simple shapes - performance

== References ==
[Friendly, 2006] Michael Friendly. Gallery of Data Visualization. York University: Statistical Consulting Service and Psychology Department. Accessed: 27.11.2006. [http://www.ecn.wfu.edu/SCS/Gallery/ Gallery of Data Visualization]

[Mintz et al., 1997] Mintz, D., Fitz-Simons, T., and Wayland, M.. Tracking Air Quality Trends with SAS/GRAPH. In ''Proceedings of the 22nd Annual SAS User Group International Conference (SUGI97)'', pages 807–812, 1997. [http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/papers/tilemaps-PAPER173.PDF PDF]

Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 02 - Aufgabe 3 - Technique

2006-12-01T20:46:01Z

UE-InfoVis0607 9815963: /* Visualisation / Abstraction */

=Tile Maps=

== What are Tile Maps ==

===Summary===

{{Quotation|The tile map is a useful semi-graphical display for data with seasonal variation. |[Friendly, 2006]}}

{{Quotation|The Tile map, if carefully constructed, can convey complicated temoral patterns in an easily understood manner.|[Mintz et al., 1997]}}

===Images===

[[Image:Tilemaps_bw.jpg | Tilemap (greyscale)]]

Figure 1: a tilemap showing different levels of ocone-concentration in different shades of grey [Mintz et al., 1997].

[[Image:Tilemaps_color.jpg | Tilemap (color)]]

Figure2: ocone-concentration over several years, color-coded [Friendly, 2006].

===Description===

A tile map is a representation of a discrete - respectively quantized (discretion by quantization)- two-dimensional dataset, where each dataset-entry is represented by a colored square (tile). Usually the first dimension is an instance of time (like one day, hour, etc), and with each entry representing the same amount of time. The second dimension then represents some arbitray data, like the amount of rain for that day, the average temperature for a certain amount of time, or the concentration of ocone for a certain day (like in figure 2).

The speciality of this visualization technique is the arrangement of the time-axis: it is not a straight line, but rather a zigzag-line thus forming a block of a bigger time-entity from many smaller entities. For better understanding see figure 1: there is one tile for each day. The days are grouped into vertical lines of one week each, and the weeks are aligned along the horizontal axis forming months and consequently a whole year.
As in figure 2 several of these bigger entities can again be arranged along a vertical axis thus providing a quick overview over a long period of time which makes it possible to easily detect certain trends in the dataset.

The values for each time-entity can be coded by color or shades of grey. In following the function to give a quick overview there should not be used to many levels of colors. Furthermore the assignment of values to colors might not be linear: eg in figure 2 there are four levels of ozone-concentration, but the last level covering 50% of the concentration-spectrum.

===Notes===

Maybe there could be used (almost) continuous values for the second dimension, by mapping the whole dataset on a big-enough color-space. That might also appeal to the time-dimension by increasing time-resolution, but possibly this would result in a loss of simplicity and overview, which is the biggest strength of the tile maps.

== Visual Mapping ==

=== Introduction ===
The aim of the visual representation with tile maps is to abstract and simplify seasonal patterns. This makes it easier to recognize patterns or to compare them.

=== Visualisation / Abstraction ===
With this visualization technique the measured data (in our case weather) is represented by "tiles" (squares) which are arranged in 2 dimesions. Every "tile" is represent a certain amount of time. E.g. the images above showing a tile map where every "tile" representing a day which are vertically grouped into weeks. So the chronological sequence is illustrated vertical, from top to bottom, and horizontal, from left to right ... like a 90 degree rotated calendar. The tile map can also be used to display other temporal patterns. For example, displaying diurnal patterns would work much the same way, except each tile represents an hour of the day and would be vertically grouped into days. [Mintz et al., 1997]

The value of the measured data is illustrated by the color or color intensity of the "tiles". For example a light shade indicating low values, darker shades indicating higher values. [Mintz et al., 1997]

== Interaction practices ==

=== possible interactions ===

Tile maps are mainly used to visualize temporal patterns. A suggesting first step of adding interactivity to a tile map could be the possibility of regulating the timeframe of the analyzed data.
Depending on the granularity of the given data-stream(s) it is also possible to add a way of modifying the size of the time units.

In the given example of an weather data analysis this could be implemented by letting the user refine or modify the analysed units of time from years to month or days or even smaller unit-sizes.
Additionally the size of each tile can be adapted according to the size of the chosen unit of time.

This and the possibility of coloring every tile corresponding to it´s representing value emphasises the graphical nature of this visualization technique. Each range of values can thus be mapped to a certain color and each tile will than be rendered with the color relating to the represented value.

It is farther possible to add a kind of bifocal navigation to a tile map, allowing the user to highlight certain sectors or lines of the tile-matrix.

Finally a hover function can be implemented to easily provide the user with a detailed value corresponding to a single tile.

=== Techniques/Functions ===

A more formal way of describing those ways of interaction:

* Selection :
Hover-Function to display the concrete value of a tile.
* Zooming:
Selecting a certain area of data

* Table Data
* Navigation
* Text
* Zooming
* Alpha-Slider
* Highlighting
* Dynamic Querying
* Selection
* Brushing
* Distortion Techniques
* layout, color, size, and shape encodings, distortion techniques, animation
* query language
* If you are regularly issuing queries (via Predicate filters) to data sets, it might help to index the data columns referenced by the Predicate. This can be done using the index() method of the Table class.
* rendering
* use simple shapes - performance

== References ==
[Friendly, 2006] Michael Friendly. Gallery of Data Visualization. York University: Statistical Consulting Service and Psychology Department. Accessed: 27.11.2006. [http://www.ecn.wfu.edu/SCS/Gallery/ Gallery of Data Visualization]

[Mintz et al., 1997] Mintz, D., Fitz-Simons, T., and Wayland, M.. Tracking Air Quality Trends with SAS/GRAPH. In ''Proceedings of the 22nd Annual SAS User Group International Conference (SUGI97)'', pages 807–812, 1997. [http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/papers/tilemaps-PAPER173.PDF PDF]

Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 02 - Aufgabe 3 - Technique

2006-12-01T20:43:22Z

UE-InfoVis0607 9815963: /* Description */

=Tile Maps=

== What are Tile Maps ==

===Summary===

{{Quotation|The tile map is a useful semi-graphical display for data with seasonal variation. |[Friendly, 2006]}}

{{Quotation|The Tile map, if carefully constructed, can convey complicated temoral patterns in an easily understood manner.|[Mintz et al., 1997]}}

===Images===

[[Image:Tilemaps_bw.jpg | Tilemap (greyscale)]]

Figure 1: a tilemap showing different levels of ocone-concentration in different shades of grey [Mintz et al., 1997].

[[Image:Tilemaps_color.jpg | Tilemap (color)]]

Figure2: ocone-concentration over several years, color-coded [Friendly, 2006].

===Description===

A tile map is a representation of a discrete - respectively quantized (discretion by quantization)- two-dimensional dataset, where each dataset-entry is represented by a colored square (tile). Usually the first dimension is an instance of time (like one day, hour, etc), and with each entry representing the same amount of time. The second dimension then represents some arbitray data, like the amount of rain for that day, the average temperature for a certain amount of time, or the concentration of ocone for a certain day (like in figure 2).

The speciality of this visualization technique is the arrangement of the time-axis: it is not a straight line, but rather a zigzag-line thus forming a block of a bigger time-entity from many smaller entities. For better understanding see figure 1: there is one tile for each day. The days are grouped into vertical lines of one week each, and the weeks are aligned along the horizontal axis forming months and consequently a whole year.
As in figure 2 several of these bigger entities can again be arranged along a vertical axis thus providing a quick overview over a long period of time which makes it possible to easily detect certain trends in the dataset.

The values for each time-entity can be coded by color or shades of grey. In following the function to give a quick overview there should not be used to many levels of colors. Furthermore the assignment of values to colors might not be linear: eg in figure 2 there are four levels of ozone-concentration, but the last level covering 50% of the concentration-spectrum.

===Notes===

Maybe there could be used (almost) continuous values for the second dimension, by mapping the whole dataset on a big-enough color-space. That might also appeal to the time-dimension by increasing time-resolution, but possibly this would result in a loss of simplicity and overview, which is the biggest strength of the tile maps.

== Visual Mapping ==

=== Introduction ===
The aim of the visual representation with tile maps is to abstract and simplify seasonal patterns. This makes it easier to recognize patterns or to compare them.

=== Visualisation / Abstraction ===
With this visualisation technique the measured data (in our case weather) is represented by "tiles" (squares) which are aranged in 2 dimesions. Every "tile" is representing a certain amount of time. E.g. the images above showing a tile map where every "tile" representing a day which are vertically grouped into weeks. So the chronological sequence is illustrated vertical, from top to bottom, and horizontal, from left to right ... like a 90 degree rotated calendar. The tile map can also be used to display other temporal patterns. For example, displaying diurnal patterns would work much the same way, except each tile represent an hour of the day and would be vertically grouped into days. [Mintz et al., 1997]

The value of the measured data is illustrated by the color or color intensity of the "tiles". For example a light shade indicating low values, darker shades indicating higher values. [Mintz et al., 1997]

== Interaction practices ==

=== possible interactions ===

Tile maps are mainly used to visualize temporal patterns. A suggesting first step of adding interactivity to a tile map could be the possibility of regulating the timeframe of the analyzed data.
Depending on the granularity of the given data-stream(s) it is also possible to add a way of modifying the size of the time units.

In the given example of an weather data analysis this could be implemented by letting the user refine or modify the analysed units of time from years to month or days or even smaller unit-sizes.
Additionally the size of each tile can be adapted according to the size of the chosen unit of time.

This and the possibility of coloring every tile corresponding to it´s representing value emphasises the graphical nature of this visualization technique. Each range of values can thus be mapped to a certain color and each tile will than be rendered with the color relating to the represented value.

It is farther possible to add a kind of bifocal navigation to a tile map, allowing the user to highlight certain sectors or lines of the tile-matrix.

Finally a hover function can be implemented to easily provide the user with a detailed value corresponding to a single tile.

=== Techniques/Functions ===

A more formal way of describing those ways of interaction:

* Selection :
Hover-Function to display the concrete value of a tile.
* Zooming:
Selecting a certain area of data

* Table Data
* Navigation
* Text
* Zooming
* Alpha-Slider
* Highlighting
* Dynamic Querying
* Selection
* Brushing
* Distortion Techniques
* layout, color, size, and shape encodings, distortion techniques, animation
* query language
* If you are regularly issuing queries (via Predicate filters) to data sets, it might help to index the data columns referenced by the Predicate. This can be done using the index() method of the Table class.
* rendering
* use simple shapes - performance

== References ==
[Friendly, 2006] Michael Friendly. Gallery of Data Visualization. York University: Statistical Consulting Service and Psychology Department. Accessed: 27.11.2006. [http://www.ecn.wfu.edu/SCS/Gallery/ Gallery of Data Visualization]

[Mintz et al., 1997] Mintz, D., Fitz-Simons, T., and Wayland, M.. Tracking Air Quality Trends with SAS/GRAPH. In ''Proceedings of the 22nd Annual SAS User Group International Conference (SUGI97)'', pages 807–812, 1997. [http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/papers/tilemaps-PAPER173.PDF PDF]

Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 02 - Aufgabe 3 - Technique

2006-12-01T20:42:04Z

UE-InfoVis0607 9815963: /* Interaction practices */

=Tile Maps=

== What are Tile Maps ==

===Summary===

{{Quotation|The tile map is a useful semi-graphical display for data with seasonal variation. |[Friendly, 2006]}}

{{Quotation|The Tile map, if carefully constructed, can convey complicated temoral patterns in an easily understood manner.|[Mintz et al., 1997]}}

===Images===

[[Image:Tilemaps_bw.jpg | Tilemap (greyscale)]]

Figure 1: a tilemap showing different levels of ocone-concentration in different shades of grey [Mintz et al., 1997].

[[Image:Tilemaps_color.jpg | Tilemap (color)]]

Figure2: ocone-concentration over several years, color-coded [Friendly, 2006].

===Description===

A tile map is a representation of a discrete - respectively quantized (discretion by quantization)- two-dimensional dataset, where each dataset-entry is represented by a colored square (tile). Usually the first dimension is an instance of time (like one day, hour, etc), and with each entry representing the same amount of time. The second dimension then represents some arbitray data, like the amount of rain for that day, the average temperature for a certain amount of time, or the concentration of ocone for a certain day (like in figure 2).

The special thing now is the arrangement of the time-axis: it is not a straight line, but rather a zigzag-line thus forming a block of a bigger time-entity from many smaller entities. For better understanding see figure 1: there is one tile for each day. The days are grouped into vertical lines of one week each, and the weeks are aligned along the horizontal axis forming months and consequently a whole year.
As in figure 2 several of these bigger entities can again be arranged along a vertical axis thus providing a quick overview over a long period of time which makes it possible to easily detect certain trends in the dataset.

The values for each time-entity can be coded by color or shades of grey. In following the function to give a quick overview there should not be used to many levels of colors. Furthermore the assignment of values to colors might not be linear: eg in figure 2 there are four levels of ozone-concentration, but the last level covering 50% of the concentration-spectrum.

===Notes===

Maybe there could be used (almost) continuous values for the second dimension, by mapping the whole dataset on a big-enough color-space. That might also appeal to the time-dimension by increasing time-resolution, but possibly this would result in a loss of simplicity and overview, which is the biggest strength of the tile maps.

== Visual Mapping ==

=== Introduction ===
The aim of the visual representation with tile maps is to abstract and simplify seasonal patterns. This makes it easier to recognize patterns or to compare them.

=== Visualisation / Abstraction ===
With this visualisation technique the measured data (in our case weather) is represented by "tiles" (squares) which are aranged in 2 dimesions. Every "tile" is representing a certain amount of time. E.g. the images above showing a tile map where every "tile" representing a day which are vertically grouped into weeks. So the chronological sequence is illustrated vertical, from top to bottom, and horizontal, from left to right ... like a 90 degree rotated calendar. The tile map can also be used to display other temporal patterns. For example, displaying diurnal patterns would work much the same way, except each tile represent an hour of the day and would be vertically grouped into days. [Mintz et al., 1997]

The value of the measured data is illustrated by the color or color intensity of the "tiles". For example a light shade indicating low values, darker shades indicating higher values. [Mintz et al., 1997]

== Interaction practices ==

=== possible interactions ===

Tile maps are mainly used to visualize temporal patterns. A suggesting first step of adding interactivity to a tile map could be the possibility of regulating the timeframe of the analyzed data.
Depending on the granularity of the given data-stream(s) it is also possible to add a way of modifying the size of the time units.

In the given example of an weather data analysis this could be implemented by letting the user refine or modify the analysed units of time from years to month or days or even smaller unit-sizes.
Additionally the size of each tile can be adapted according to the size of the chosen unit of time.

This and the possibility of coloring every tile corresponding to it´s representing value emphasises the graphical nature of this visualization technique. Each range of values can thus be mapped to a certain color and each tile will than be rendered with the color relating to the represented value.

It is farther possible to add a kind of bifocal navigation to a tile map, allowing the user to highlight certain sectors or lines of the tile-matrix.

Finally a hover function can be implemented to easily provide the user with a detailed value corresponding to a single tile.

=== Techniques/Functions ===

A more formal way of describing those ways of interaction:

* Selection :
Hover-Function to display the concrete value of a tile.
* Zooming:
Selecting a certain area of data

* Table Data
* Navigation
* Text
* Zooming
* Alpha-Slider
* Highlighting
* Dynamic Querying
* Selection
* Brushing
* Distortion Techniques
* layout, color, size, and shape encodings, distortion techniques, animation
* query language
* If you are regularly issuing queries (via Predicate filters) to data sets, it might help to index the data columns referenced by the Predicate. This can be done using the index() method of the Table class.
* rendering
* use simple shapes - performance

== References ==
[Friendly, 2006] Michael Friendly. Gallery of Data Visualization. York University: Statistical Consulting Service and Psychology Department. Accessed: 27.11.2006. [http://www.ecn.wfu.edu/SCS/Gallery/ Gallery of Data Visualization]

[Mintz et al., 1997] Mintz, D., Fitz-Simons, T., and Wayland, M.. Tracking Air Quality Trends with SAS/GRAPH. In ''Proceedings of the 22nd Annual SAS User Group International Conference (SUGI97)'', pages 807–812, 1997. [http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/papers/tilemaps-PAPER173.PDF PDF]

Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 02 - Aufgabe 3 - Technique

2006-12-01T20:28:56Z

UE-InfoVis0607 9815963: /* possible interactions */

=Tile Maps=

== What are Tile Maps ==

===Summary===

{{Quotation|The tile map is a useful semi-graphical display for data with seasonal variation. |[Friendly, 2006]}}

{{Quotation|The Tile map, if carefully constructed, can convey complicated temoral patterns in an easily understood manner.|[Mintz et al., 1997]}}

===Images===

[[Image:Tilemaps_bw.jpg | Tilemap (greyscale)]]

Figure 1: a tilemap showing different levels of ocone-concentration in different shades of grey [Mintz et al., 1997].

[[Image:Tilemaps_color.jpg | Tilemap (color)]]

Figure2: ocone-concentration over several years, color-coded [Friendly, 2006].

===Description===

A tile map is a representation of a discrete - respectively quantized (discretion by quantization)- two-dimensional dataset, where each dataset-entry is represented by a colored square (tile). Usually the first dimension is an instance of time (like one day, hour, etc), and with each entry representing the same amount of time. The second dimension then represents some arbitray data, like the amount of rain for that day, the average temperature for a certain amount of time, or the concentration of ocone for a certain day (like in figure 2).

The special thing now is the arrangement of the time-axis: it is not a straight line, but rather a zigzag-line thus forming a block of a bigger time-entity from many smaller entities. For better understanding see figure 1: there is one tile for each day. The days are grouped into vertical lines of one week each, and the weeks are aligned along the horizontal axis forming months and consequently a whole year.
As in figure 2 several of these bigger entities can again be arranged along a vertical axis thus providing a quick overview over a long period of time which makes it possible to easily detect certain trends in the dataset.

The values for each time-entity can be coded by color or shades of grey. In following the function to give a quick overview there should not be used to many levels of colors. Furthermore the assignment of values to colors might not be linear: eg in figure 2 there are four levels of ozone-concentration, but the last level covering 50% of the concentration-spectrum.

===Notes===

Maybe there could be used (almost) continuous values for the second dimension, by mapping the whole dataset on a big-enough color-space. That might also appeal to the time-dimension by increasing time-resolution, but possibly this would result in a loss of simplicity and overview, which is the biggest strength of the tile maps.

== Visual Mapping ==

=== Introduction ===
The aim of the visual representation with tile maps is to abstract and simplify seasonal patterns. This makes it easier to recognize patterns or to compare them.

=== Visualisation / Abstraction ===
With this visualisation technique the measured data (in our case weather) is represented by "tiles" (squares) which are aranged in 2 dimesions. Every "tile" is representing a certain amount of time. E.g. the images above showing a tile map where every "tile" representing a day which are vertically grouped into weeks. So the chronological sequence is illustrated vertical, from top to bottom, and horizontal, from left to right ... like a 90 degree rotated calendar. The tile map can also be used to display other temporal patterns. For example, displaying diurnal patterns would work much the same way, except each tile represent an hour of the day and would be vertically grouped into days. [Mintz et al., 1997]

The value of the measured data is illustrated by the color or color intensity of the "tiles". For example a light shade indicating low values, darker shades indicating higher values. [Mintz et al., 1997]

== Interaction practices ==

=== possible interactions ===

Tile Maps are mainly used to visualize temporal patterns. A suggesting first step of adding interactivity to a tile map could be the possibility of regulating the timeframe of the analysed data.
Depending on the granularity of the given data-stream(s) it is also possible to add a way of modifying the size of the time units.

In the given example of an weather data analysis this could be implemented by letting the user refine or modify the analysed units of time from years to month or days or even smaller unit-sizes.
Additionally the size of each tile can be automatically adapted to the size of the chosen unit of time.

This and the possibility of coloring every tile corresponding to it´s representing value emphasises the graphical nature of this visualization technique. Each values range can thus be mapped to a certain color.

It is farther possible to add a kind of bifocal navigation, allowing the user to highlight certain sectors or lines of the tile-matrix.

Finally a hover function can be implemented to easily provide the user with detailed value corresponding to a single tile.

Further ways of interaction could be:

Rather improper techniques are the following:

* Zooming: Due to the fact, that a tile map

=== User Interface ===

=== Techniques/Functions ===

* Table Data
* Navigation
* Text
* Zooming
* Alpha-Slider
* Highlighting
* Dynamic Querying
* Selection
* Brushing
* Distortion Techniques
* layout, color, size, and shape encodings, distortion techniques, animation
* query language
* If you are regularly issuing queries (via Predicate filters) to data sets, it might help to index the data columns referenced by the Predicate. This can be done using the index() method of the Table class.
* rendering
* use simple shapes - performance

== References ==
[Friendly, 2006] Michael Friendly. Gallery of Data Visualization. York University: Statistical Consulting Service and Psychology Department. Accessed: 27.11.2006. [http://www.ecn.wfu.edu/SCS/Gallery/ Gallery of Data Visualization]

[Mintz et al., 1997] Mintz, D., Fitz-Simons, T., and Wayland, M.. Tracking Air Quality Trends with SAS/GRAPH. In ''Proceedings of the 22nd Annual SAS User Group International Conference (SUGI97)'', pages 807–812, 1997. [http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/papers/tilemaps-PAPER173.PDF PDF]

Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 02 - Aufgabe 3 - Technique

2006-12-01T20:02:16Z

UE-InfoVis0607 9815963: /* possible interactions */

=Tile Maps=

== What are Tile Maps ==

===Summary===

{{Quotation|The tile map is a useful semi-graphical display for data with seasonal variation. |[Friendly, 2006]}}

{{Quotation|The Tile map, if carefully constructed, can convey complicated temoral patterns in an easily understood manner.|[Mintz et al., 1997]}}

===Images===

[[Image:Tilemaps_bw.jpg | Tilemap (greyscale)]]

Figure 1: a tilemap showing different levels of ocone-concentration in different shades of grey [Mintz et al., 1997].

[[Image:Tilemaps_color.jpg | Tilemap (color)]]

Figure2: ocone-concentration over several years, color-coded [Friendly, 2006].

===Description===

A tile map is a representation of a discrete - respectively quantized (discretion by quantization)- two-dimensional dataset, where each dataset-entry is represented by a colored square (tile). Usually the first dimension is an instance of time (like one day, hour, etc), and with each entry representing the same amount of time. The second dimension then represents some arbitray data, like the amount of rain for that day, the average temperature for a certain amount of time, or the concentration of ocone for a certain day (like in figure 2).

The special thing now is the arrangement of the time-axis: it is not a straight line, but rather a zigzag-line thus forming a block of a bigger time-entity from many smaller entities. For better understanding see figure 1: there is one tile for each day. The days are grouped into vertical lines of one week each, and the weeks are aligned along the horizontal axis forming months and consequently a whole year.
As in figure 2 several of these bigger entities can again be arranged along a vertical axis thus providing a quick overview over a long period of time which makes it possible to easily detect certain trends in the dataset.

The values for each time-entity can be coded by color or shades of grey. In following the function to give a quick overview there should not be used to many levels of colors. Furthermore the assignment of values to colors might not be linear: eg in figure 2 there are four levels of ozone-concentration, but the last level covering 50% of the concentration-spectrum.

===Notes===

Maybe there could be used (almost) continuous values for the second dimension, by mapping the whole dataset on a big-enough color-space. That might also appeal to the time-dimension by increasing time-resolution, but possibly this would result in a loss of simplicity and overview, which is the biggest strength of the tile maps.

== Visual Mapping ==

=== Introduction ===
The aim of the visual representation with tile maps is to abstract and simplify seasonal patterns. This makes it easier to recognize patterns or to compare them.

=== Visualisation / Abstraction ===
With this visualisation technique the measured data (in our case weather) is represented by "tiles" (squares) which are aranged in 2 dimesions. Every "tile" is representing a certain amount of time. E.g. the images above showing a tile map where every "tile" representing a day which are vertically grouped into weeks. So the chronological sequence is illustrated vertical, from top to bottom, and horizontal, from left to right ... like a 90 degree rotated calendar. The tile map can also be used to display other temporal patterns. For example, displaying diurnal patterns would work much the same way, except each tile represent an hour of the day and would be vertically grouped into days. [Mintz et al., 1997]

The value of the measured data is illustrated by the color or color intensity of the "tiles". For example a light shade indicating low values, darker shades indicating higher values. [Mintz et al., 1997]

== Interaction practices ==

=== possible interactions ===

Tile Maps are mainly used to visualize temporal patterns. A suggesting first step of adding interactivity to a tile map could be the possibility of regulating the timeframe of the analysed data.
Depending on the granularity of the given data-stream(s) it is also possible to add a way of modifying the unit size.

In the given example of an weather data analysis this could be implemented by letting the user refine or modify the analysed units of time from years to month or days or even smaller unit-sizes.
Additionally the size of each tile can be automatically adapted related to the size of the chosen unit of time.

This and the possibility of coloring every tile corresponding to it´s representing value emphasises the graphical nature of this visualization technique. Each values range can thus be mapped to a certain color.

It is farther possible to add a kind of bifocal navigation, allowing the user to highlight certain sectors or lines of the tile-map matrix.

Finally a hover function can be implemented to easily provide the user with detailed values corresponding to a single tile.

Further ways of interaction could be:

Rather improper techniques are the following:

* Zooming: Due to the fact, that a tile map

=== User Interface ===

=== Techniques/Functions ===

* Table Data
* Navigation
* Text
* Zooming
* Alpha-Slider
* Highlighting
* Dynamic Querying
* Selection
* Brushing
* Distortion Techniques
* layout, color, size, and shape encodings, distortion techniques, animation
* query language
* If you are regularly issuing queries (via Predicate filters) to data sets, it might help to index the data columns referenced by the Predicate. This can be done using the index() method of the Table class.
* rendering
* use simple shapes - performance

== References ==
[Friendly, 2006] Michael Friendly. Gallery of Data Visualization. York University: Statistical Consulting Service and Psychology Department. Accessed: 27.11.2006. [http://www.ecn.wfu.edu/SCS/Gallery/ Gallery of Data Visualization]

[Mintz et al., 1997] Mintz, D., Fitz-Simons, T., and Wayland, M.. Tracking Air Quality Trends with SAS/GRAPH. In ''Proceedings of the 22nd Annual SAS User Group International Conference (SUGI97)'', pages 807–812, 1997. [http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/papers/tilemaps-PAPER173.PDF PDF]

Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 02 - Aufgabe 3 - Technique

2006-12-01T19:33:44Z

UE-InfoVis0607 9815963: /* possible interactions */

=Tile Maps=

== What are Tile Maps ==

===Summary===

{{Quotation|The tile map is a useful semi-graphical display for data with seasonal variation. |[Friendly, 2006]}}

{{Quotation|The Tile map, if carefully constructed, can convey complicated temoral patterns in an easily understood manner.|[Mintz et al., 1997]}}

===Images===

[[Image:Tilemaps_bw.jpg | Tilemap (greyscale)]]

Figure 1: a tilemap showing different levels of ocone-concentration in different shades of grey [Mintz et al., 1997].

[[Image:Tilemaps_color.jpg | Tilemap (color)]]

Figure2: ocone-concentration over several years, color-coded [Friendly, 2006].

===Description===

A tile map is a representation of a discrete - respectively quantized (discretion by quantization)- two-dimensional dataset, where each dataset-entry is represented by a colored square (tile). Usually the first dimension is an instance of time (like one day, hour, etc), and with each entry representing the same amount of time. The second dimension then represents some arbitray data, like the amount of rain for that day, the average temperature for a certain amount of time, or the concentration of ocone for a certain day (like in figure 2).

The special thing now is the arrangement of the time-axis: it is not a straight line, but rather a zigzag-line thus forming a block of a bigger time-entity from many smaller entities. For better understanding see figure 1: there is one tile for each day. The days are grouped into vertical lines of one week each, and the weeks are aligned along the horizontal axis forming months and consequently a whole year.
As in figure 2 several of these bigger entities can again be arranged along a vertical axis thus providing a quick overview over a long period of time which makes it possible to easily detect certain trends in the dataset.

The values for each time-entity can be coded by color or shades of grey. In following the function to give a quick overview there should not be used to many levels of colors. Furthermore the assignment of values to colors might not be linear: eg in figure 2 there are four levels of ozone-concentration, but the last level covering 50% of the concentration-spectrum.

===Notes===

Maybe there could be used (almost) continuous values for the second dimension, by mapping the whole dataset on a big-enough color-space. That might also appeal to the time-dimension by increasing time-resolution, but possibly this would result in a loss of simplicity and overview, which is the biggest strength of the tile maps.

== Visual Mapping ==

=== Introduction ===
The aim of the visual representation with tile maps is to abstract and simplify seasonal patterns. This makes it easier to recognize patterns or to compare them.

=== Visualisation / Abstraction ===
With this visualisation technique the measured data (in our case weather) is represented by "tiles" (squares) which are aranged in 2 dimesions. Every "tile" is representing a certain amount of time. E.g. the images above showing a tile map where every "tile" representing a day which are vertically grouped into weeks. So the chronological sequence is illustrated vertical, from top to bottom, and horizontal, from left to right ... like a 90 degree rotated calendar. The tile map can also be used to display other temporal patterns. For example, displaying diurnal patterns would work much the same way, except each tile represent an hour of the day and would be vertically grouped into days. [Mintz et al., 1997]

The value of the measured data is illustrated by the color or color intensity of the "tiles". For example a light shade indicating low values, darker shades indicating higher values. [Mintz et al., 1997]

== Interaction practices ==

=== possible interactions ===

Tile Maps are mainly used to visualize temporal patterns. A suggesting first step of adding interactivity to a tile map could be the possibility of regulating the timeframe of the analysed data.
Depending on the granularity of the given data-stream(s) it is also possible to add a way of modifying the unit size.
In the given example of an weather data analysis this could be implement letting the user refine the analysed weather data from years to month or days or even hours.

Further ways of interaction could be:

Rather improper techniques are the following:

* Zooming: Due to the fact, that a tile map

=== User Interface ===

=== Techniques/Functions ===

* Table Data
* Navigation
* Text
* Zooming
* Alpha-Slider
* Highlighting
* Dynamic Querying
* Selection
* Brushing
* Distortion Techniques
* layout, color, size, and shape encodings, distortion techniques, animation
* query language
* If you are regularly issuing queries (via Predicate filters) to data sets, it might help to index the data columns referenced by the Predicate. This can be done using the index() method of the Table class.
* rendering
* use simple shapes - performance

== References ==
[Friendly, 2006] Michael Friendly. Gallery of Data Visualization. York University: Statistical Consulting Service and Psychology Department. Accessed: 27.11.2006. [http://www.ecn.wfu.edu/SCS/Gallery/ Gallery of Data Visualization]

[Mintz et al., 1997] Mintz, D., Fitz-Simons, T., and Wayland, M.. Tracking Air Quality Trends with SAS/GRAPH. In ''Proceedings of the 22nd Annual SAS User Group International Conference (SUGI97)'', pages 807–812, 1997. [http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/papers/tilemaps-PAPER173.PDF PDF]

Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 02 - Aufgabe 3 - Technique

2006-12-01T18:41:27Z

UE-InfoVis0607 9815963:

=Tile Maps=

== What are Tile Maps ==

===Summary===

{{Quotation|The tile map is a useful semi-graphical display for data with seasonal variation. |[Friendly, 2006]}}

{{Quotation|The Tile map, if carefully constructed, can convey complicated temoral patterns in an easily understood manner.|[Mintz et al., 1997]}}

===Images===

[[Image:Tilemaps_bw.jpg | Tilemap (greyscale)]]

Figure 1: a tilemap showing different levels of ocone-concentration in different shades of grey [Mintz et al., 1997].

[[Image:Tilemaps_color.jpg | Tilemap (color)]]

Figure2: ocone-concentration over several years, color-coded [Friendly, 2006].

===Description===

A tile map is a representation of a discrete - respectively quantized (discretion by quantization)- two-dimensional dataset, where each dataset-entry is represented by a colored square (tile). Usually the first dimension is an instance of time (like one day, hour, etc), and with each entry representing the same amount of time. The second dimension then represents some arbitray data, like the amount of rain for that day, the average temperature for a certain amount of time, or the concentration of ocone for a certain day (like in figure 2).

The special thing now is the arrangement of the time-axis: it is not a straight line, but rather a zigzag-line thus forming a block of a bigger time-entity from many smaller entities. For better understanding see figure 1: there is one tile for each day. The days are grouped into vertical lines of one week each, and the weeks are aligned along the horizontal axis forming months and consequently a whole year.
As in figure 2 several of these bigger entities can again be arranged along a vertical axis thus providing a quick overview over a long period of time which makes it possible to easily detect certain trends in the dataset.

The values for each time-entity can be coded by color or shades of grey. In following the function to give a quick overview there should not be used to many levels of colors. Furthermore the assignment of values to colors might not be linear: eg in figure 2 there are four levels of ozone-concentration, but the last level covering 50% of the concentration-spectrum.

===Notes===

Maybe there could be used (almost) continuous values for the second dimension, by mapping the whole dataset on a big-enough color-space. That might also appeal to the time-dimension by increasing time-resolution, but possibly this would result in a loss of simplicity and overview, which is the biggest strength of the tile maps.

== Visual Mapping ==

=== Introduction ===
The aim of the visual representation with tile maps is to abstract and simplify seasonal patterns. This makes it easier to recognize patterns or to compare them.

=== Visualisation / Abstraction ===
With this visualisation technique the measured data (in our case weather) is represented by "tiles" (squares) which are aranged in 2 dimesions. Every "tile" is representing a certain amount of time. E.g. the images above showing a tile map where every "tile" representing a day which are vertically grouped into weeks. So the chronological sequence is illustrated vertical, from top to bottom, and horizontal, from left to right ... like a 90 degree rotated calendar. The tile map can also be used to display other temporal patterns. For example, displaying diurnal patterns would work much the same way, except each tile represent an hour of the day and would be vertically grouped into days. [Mintz et al., 1997]

The value of the measured data is illustrated by the color or color intensity of the "tiles". For example a light shade indicating low values, darker shades indicating higher values. [Mintz et al., 1997]

== Interaction practices ==

=== possible interactions ===

Tile Maps are mainly used to visualize temporal patterns; so obviously the first step of adding interactivity to a tile map could be the possibility to vary the timeframe of the visualized data.

=== User Interface ===

=== Techniques/Functions ===

* Table Data
* Navigation
* Text
* Zooming
* Alpha-Slider
* Highlighting
* Dynamic Querying
* Selection
* Brushing
* Distortion Techniques
* layout, color, size, and shape encodings, distortion techniques, animation
* query language
* If you are regularly issuing queries (via Predicate filters) to data sets, it might help to index the data columns referenced by the Predicate. This can be done using the index() method of the Table class.
* rendering
* use simple shapes - performance

== References ==
[Friendly, 2006] Michael Friendly. Gallery of Data Visualization. York University: Statistical Consulting Service and Psychology Department. Accessed: 27.11.2006. [http://www.ecn.wfu.edu/SCS/Gallery/ Gallery of Data Visualization]

[Mintz et al., 1997] Mintz, D., Fitz-Simons, T., and Wayland, M.. Tracking Air Quality Trends with SAS/GRAPH. In ''Proceedings of the 22nd Annual SAS User Group International Conference (SUGI97)'', pages 807–812, 1997. [http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/papers/tilemaps-PAPER173.PDF PDF]

Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 02 - Aufgabe 3 - Technique

2006-11-27T12:38:15Z

UE-InfoVis0607 9815963:

== Tile Maps ==

===Summary===
===Images===

[[Image:Tilemaps_bw.jpg | Tilemap (greyscale)]]

Figure 1: a tilemap showing different levels of ocone-concentration in different shades of grey.

===Description===

=== References===
[Friendly, 2006] Michael Friendly. Gallery of Data Visualization. York University: Statistical Consulting Service and Psychology Department. Accessed: 27.11.2006. [http://www.ecn.wfu.edu/SCS/Gallery/ Gallery of Data Visualization]

[Mintz et al., 1997] Mintz, D., Fitz-Simons, T., and Wayland, M.. Tracking Air Quality Trends with SAS/GRAPH. In ''Proceedings of the 22nd Annual SAS User Group International Conference (SUGI97)'', pages 807–812, 1997. [http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/papers/tilemaps-PAPER173.PDF PDF]

[Printezis and Garthwaite, 2002] Tony Printezis, Alex Garthwaite. Visualising The Train Garbage Collector. In ''Proceedings of the 3rd international symposium on Memory management'', Pages: 50 - 63, Berlin, June 20-21, 2002. Publisher: ACM Press. [http://portal.acm.org/citation.cfm?id=512436&coll=ACM&dl=ACM&CFID=7238592&CFTOKEN=49755970 Link on ACM-Portal]

== Interaction practices ==

=== application building ===

1. Load the data to be visualized into prefuse's data structures, either reading in data from a file, loading data from a database, or through a custom data source.
2. Create a Visualization that maps the loaded data to a visual abstraction. Tables, Graphs, and/or Trees are added to the Visualization and given a unique data group name for later reference.
3. Create a RendererFactory and register it with the Visualization. The factory is responsible for assigning Renderers to VisualItems.
4. Construct a series of data processing Actions that operate on the visual abstraction. These operations can involve just about anything, but common examples include setting the location, color, size, and shape of visual items or animating these properties between different configurations. These Action instances can be grouped into ActionLists for performing various processing tasks. Actions that will be invoked directly are added to the Visualization and given a unique name by which they can be referenced.
5. Initialize one or more interactive Displays for viewing and manipulating visual items. Specify interactive behaviors by adding Controls to the Displays. Search and filtering over data items can be added using dynamic query bindings.

=== User Interface ===

=== Techniques/Functions ===

* Table Data
* Navigation
* Text
* Zooming
* Alpha-Slider
* Highlighting
* Dynamic Querying
* Selection
* Brushing
* Distortion Techniques
* layout, color, size, and shape encodings, distortion techniques, animation
* query language
* If you are regularly issuing queries (via Predicate filters) to data sets, it might help to index the data columns referenced by the Predicate. This can be done using the index() method of the Table class.
* rendering
* use simple shapes - performance

Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 02 - Aufgabe 3 - Prototype

2006-11-26T22:33:28Z

UE-InfoVis0607 9815963:

== Tile Maps ==

Summary
Images
Description

== Interaction practices ==

=== application building ===

1. Load the data to be visualized into prefuse's data structures, either reading in data from a file, loading data from a database, or through a custom data source.
2. Create a Visualization that maps the loaded data to a visual abstraction. Tables, Graphs, and/or Trees are added to the Visualization and given a unique data group name for later reference.
3. Create a RendererFactory and register it with the Visualization. The factory is responsible for assigning Renderers to VisualItems.
4. Construct a series of data processing Actions that operate on the visual abstraction. These operations can involve just about anything, but common examples include setting the location, color, size, and shape of visual items or animating these properties between different configurations. These Action instances can be grouped into ActionLists for performing various processing tasks. Actions that will be invoked directly are added to the Visualization and given a unique name by which they can be referenced.
5. Initialize one or more interactive Displays for viewing and manipulating visual items. Specify interactive behaviors by adding Controls to the Displays. Search and filtering over data items can be added using dynamic query bindings.

=== User Interface ===

=== Techniques/Functions ===

* Table Data
* Navigation
* Text
* Zooming
* Alpha-Slider
* Highlighting
* Dynamic Querying
* Selection
* Brushing
* Distortion Techniques
* layout, color, size, and shape encodings, distortion techniques, animation
* query language
* If you are regularly issuing queries (via Predicate filters) to data sets, it might help to index the data columns referenced by the Predicate. This can be done using the index() method of the Table class.
* rendering
* use simple shapes - performance

Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 02 - Aufgabe 3 - Prototype

2006-11-26T22:32:02Z

UE-InfoVis0607 9815963: /* Techniques/Functions */

== Tile Maps ==

Summary
Images
Description

== Interaction practices ==

=== User Interface ===

=== Techniques/Functions ===

* Table Data
* Navigation
* Text
* Zooming
* Alpha-Slider
* Highlighting
* Dynamic Querying
* Selection
* Brushing
* Distortion Techniques
* layout, color, size, and shape encodings, distortion techniques, animation
* query language
* If you are regularly issuing queries (via Predicate filters) to data sets, it might help to index the data columns referenced by the Predicate. This can be done using the index() method of the Table class.
* rendering
* use simple shapes - performance

Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 02 - Aufgabe 3 - Prototype

2006-11-26T22:30:55Z

UE-InfoVis0607 9815963: /* Possibilities of interaction */

Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 02 - Aufgabe 3 - Prototype

2006-11-26T22:27:38Z

UE-InfoVis0607 9815963:

== Tile Maps ==

Summary
Images
Description

== Possibilities of interaction ==

=== User Interface / interaction practices ===

=== Which Interaction for which purpose ===

* Navigation

* Zooming
* Alpha-Slider
* Highlighting
* Dynamic Querying
* Selection
* Brushing
* Distortion Techniques
* layout, color, size, and shape encodings, distortion techniques, animation
* query language

Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 02 - Aufgabe 3 - Prototype

2006-11-26T22:03:40Z

UE-InfoVis0607 9815963: /* Which Interaction for which purpose */

== Tile Maps ==

Summary
Images
Description

== Possibilities of interaction ==

=== User Interface / interaction practices ===

=== Which Interaction for which purpose ===

* Navigation

* Zooming
* Alpha-Slider
* Highlighting
* Dynamic Querying
* Selection
* Brushing
* Distortion Techniques
*l ayout, color, size, and shape encodings, distortion techniques, animation

Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 02 - Aufgabe 3 - Prototype

2006-11-26T21:43:34Z

UE-InfoVis0607 9815963:

Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 02 - Aufgabe 3

2006-11-26T21:40:39Z

UE-InfoVis0607 9815963:

[[Teaching:TUW_-_UE_InfoVis_WS_2006/07_-_Gruppe_02_-_Aufgabe_3_-_Technique|Technique]]

[[Teaching:TUW_-_UE_InfoVis_WS_2006/07_-_Gruppe_02_-_Aufgabe_3_-_Prototype|Prototype]]

Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 02 - Aufgabe 1 - Table Lens

2006-11-13T16:03:02Z

UE-InfoVis0607 9815963: /* Table Lens Focus+Context Technique */

== Quotations ==

{{Quotation|The Table Lens is a new technique for visualizing and making sense of large tables. By fusing symbolic and graphical representations into a single manipulable focus+context display and providing a small set of interactive operations (e.g. sorting), the Table Lens supports navigating around a large data space easily isolating and investigating interesting features and patterns.|[Rao and Card, 1994]}}

{{Quotation|The Table Lens supports effective interaction with much larger tables than conventional spreadsheets do. It uses a focus+context (fisheye) technique that works effectively on tabular information because it allows display of crucial label information and multiple distal focal areas.|[Rao and Card, 1994]}}

{{Quotation|The Table Lens, focus+context visualization for large data tables, allows users to see 100 times as many data values as a spreadsheet in the same screen space in a manner that enables an extremely immediate form of exploratory data analysis.|[Tenev and Rao, 1997]}}

== Table Lens Focus+Context Technique ==

Focus+Context techniques support visualizing an entire information structure ''at once as well as zooming in on specific items''. [Rao and Card, 1994]
The zooming-ability allows the display of large amounts of tabular data in a very lucid way.

=== Table Lens Focal Technique ===
The predominant method in displaying tabular data is using the structured view of a spreadsheet respectively a table. Spreadsheets focus on all datasets appropriately. When the data sets become too large to be displayed in a proper way some other visualisation technique must be found. A Table Lens focuses only on some datasets.

[[Image:TableLensTechnique.jpg|Table Lens Focal Technique]]

The graph shows a 10 by 14 table with a focal area of 3 by 2 cells.
Cells in the focal area and the table row and column divide the total focus space of each dimension appropriately. [Rao and Card, 1994]

=== The Distortion ===

Cells are allocated spaces along each dimension independently, there is an interaction in cell geometry.
Four types of cell regions are created by the disortion on the two axis: focal, row focal, column focal and nonfocal. [Rao and Card, 1994]

''Focal'' cells are in the focus area along both axes , ''row focal'' and ''column focal'' are both half focal in that they are in the focal area of only one of the two axes, and ''nonfocal'' are in the context area along both axes. [Rao and Card, 1994]

Due to the fact that rows and columns outside the focal area - the context area - aren´t bent by the warping they can be scanned by a single horizontal or vertical eye movement. This also enables label display, multiple focal areas and multiple focal levels.

To have several focal areas is important for comparing groups of datasets against each other.

== Example ==

The following images were taken from a Table Lens Visualisation demo of collected data of the housing market in Santa Clara, California USA in January 2001. The application shown is the single available software application using this patented Table Lens technique - Inxight Table Lens™.

A total of 1548 datasets are displayed that can be grouped and sorted arbitrarily.

[[image:singleFocalArea.jpg|one focal area]]

On the first image a single focal area is selected. This single selected dataset is equivalent to one house.
The datasets are sorted by the first colum - the prize of the compared houses.

[[image:multipleFocalAreas.jpg|multiple focal areas]]

The second image shows three selected focal areas still sorted by their prizes.

[[image:multipleFocalAreas_diffSort.jpg|multiple focal area re-sorted]]

The third image shows the very same selected datasets as in image 2 - now sorted by the column square foot.

== See also ==

* [[Treemap|Treemap]]
* [[Fisheye View|Fisheye Visualization]]
* [[Perspective Walls|Perspective Walls]]

== References ==

* '''Proceedings'''

[Tenev and Rao, 1997] T. Tenev, R. Rao, "Managing multiple focal levels in Table Lens," infovis, p. 59, 1997 IEEE Symposium on Information Visualization (InfoVis '97), 1997

[Rao and Card, 1994] R. Rao, S.K. Card. The Table Lens: Merging Graphical and Symbolic Representations in an Interactive Focus+Context Visualization for Tabular Information. In Proceedings of the ACM SIGCHI Conference on Human Factors in Computing Systems. ACM, April 1994. Retrieved at: October 29, 2006. http://www.ramanarao.com/papers/tablelens-chi94.pdf

* '''Web Links'''
: [[http://www.inxight.com/demos/tl_housing/tl_housing.html Inxight Table Lens™ Demo Application]]

Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 02 - Aufgabe 1 - Table Lens

2006-11-13T16:00:33Z

UE-InfoVis0607 9815963: /* Quotations */

== Quotations ==

{{Quotation|The Table Lens is a new technique for visualizing and making sense of large tables. By fusing symbolic and graphical representations into a single manipulable focus+context display and providing a small set of interactive operations (e.g. sorting), the Table Lens supports navigating around a large data space easily isolating and investigating interesting features and patterns.|[Rao and Card, 1994]}}

{{Quotation|The Table Lens supports effective interaction with much larger tables than conventional spreadsheets do. It uses a focus+context (fisheye) technique that works effectively on tabular information because it allows display of crucial label information and multiple distal focal areas.|[Rao and Card, 1994]}}

{{Quotation|The Table Lens, focus+context visualization for large data tables, allows users to see 100 times as many data values as a spreadsheet in the same screen space in a manner that enables an extremely immediate form of exploratory data analysis.|[Tenev and Rao, 1997]}}

== Table Lens Focus+Context Technique ==

Focus+Context techniques support visualizing an entire information structure ''at once as well as zooming in on specific items''. [Rao and Card, 1994]

=== Table Lens Focal Technique ===
The predominant method in displaying tabular data is using the structured view of a spreadsheet respectively a table. Spreadsheets focus on all datasets appropriately. When the data sets become too large to be displayed in a proper way some other visualisation technique must be found. A Table Lens focuses only on some datasets.

[[Image:TableLensTechnique.jpg|Table Lens Focal Technique]]

The graph shows a 10 by 14 table with a focal area of 3 by 2 cells.
Cells in the focal area and the table row and column divide the total focus space of each dimension appropriately. [Rao and Card, 1994]

=== The Distortion ===

Cells are allocated spaces along each dimension independently, there is an interaction in cell geometry.
Four types of cell regions are created by the disortion on the two axis: focal, row focal, column focal and nonfocal. [Rao and Card, 1994]

''Focal'' cells are in the focus area along both axes , ''row focal'' and ''column focal'' are both half focal in that they are in the focal area of only one of the two axes, and ''nonfocal'' are in the context area along both axes. [Rao and Card, 1994]

Due to the fact that rows and columns outside the focal area - the context area - aren´t bent by the warping they can be scanned by a single horizontal or vertical eye movement. This also enables label display, multiple focal areas and multiple focal levels.

To have several focal areas is important for comparing groups of datasets against each other.

== Example ==

The following images were taken from a Table Lens Visualisation demo of collected data of the housing market in Santa Clara, California USA in January 2001. The application shown is the single available software application using this patented Table Lens technique - Inxight Table Lens™.

A total of 1548 datasets are displayed that can be grouped and sorted arbitrarily.

[[image:singleFocalArea.jpg|one focal area]]

On the first image a single focal area is selected. This single selected dataset is equivalent to one house.
The datasets are sorted by the first colum - the prize of the compared houses.

[[image:multipleFocalAreas.jpg|multiple focal areas]]

The second image shows three selected focal areas still sorted by their prizes.

[[image:multipleFocalAreas_diffSort.jpg|multiple focal area re-sorted]]

The third image shows the very same selected datasets as in image 2 - now sorted by the column square foot.

== See also ==

* [[Treemap|Treemap]]
* [[Fisheye View|Fisheye Visualization]]
* [[Perspective Walls|Perspective Walls]]

== References ==

* '''Proceedings'''

[Tenev and Rao, 1997] T. Tenev, R. Rao, "Managing multiple focal levels in Table Lens," infovis, p. 59, 1997 IEEE Symposium on Information Visualization (InfoVis '97), 1997

[Rao and Card, 1994] R. Rao, S.K. Card. The Table Lens: Merging Graphical and Symbolic Representations in an Interactive Focus+Context Visualization for Tabular Information. In Proceedings of the ACM SIGCHI Conference on Human Factors in Computing Systems. ACM, April 1994. Retrieved at: October 29, 2006. http://www.ramanarao.com/papers/tablelens-chi94.pdf

* '''Web Links'''
: [[http://www.inxight.com/demos/tl_housing/tl_housing.html Inxight Table Lens™ Demo Application]]

Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 02 - Aufgabe 1 - Table Lens

2006-11-13T15:59:58Z

UE-InfoVis0607 9815963: /* Quotations */

== Quotations ==

{{Quotation|The Table Lens is a new technique for visualizing and making sense of large tables. By fusing symbolic and graphical representations into a single manipulable focus+context display and providing a small set of interactive operations (e.g. sorting), the Table Lens supports navigating around a large data space easily isolating and investigating interesting features and patterns.}}
[Rao and Card, 1994]

{{Quotation|The Table Lens supports effective interaction with much larger tables than conventional spreadsheets do. It uses a focus+context (fisheye) technique that works effectively on tabular information because it allows display of crucial label information and multiple distal focal areas.}}
[Rao and Card, 1994]

{{Quotation|The Table Lens, focus+context visualization for large data tables, allows users to see 100 times as many data values as a spreadsheet in the same screen space in a manner that enables an extremely immediate form of exploratory data analysis.}}
[Tenev and Rao, 1997]

== Table Lens Focus+Context Technique ==

Focus+Context techniques support visualizing an entire information structure ''at once as well as zooming in on specific items''. [Rao and Card, 1994]

=== Table Lens Focal Technique ===
The predominant method in displaying tabular data is using the structured view of a spreadsheet respectively a table. Spreadsheets focus on all datasets appropriately. When the data sets become too large to be displayed in a proper way some other visualisation technique must be found. A Table Lens focuses only on some datasets.

[[Image:TableLensTechnique.jpg|Table Lens Focal Technique]]

The graph shows a 10 by 14 table with a focal area of 3 by 2 cells.
Cells in the focal area and the table row and column divide the total focus space of each dimension appropriately. [Rao and Card, 1994]

=== The Distortion ===

Cells are allocated spaces along each dimension independently, there is an interaction in cell geometry.
Four types of cell regions are created by the disortion on the two axis: focal, row focal, column focal and nonfocal. [Rao and Card, 1994]

''Focal'' cells are in the focus area along both axes , ''row focal'' and ''column focal'' are both half focal in that they are in the focal area of only one of the two axes, and ''nonfocal'' are in the context area along both axes. [Rao and Card, 1994]

Due to the fact that rows and columns outside the focal area - the context area - aren´t bent by the warping they can be scanned by a single horizontal or vertical eye movement. This also enables label display, multiple focal areas and multiple focal levels.

To have several focal areas is important for comparing groups of datasets against each other.

== Example ==

The following images were taken from a Table Lens Visualisation demo of collected data of the housing market in Santa Clara, California USA in January 2001. The application shown is the single available software application using this patented Table Lens technique - Inxight Table Lens™.

A total of 1548 datasets are displayed that can be grouped and sorted arbitrarily.

[[image:singleFocalArea.jpg|one focal area]]

On the first image a single focal area is selected. This single selected dataset is equivalent to one house.
The datasets are sorted by the first colum - the prize of the compared houses.

[[image:multipleFocalAreas.jpg|multiple focal areas]]

The second image shows three selected focal areas still sorted by their prizes.

[[image:multipleFocalAreas_diffSort.jpg|multiple focal area re-sorted]]

The third image shows the very same selected datasets as in image 2 - now sorted by the column square foot.

== See also ==

* [[Treemap|Treemap]]
* [[Fisheye View|Fisheye Visualization]]
* [[Perspective Walls|Perspective Walls]]

== References ==

* '''Proceedings'''

[Tenev and Rao, 1997] T. Tenev, R. Rao, "Managing multiple focal levels in Table Lens," infovis, p. 59, 1997 IEEE Symposium on Information Visualization (InfoVis '97), 1997

[Rao and Card, 1994] R. Rao, S.K. Card. The Table Lens: Merging Graphical and Symbolic Representations in an Interactive Focus+Context Visualization for Tabular Information. In Proceedings of the ACM SIGCHI Conference on Human Factors in Computing Systems. ACM, April 1994. Retrieved at: October 29, 2006. http://www.ramanarao.com/papers/tablelens-chi94.pdf

* '''Web Links'''
: [[http://www.inxight.com/demos/tl_housing/tl_housing.html Inxight Table Lens™ Demo Application]]

Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 02 - Aufgabe 1 - Table Lens

2006-11-13T15:59:33Z

UE-InfoVis0607 9815963: /* Quotations */

== Quotations ==

{Quotation|The Table Lens is a new technique for visualizing and making sense of large tables. By fusing symbolic and graphical representations into a single manipulable focus+context display and providing a small set of interactive operations (e.g. sorting), the Table Lens supports navigating around a large data space easily isolating and investigating interesting features and patterns.}
[Rao and Card, 1994]

{Quotation|The Table Lens supports effective interaction with much larger tables than conventional spreadsheets do. It uses a focus+context (fisheye) technique that works effectively on tabular information because it allows display of crucial label information and multiple distal focal areas.}
[Rao and Card, 1994]

{Quotation|The Table Lens, focus+context visualization for large data tables, allows users to see 100 times as many data values as a spreadsheet in the same screen space in a manner that enables an extremely immediate form of exploratory data analysis.}
[Tenev and Rao, 1997]

== Table Lens Focus+Context Technique ==

Focus+Context techniques support visualizing an entire information structure ''at once as well as zooming in on specific items''. [Rao and Card, 1994]

=== Table Lens Focal Technique ===
The predominant method in displaying tabular data is using the structured view of a spreadsheet respectively a table. Spreadsheets focus on all datasets appropriately. When the data sets become too large to be displayed in a proper way some other visualisation technique must be found. A Table Lens focuses only on some datasets.

[[Image:TableLensTechnique.jpg|Table Lens Focal Technique]]

The graph shows a 10 by 14 table with a focal area of 3 by 2 cells.
Cells in the focal area and the table row and column divide the total focus space of each dimension appropriately. [Rao and Card, 1994]

=== The Distortion ===

Cells are allocated spaces along each dimension independently, there is an interaction in cell geometry.
Four types of cell regions are created by the disortion on the two axis: focal, row focal, column focal and nonfocal. [Rao and Card, 1994]

''Focal'' cells are in the focus area along both axes , ''row focal'' and ''column focal'' are both half focal in that they are in the focal area of only one of the two axes, and ''nonfocal'' are in the context area along both axes. [Rao and Card, 1994]

Due to the fact that rows and columns outside the focal area - the context area - aren´t bent by the warping they can be scanned by a single horizontal or vertical eye movement. This also enables label display, multiple focal areas and multiple focal levels.

To have several focal areas is important for comparing groups of datasets against each other.

== Example ==

The following images were taken from a Table Lens Visualisation demo of collected data of the housing market in Santa Clara, California USA in January 2001. The application shown is the single available software application using this patented Table Lens technique - Inxight Table Lens™.

A total of 1548 datasets are displayed that can be grouped and sorted arbitrarily.

[[image:singleFocalArea.jpg|one focal area]]

On the first image a single focal area is selected. This single selected dataset is equivalent to one house.
The datasets are sorted by the first colum - the prize of the compared houses.

[[image:multipleFocalAreas.jpg|multiple focal areas]]

The second image shows three selected focal areas still sorted by their prizes.

[[image:multipleFocalAreas_diffSort.jpg|multiple focal area re-sorted]]

The third image shows the very same selected datasets as in image 2 - now sorted by the column square foot.

== See also ==

* [[Treemap|Treemap]]
* [[Fisheye View|Fisheye Visualization]]
* [[Perspective Walls|Perspective Walls]]

== References ==

* '''Proceedings'''

[Tenev and Rao, 1997] T. Tenev, R. Rao, "Managing multiple focal levels in Table Lens," infovis, p. 59, 1997 IEEE Symposium on Information Visualization (InfoVis '97), 1997

[Rao and Card, 1994] R. Rao, S.K. Card. The Table Lens: Merging Graphical and Symbolic Representations in an Interactive Focus+Context Visualization for Tabular Information. In Proceedings of the ACM SIGCHI Conference on Human Factors in Computing Systems. ACM, April 1994. Retrieved at: October 29, 2006. http://www.ramanarao.com/papers/tablelens-chi94.pdf

* '''Web Links'''
: [[http://www.inxight.com/demos/tl_housing/tl_housing.html Inxight Table Lens™ Demo Application]]

Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 02 - Aufgabe 1 - Table Lens

2006-11-13T15:59:08Z

UE-InfoVis0607 9815963: /* Definition */

== Quotations ==

{{Quotation|The Table Lens is a new technique for visualizing and making sense of large tables. By fusing symbolic and graphical representations into a single manipulable focus+context display and providing a small set of interactive operations (e.g. sorting), the Table Lens supports navigating around a large data space easily isolating and investigating interesting features and patterns.}}
[Rao and Card, 1994]

{{Quotation|The Table Lens supports effective interaction with much larger tables than conventional spreadsheets do. It uses a focus+context (fisheye) technique that works effectively on tabular information because it allows display of crucial label information and multiple distal focal areas.}}
[Rao and Card, 1994]

{{Quotation|The Table Lens, focus+context visualization for large data tables, allows users to see 100 times as many data values as a spreadsheet in the same screen space in a manner that enables an extremely immediate form of exploratory data analysis.}}
[Tenev and Rao, 1997]

== Table Lens Focus+Context Technique ==

Focus+Context techniques support visualizing an entire information structure ''at once as well as zooming in on specific items''. [Rao and Card, 1994]

=== Table Lens Focal Technique ===
The predominant method in displaying tabular data is using the structured view of a spreadsheet respectively a table. Spreadsheets focus on all datasets appropriately. When the data sets become too large to be displayed in a proper way some other visualisation technique must be found. A Table Lens focuses only on some datasets.

[[Image:TableLensTechnique.jpg|Table Lens Focal Technique]]

The graph shows a 10 by 14 table with a focal area of 3 by 2 cells.
Cells in the focal area and the table row and column divide the total focus space of each dimension appropriately. [Rao and Card, 1994]

=== The Distortion ===

Cells are allocated spaces along each dimension independently, there is an interaction in cell geometry.
Four types of cell regions are created by the disortion on the two axis: focal, row focal, column focal and nonfocal. [Rao and Card, 1994]

''Focal'' cells are in the focus area along both axes , ''row focal'' and ''column focal'' are both half focal in that they are in the focal area of only one of the two axes, and ''nonfocal'' are in the context area along both axes. [Rao and Card, 1994]

Due to the fact that rows and columns outside the focal area - the context area - aren´t bent by the warping they can be scanned by a single horizontal or vertical eye movement. This also enables label display, multiple focal areas and multiple focal levels.

To have several focal areas is important for comparing groups of datasets against each other.

== Example ==

The following images were taken from a Table Lens Visualisation demo of collected data of the housing market in Santa Clara, California USA in January 2001. The application shown is the single available software application using this patented Table Lens technique - Inxight Table Lens™.

A total of 1548 datasets are displayed that can be grouped and sorted arbitrarily.

[[image:singleFocalArea.jpg|one focal area]]

On the first image a single focal area is selected. This single selected dataset is equivalent to one house.
The datasets are sorted by the first colum - the prize of the compared houses.

[[image:multipleFocalAreas.jpg|multiple focal areas]]

The second image shows three selected focal areas still sorted by their prizes.

[[image:multipleFocalAreas_diffSort.jpg|multiple focal area re-sorted]]

The third image shows the very same selected datasets as in image 2 - now sorted by the column square foot.

== See also ==

* [[Treemap|Treemap]]
* [[Fisheye View|Fisheye Visualization]]
* [[Perspective Walls|Perspective Walls]]

== References ==

* '''Proceedings'''

[Tenev and Rao, 1997] T. Tenev, R. Rao, "Managing multiple focal levels in Table Lens," infovis, p. 59, 1997 IEEE Symposium on Information Visualization (InfoVis '97), 1997

[Rao and Card, 1994] R. Rao, S.K. Card. The Table Lens: Merging Graphical and Symbolic Representations in an Interactive Focus+Context Visualization for Tabular Information. In Proceedings of the ACM SIGCHI Conference on Human Factors in Computing Systems. ACM, April 1994. Retrieved at: October 29, 2006. http://www.ramanarao.com/papers/tablelens-chi94.pdf

* '''Web Links'''
: [[http://www.inxight.com/demos/tl_housing/tl_housing.html Inxight Table Lens™ Demo Application]]

Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 02 - Aufgabe 1 - Table Lens

2006-10-30T18:43:52Z

UE-InfoVis0607 9815963: /* References */

== Definition ==

{{Definition|The Table Lens is a new technique for visualizing and making sense of large tables. By fusing symbolic and graphical representations into a single manipulable focus+context display and providing a small set of interactive operations (e.g. sorting), the Table Lens supports navigating around a large data space easily isolating and investigating interesting features and patterns.}}
[Rao and Card, 1994]

{{Definition|The Table Lens supports effective interaction with much larger tables than conventional spreadsheets do. It uses a focus+context (fisheye) technique that works effectively on tabular information because it allows display of crucial label information and multiple distal focal areas.}}
[Rao and Card, 1994]

{{Definition|The Table Lens, focus+context visualization for large data tables, allows users to see 100 times as many data values as a spreadsheet in the same screen space in a manner that enables an extremely immediate form of exploratory data analysis.}}
[Tenev and Rao, 1997]

== Table Lens Focus+Context Technique ==

Focus+Context techniques support visualizing an entire information structure ''at once as well as zooming in on specific items''. [Rao and Card, 1994]

=== Table Lens Focal Technique ===
The predominant method in displaying tabular data is using the structured view of a spreadsheet respectively a table. Spreadsheets focus on all datasets appropriately. When the data sets become too large to be displayed in a proper way some other visualisation technique must be found. A Table Lens focuses only on some datasets.

[[Image:TableLensTechnique.jpg|Table Lens Focal Technique]]

The graph shows a 10 by 14 table with a focal area of 3 by 2 cells.
Cells in the focal area and the table row and column divide the total focus space of each dimension appropriately. [Rao and Card, 1994]

=== The Distortion ===

Cells are allocated spaces along each dimension independently, there is an interaction in cell geometry.
Four types of cell regions are created by the disortion on the two axis: focal, row focal, column focal and nonfocal. [Rao and Card, 1994]

''Focal'' cells are in the focus area along both axes , ''row focal'' and ''column focal'' are both half focal in that they are in the focal area of only one of the two axes, and ''nonfocal'' are in the context area along both axes. [Rao and Card, 1994]

Due to the fact that rows and columns outside the focal area - the context area - aren´t bent by the warping they can be scanned by a single horizontal or vertical eye movement. This also enables label display, multiple focal areas and multiple focal levels.

To have several focal areas is important for comparing groups of datasets against each other.

== Example ==

The following images were taken from a Table Lens Visualisation demo of collected data of the housing market in Santa Clara, California USA in January 2001. The application shown is the single available software application using this patented Table Lens technique - Inxight Table Lens™.

A total of 1548 datasets are displayed that can be grouped and sorted arbitrarily.

[[image:singleFocalArea.jpg|one focal area]]

On the first image a single focal area is selected. This single selected dataset is equivalent to one house.
The datasets are sorted by the first colum - the prize of the compared houses.

[[image:multipleFocalAreas.jpg|multiple focal areas]]

The second image shows three selected focal areas still sorted by their prizes.

[[image:multipleFocalAreas_diffSort.jpg|multiple focal area re-sorted]]

The third image shows the very same selected datasets as in image 2 - now sorted by the column square foot.

== See also ==

* [[Treemap|Treemap]]
* [[Fisheye View|Fisheye Visualization]]
* [[Perspective Walls|Perspective Walls]]

== References ==

* '''Proceedings'''

[Tenev and Rao, 1997] T. Tenev, R. Rao, "Managing multiple focal levels in Table Lens," infovis, p. 59, 1997 IEEE Symposium on Information Visualization (InfoVis '97), 1997

[Rao and Card, 1994] R. Rao, S.K. Card. The Table Lens: Merging Graphical and Symbolic Representations in an Interactive Focus+Context Visualization for Tabular Information. In Proceedings of the ACM SIGCHI Conference on Human Factors in Computing Systems. ACM, April 1994. Retrieved at: October 29, 2006. http://www.ramanarao.com/papers/tablelens-chi94.pdf

* '''Web Links'''
: [[http://www.inxight.com/demos/tl_housing/tl_housing.html Inxight Table Lens™ Demo Application]]

Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 02 - Aufgabe 1 - Table Lens

2006-10-30T18:43:26Z

UE-InfoVis0607 9815963: /* See also */

Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 02 - Aufgabe 1 - Table Lens

2006-10-30T18:42:17Z

UE-InfoVis0607 9815963: /* See also */

== Definition ==

{{Definition|The Table Lens is a new technique for visualizing and making sense of large tables. By fusing symbolic and graphical representations into a single manipulable focus+context display and providing a small set of interactive operations (e.g. sorting), the Table Lens supports navigating around a large data space easily isolating and investigating interesting features and patterns.}}
[Rao and Card, 1994]

{{Definition|The Table Lens supports effective interaction with much larger tables than conventional spreadsheets do. It uses a focus+context (fisheye) technique that works effectively on tabular information because it allows display of crucial label information and multiple distal focal areas.}}
[Rao and Card, 1994]

{{Definition|The Table Lens, focus+context visualization for large data tables, allows users to see 100 times as many data values as a spreadsheet in the same screen space in a manner that enables an extremely immediate form of exploratory data analysis.}}
[Tenev and Rao, 1997]

== Table Lens Focus+Context Technique ==

Focus+Context techniques support visualizing an entire information structure ''at once as well as zooming in on specific items''. [Rao and Card, 1994]

=== Table Lens Focal Technique ===
The predominant method in displaying tabular data is using the structured view of a spreadsheet respectively a table. Spreadsheets focus on all datasets appropriately. When the data sets become too large to be displayed in a proper way some other visualisation technique must be found. A Table Lens focuses only on some datasets.

[[Image:TableLensTechnique.jpg|Table Lens Focal Technique]]

The graph shows a 10 by 14 table with a focal area of 3 by 2 cells.
Cells in the focal area and the table row and column divide the total focus space of each dimension appropriately. [Rao and Card, 1994]

=== The Distortion ===

Cells are allocated spaces along each dimension independently, there is an interaction in cell geometry.
Four types of cell regions are created by the disortion on the two axis: focal, row focal, column focal and nonfocal. [Rao and Card, 1994]

''Focal'' cells are in the focus area along both axes , ''row focal'' and ''column focal'' are both half focal in that they are in the focal area of only one of the two axes, and ''nonfocal'' are in the context area along both axes. [Rao and Card, 1994]

Due to the fact that rows and columns outside the focal area - the context area - aren´t bent by the warping they can be scanned by a single horizontal or vertical eye movement. This also enables label display, multiple focal areas and multiple focal levels.

To have several focal areas is important for comparing groups of datasets against each other.

== Example ==

The following images were taken from a Table Lens Visualisation demo of collected data of the housing market in Santa Clara, California USA in January 2001. The application shown is the single available software application using this patented Table Lens technique - Inxight Table Lens™.

A total of 1548 datasets are displayed that can be grouped and sorted arbitrarily.

[[image:singleFocalArea.jpg|one focal area]]

On the first image a single focal area is selected. This single selected dataset is equivalent to one house.
The datasets are sorted by the first colum - the prize of the compared houses.

[[image:multipleFocalAreas.jpg|multiple focal areas]]

The second image shows three selected focal areas still sorted by their prizes.

[[image:multipleFocalAreas_diffSort.jpg|multiple focal area re-sorted]]

The third image shows the very same selected datasets as in image 2 - now sorted by the column square foot.

== See also ==

* [[Treemap|Treemap]]
* [[Fisheye View|Fisheye Visualization]]

== References ==

* '''Proceedings'''

[Tenev and Rao, 1997] T. Tenev, R. Rao, "Managing multiple focal levels in Table Lens," infovis, p. 59, 1997 IEEE Symposium on Information Visualization (InfoVis '97), 1997

[Rao and Card, 1994] R. Rao, S.K. Card. The Table Lens: Merging Graphical and Symbolic Representations in an Interactive Focus+Context Visualization for Tabular Information. In Proceedings of the ACM SIGCHI Conference on Human Factors in Computing Systems. ACM, April 1994. Retrieved at: October 29, 2006. http://www.ramanarao.com/papers/tablelens-chi94.pdf

* '''Web Links'''
: [[http://www.inxight.com/demos/tl_housing/tl_housing.html Table Lens Demo Application]]

Teaching:TUW - UE InfoVis WS 2006/07 - Gruppe 02 - Aufgabe 1 - Table Lens

2006-10-30T18:41:33Z

UE-InfoVis0607 9815963: /* References */

== Definition ==

{{Definition|The Table Lens is a new technique for visualizing and making sense of large tables. By fusing symbolic and graphical representations into a single manipulable focus+context display and providing a small set of interactive operations (e.g. sorting), the Table Lens supports navigating around a large data space easily isolating and investigating interesting features and patterns.}}
[Rao and Card, 1994]

{{Definition|The Table Lens supports effective interaction with much larger tables than conventional spreadsheets do. It uses a focus+context (fisheye) technique that works effectively on tabular information because it allows display of crucial label information and multiple distal focal areas.}}
[Rao and Card, 1994]

{{Definition|The Table Lens, focus+context visualization for large data tables, allows users to see 100 times as many data values as a spreadsheet in the same screen space in a manner that enables an extremely immediate form of exploratory data analysis.}}
[Tenev and Rao, 1997]

== Table Lens Focus+Context Technique ==

Focus+Context techniques support visualizing an entire information structure ''at once as well as zooming in on specific items''. [Rao and Card, 1994]

=== Table Lens Focal Technique ===
The predominant method in displaying tabular data is using the structured view of a spreadsheet respectively a table. Spreadsheets focus on all datasets appropriately. When the data sets become too large to be displayed in a proper way some other visualisation technique must be found. A Table Lens focuses only on some datasets.

[[Image:TableLensTechnique.jpg|Table Lens Focal Technique]]

The graph shows a 10 by 14 table with a focal area of 3 by 2 cells.
Cells in the focal area and the table row and column divide the total focus space of each dimension appropriately. [Rao and Card, 1994]

=== The Distortion ===

Cells are allocated spaces along each dimension independently, there is an interaction in cell geometry.
Four types of cell regions are created by the disortion on the two axis: focal, row focal, column focal and nonfocal. [Rao and Card, 1994]

''Focal'' cells are in the focus area along both axes , ''row focal'' and ''column focal'' are both half focal in that they are in the focal area of only one of the two axes, and ''nonfocal'' are in the context area along both axes. [Rao and Card, 1994]

Due to the fact that rows and columns outside the focal area - the context area - aren´t bent by the warping they can be scanned by a single horizontal or vertical eye movement. This also enables label display, multiple focal areas and multiple focal levels.

To have several focal areas is important for comparing groups of datasets against each other.

== Example ==

The following images were taken from a Table Lens Visualisation demo of collected data of the housing market in Santa Clara, California USA in January 2001. The application shown is the single available software application using this patented Table Lens technique - Inxight Table Lens™.

A total of 1548 datasets are displayed that can be grouped and sorted arbitrarily.

[[image:singleFocalArea.jpg|one focal area]]

On the first image a single focal area is selected. This single selected dataset is equivalent to one house.
The datasets are sorted by the first colum - the prize of the compared houses.

[[image:multipleFocalAreas.jpg|multiple focal areas]]

The second image shows three selected focal areas still sorted by their prizes.

[[image:multipleFocalAreas_diffSort.jpg|multiple focal area re-sorted]]

The third image shows the very same selected datasets as in image 2 - now sorted by the column square foot.

== See also ==

* [[Treemap|Treemap]]
* [[Fisheye|Fisheye Visualization]]

== References ==

* '''Proceedings'''

[Tenev and Rao, 1997] T. Tenev, R. Rao, "Managing multiple focal levels in Table Lens," infovis, p. 59, 1997 IEEE Symposium on Information Visualization (InfoVis '97), 1997

[Rao and Card, 1994] R. Rao, S.K. Card. The Table Lens: Merging Graphical and Symbolic Representations in an Interactive Focus+Context Visualization for Tabular Information. In Proceedings of the ACM SIGCHI Conference on Human Factors in Computing Systems. ACM, April 1994. Retrieved at: October 29, 2006. http://www.ramanarao.com/papers/tablelens-chi94.pdf

* '''Web Links'''
: [[http://www.inxight.com/demos/tl_housing/tl_housing.html Table Lens Demo Application]]