InfoVis:Wiki - User contributions [en]

Teaching:TUW - UE InfoVis WS 2007/08 - Gruppe 07 - Aufgabe 4

2008-01-04T19:35:14Z

UE-InfoVis0708 0203002:

== Assignment description ==
[http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/infovis_ue_aufgabe4.html Description of the fourth task]
=== Assigned data / model ===
[[Image:20061115_blutuntersuchung.jpg]]

[[Image:20070920_blutuntersuchung.jpg]]

== Description of the application field ==
The two tables above show medical data, which are two diagnostic findings of a patient recorded at different dates. In each table row, one examination, it's result, the unit of the result and the interval of "optimal" values are shown. The examination results descripe the amount of chemical compounds or substances in the patient's body. Diagnostic findings play an important role for medical diagnosis. 
The first table consists of more rows than the second. Perhaps less substances in body were examined or the tableview shows only a short section of the results. 

Each table has four columns. The names of the examinations and the name of the substances the patient has been tested on, respectively, are written in the first column. The result values - numerical values - for each examination are denoted in the second column. Some values are floating point numbers, others are integers. The reason of using floating numbers is, that small variances of the values may cause high differences in diagnosis. One examination has more than one result ("Differential Blutb."), but we don't know the meaning of this results. Some of the cells in this column are marked with "*". This indicates that a value does not reside in an interval (specified in the fourth column). In the third column, the units of the results are shown. The fourth column lists the intervals of reference values - the "optimal" values - for each examination. If a value resides within an interval, the result is "good" - which means that the patient has no lack and no overrun of a specific element. 
Multiple forms of intervals are being used, e.g:
* bis 200
* 220-480
* <66

The data is sorted ascending using the first column (the name of the test). None of the values can be classified as nominal or ordinal. We are only dealing with floating point numbers (continuous) and integers (discrete). There is also no hierarchy in this data. It's actually a list of key value pairs where the value-part can contain one or multiple values and an information about the units used and reference.

But the use of diagnostic findings in practice is slightly different. They are not being used as standalone tables with some test results. The values are being examined how they change in time. This fact changes the dimensionality of all data (test key-value-pairs) from 1-dimensional to 2-dimensional because they usually change over time. This is the main issue why we would suggest a different presentation of this data in a more clearer, simpler and legible way.

=== Target group ===
The target group (the data has been produced for) is definitely hospital/medical staff. We think that people who do not have any medical knowledge, are not able to make a diagnosis based on the data. They can basically determine which test results do not reside within the reference intervals. The data is very private and should only be seen from people authorized people - like medical stuff.

== The DIAMONT application ==
We named our application '''DIAMONT''' which stands for '''DIA'''gnosis '''MON'''itoring '''T'''ool. This tool has been designed to be used by the hospital's medical staff including doctors and nurses. It shall provide a more easier and better organized view on the data from test sets. It is meant to be realized either in a form of a desktop application or as a PDA (handheld-gadget) application. The accessed data has to been accessible remotely, therefore needs to be located on a server.

The next subsections will provide a detailed look at the interface of the DIAMONT application. The reference numbers reference the red numbers located on the scrrenshot of the application.

[[{{ns:6}}:0708_Gruppe_07_diamont.jpg]]

ad 1: Patient Search 
The patient search section allows to search for specific patients. By simply typing in a name (or other inforamtion which can be used to identify a patient) the program shows a list of records in the main window. By single-clicking a row, more detailed information about the selected patient is shown in the "timeline" window, which is for this purpose an "information" window. Information of the patient can be: name, date of birth, dates of hospitals stays etc. Double-clicking a row will load the patients test values to the list of available tests (3).
 
ad 2: Patient detail information 
This section displays patient informations such as name, birthdate and habitation, which can be customized using the menu function (7).
 
ad 3: List of available tests 
The list of available tests shows the names of the tests/examinations that are represented in the dataset. By dragging a test into the main window (4), the examination information is visualised in the main window. The test list holds information on several other aspects of the tests, by using a color-coded printing method. Test values which are low compared to their reference range are printed blue, while values which are to high are printed red. Values that are within the reference range are shown in black color. This feature allows the user to quickly scan the tests for outstanding values, that might be interesting for further investigation. Tests that have been dropped to the main window (4) are printed with a green background, so that the user can tell just by looking at the list, which tests are currently under observation by the program.
 
ad 4: Main Window 
The main window provides the most detailed view on the data. First, its being used to select a patient by his/hers name (and some additional information) from a list returned by the search process. The main purpose of this window is to display detailed information of the test results. The user of this application drags and drops a test (or tests) he is interested in into this field to display it. This field has three sections aligned vertically filling up its full height and aligns the tests as follows. The upper and lower sections are being separated from the middle section by dashed lines. Additionally, they are filled with a gradient color. The upper sections holds test with the result with a value that lies above the top limit of the normal interval for this test. The center part holds all the tests with a result that lies in the normal interval. The last bottom part displays all tests that lie underneath the minimum of the normal interval. Each test is being displayed as a circle with a certain background color with some textual information. This information holds the name of the test, the value of the test and the units for this value. This field provides only information about the test results obtained during one test. The user can see these results in a time context in the window beneath this one (marked as 6 in the picture above). He can also navigate through multiple tests by using this window.
 
ad 5: Medical Notes 
Each circle in the main window, which shows the result value of one examination, can be selected by mouseclick. After selection, the user can click on the arrow at (5) and a texteditor opens. He can write some important notes there.
 
ad 6: Timeline / Graph 
This window displays time series lines that reference the tests being picked by dragging a test from the left window into the main window. Its being used for two purposes. The first is to put the test results into a time context. The user can follow the progress of the selected tests, search for anomalies or/and find correlations. The other purpose of this window is to navigate through the time using it as time line. The user needs to select a certain date (dates in this window reference test dates) which makes the application reload the data in the main window. The color of each line in this graph is the same as the background color of this test in the main window. The user can also enlarge the region of this window to get a better representation of the data. The leftmost and rightmost arrows are being used to scroll through the the graph.
 
ad 7: Menu 
By pressing the "Menu"-Button, a pop-up window opens and some options are listed. 
The options:

* Print shown diagnostic results: The shown picture in the main window and a table which contains informations for each examination can be printed.
* Print line chart: The shown section in (5) can be printed. Additionally, the user has the option to define the from/to-dates new. A list of the shown examinations and related information is printed too (in form of a table).
* Print whole diagnostic report: The whole set of diagnostic findings of the picked date (which is displayed in the main window)can be printed in form of a table. In each row, one examination, it's result, the unit of the result and the range of optimal result values is put column by column. The user has also the possibility to choose another date for printing the related diagnostic findings.
* Send Message/Data: The user can share notes or views with other physicans of the hospital.
* Options: The user can customize specific functions of the program (e.g. data of the patient that is shown in the patient detail information section (2)).
* Help: The user can read the documentation of the software and instructions of software usage.
 

== Links ==

* [[Teaching:TUW_-_UE_InfoVis_WS_2007/08|InfoVis:Wiki UE Homepage]]

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

*[[Teaching:TUW - UE InfoVis WS 2007/08 - Gruppe 07|Gruppe 07]]

Teaching:TUW - UE InfoVis WS 2007/08 - Gruppe 07 - Aufgabe 4

2008-01-04T19:33:57Z

UE-InfoVis0708 0203002:

== Assignment description ==
[http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/infovis_ue_aufgabe4.html Description of the fourth task]
=== Assigned data / model ===
[[Image:20061115_blutuntersuchung.jpg]]

[[Image:20070920_blutuntersuchung.jpg]]

== Description of the application field ==
The two tables above show medical data, which are two diagnostic findings of a patient recorded at different dates. In each table row, one examination, it's result, the unit of the result and the interval of "optimal" values are shown. The examination results descripe the amount of chemical compounds or substances in the patient's body. Diagnostic findings play an important role for medical diagnosis. 
The first table consists of more rows than the second. Perhaps less substances in body were examined or the tableview shows only a short section of the results. 

Each table has four columns. The names of the examinations and the name of the substances the patient has been tested on, respectively, are written in the first column. The result values - numerical values - for each examination are denoted in the second column. Some values are floating point numbers, others are integers. The reason of using floating numbers is, that small variances of the values may cause high differences in diagnosis. One examination has more than one result ("Differential Blutb."), but we don't know the meaning of this results. Some of the cells in this column are marked with "*". This indicates that a value does not reside in an interval (specified in the fourth column). In the third column, the units of the results are shown. The fourth column lists the intervals of reference values - the "optimal" values - for each examination. If a value resides within an interval, the result is "good" - which means that the patient has no lack and no overrun of a specific element. 
Multiple forms of intervals are being used, e.g:
* bis 200
* 220-480
* <66

The data is sorted ascending using the first column (the name of the test). None of the values can be classified as nominal or ordinal. We are only dealing with floating point numbers (continuous) and integers (discrete). There is also no hierarchy in this data. It's actually a list of key value pairs where the value-part can contain one or multiple values and an information about the units used and reference.

But the use of diagnostic findings in practice is slightly different. They are not being used as standalone tables with some test results. The values are being examined how they change in time. This fact changes the dimensionality of all data (test key-value-pairs) from 1-dimensional to 2-dimensional because they usually change over time. This is the main issue why we would suggest a different presentation of this data in a more clearer, simpler and legible way.

=== Target group ===
The target group (the data has been produced for) is definitely hospital/medical staff. We think that people who do not have any medical knowledge, are not able to make a diagnosis based on the data. They can basically determine which test results do not reside within the reference intervals. The data is very private and should only be seen from people authorized people - like medical stuff.

== The DIAMONT application ==
We named our application '''DIAMONT''' which stands for '''DIA'''gnosis '''MON'''itoring '''T'''ool. This tool has been designed to be used by the hospital's medical staff including doctors and nurses. It shall provide a more easier and better organized view on the data from test sets. It is meant to be realized either in a form of a desktop application or as a PDA (handheld-gadget) application. The accessed data has to been accessible remotely, therefore needs to be located on a server.

The next subsections will provide a detailed look at the interface of the DIAMONT application. The reference numbers reference the red numbers located on the scrrenshot of the application.

[[{{ns:6}}:0708_Gruppe_07_diamont.jpg]]

ad 1: Patient Search 
The patient search section allows to search for specific patients. By simply typing in a name (or other inforamtion which can be used to identify a patient) the program shows a list of records in the main window. By single-clicking a row, more detailed information about the selected patient is shown in the "timeline" window, which is for this purpose an "information" window. Information of the patient can be: name, date of birth, dates of hospitals stays etc. Double-clicking a row will load the patients test values to the list of available tests (3).
 
ad 2: Patient detail information 
This section displays patient informations such as name, birthdate and habitation, which can be customized using the menu function (7).
 
ad 3: List of available tests 
The list of available tests shows the names of the tests/examinations that are represented in the dataset. By dragging a test into the main window (4), the examination information is visualised in the main window. The test list holds information on several other aspects of the tests, by using a color-coded printing method. Test values which are low compared to their reference range are printed blue, while values which are to high are printed red. Values that are within the reference range are shown in black color. This feature allows the user to quickly scan the tests for outstanding values, that might be interesting for further investigation. Tests that have been dropped to the main window (4) are printed with a green background, so that the user can tell just by looking at the list, which tests are currently under observation by the program.
 
ad 4: Main Window 
The main window provides the most detailed view on the data. First, its being used to select a patient by his/hers name (and some additional information) from a list returned by the search process. The main purpose of this window is to display detailed information of the test results. The user of this application drags and drops a test (or tests) he is interested in into this field to display it. This field has three sections aligned vertically filling up its full height and aligns the tests as follows. The upper and lower sections are being separated from the middle section by dashed lines. Additionally, they are filled with a gradient color. The upper sections holds test with the result with a value that lies above the top limit of the normal interval for this test. The center part holds all the tests with a result that lies in the normal interval. The last bottom part displays all tests that lie underneath the minimum of the normal interval. Each test is being displayed as a circle with a certain background color with some textual information. This information holds the name of the test, the value of the test and the units for this value. This field provides only information about the test results obtained during one test. The user can see these results in a time context in the window beneath this one (marked as 6 in the picture above). He can also navigate through multiple tests by using this window.
 
ad 5: Medical Notes 
Each circle in the main window, which shows the result value of one examination, can be selected by mouseclick. After selection, the user can click on the arrow at (5) and a texteditor opens. He can write some important notes there.
 
ad 6: Timeline / Graph 
This window displays time series lines that reference the tests being picked by dragging a test from the left window into the main window. Its being used for two purposes. The first is to put the test results into a time context. The user can follow the progress of the selected tests, search for anomalies or/and find correlations. The other purpose of this window is to navigate through the time using it as time line. The user needs to select a certain date (dates in this window reference test dates) which makes the application reload the data in the main window. The color of each line in this graph is the same as the background color of this test in the main window. The user can also enlarge the region of this window to get a better representation of the data. The leftmost and rightmost arrows are being used to scroll through the the graph.
 
ad 7: Menu 
By pressing the "Menu"-Button, a pop-up window opens and some options are listed. 
The options:

* Print shown diagnostic results: The shown picture in the main window and a table which contains informations for each examination can be printed.
* Print line chart: The shown section in (5) can be printed. Additionally, the user has the option to define the from/to-dates new. A list of the shown examinations and related information is printed too (in form of a table).
* Print whole diagnostic report: The whole set of diagnostic findings of the picked date (which is displayed in the main window)can be printed in form of a table. In each row, one examination, it's result, the unit of the result and the range of optimal result values is put column by column. The user has also the possibility to choose another date for printing the related diagnostic findings.
* Send Message/Data: The user can share notes or views with other physicans of the hospital.
* Options: The user can customize specific function of the program (e.g. data of the patient that is shown in the patient detail information section (2)).
* Help: The user can read the documentation of the software and instructions of software usage.
 

== Links ==

* [[Teaching:TUW_-_UE_InfoVis_WS_2007/08|InfoVis:Wiki UE Homepage]]

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

*[[Teaching:TUW - UE InfoVis WS 2007/08 - Gruppe 07|Gruppe 07]]

Teaching:TUW - UE InfoVis WS 2007/08 - Gruppe 07 - Aufgabe 4

2008-01-04T19:00:03Z

UE-InfoVis0708 0203002:

== Assignment description ==
[http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/infovis_ue_aufgabe4.html Description of the fourth task]
=== Assigned data / model ===
[[Image:20061115_blutuntersuchung.jpg]]

[[Image:20070920_blutuntersuchung.jpg]]

== Description of the application field ==
The two tables above show medical data, which are two diagnostic findings of a patient recorded at different dates. In each table row, one examination, it's result, the unit of the result and the interval of "optimal" values are shown. The examination results descripe the amount of chemical compounds or substances in the patient's body. Diagnostic findings play an important role for medical diagnosis. 
The first table consists of more rows than the second. Perhaps less substances in body were examined or the tableview shows only a short section of the results. 

Each table has four columns. The names of the examinations and the name of the substances the patient has been tested on, respectively, are written in the first column. The result values - numerical values - for each examination are denoted in the second column. Some values are floating point numbers, others are integers. The reason of using floating numbers is, that small variances of the values may cause high differences in diagnosis. One examination has more than one result ("Differential Blutb."), but we don't know the meaning of this results. Some of the cells in this column are marked with "*". This indicates that a value does not reside in an interval (specified in the fourth column). In the third column, the units of the results are shown. The fourth column lists the intervals of reference values - the "optimal" values - for each examination. If a value resides within an interval, the result is "good" - which means that the patient has no lack and no overrun of a specific element. 
Multiple forms of intervals are being used, e.g:
* bis 200
* 220-480
* <66

The data is sorted ascending using the first column (the name of the test). None of the values can be classified as nominal or ordinal. We are only dealing with floating point numbers (continuous) and integers (discrete). There is also no hierarchy in this data. It's actually a list of key value pairs where the value-part can contain one or multiple values and an information about the units used and reference.

But the use of diagnostic findings in practice is slightly different. They are not being used as standalone tables with some test results. The values are being examined how they change in time. This fact changes the dimensionality of all data (test key-value-pairs) from 1-dimensional to 2-dimensional because they usually change over time. This is the main issue why we would suggest a different presentation of this data in a more clearer, simpler and legible way.

=== Target group ===
The target group (the data has been produced for) is definitely hospital/medical staff. We think that the most common people can't start anything with this data. They can basically determine which test results don't match the reference interval and therefore didn't go well but this data needs to be interpreted by a specialist.
Another thing is that this data is private and should therefore not be seen by anyone except for the doctor and the patient.

== The DIAMONT application ==
We named our application '''DIAMONT''' which stands for '''DIA'''gnosis '''MON'''itoring '''T'''ool. This tool has been designed to be used by the hospital's medical staff including doctors and nurses. It shall provide a more easier and better organized view on the data from test sets. It is meant to be realized either in a form of a desktop application or as a PDA (handheld-gadget) application. The accessed data has to been accessible remotely, therefore needs to be located on a server.

The next subsections will provide a detailed look at the interface of the DIAMONT application. The reference numbers reference the red numbers located on the scrrenshot of the application.

[[{{ns:6}}:0708_Gruppe_07_diamont.jpg]]

ad 1: Patient Search 
The patient search section allows searching patient records. Using DIAMONT it will be typically the first step to look up a specific patient record. By simply typing in a name (or other inforamtion which can be used to identify a patient) the program shows a list of corresponding patient records in the main window (4). By selecting a name, more detailed information on that specific record is shown in the timeline window (6). By double-clicking a name, the program will load the corresponding dataset into the detail information window on the left.
 
ad 2: Patient detail information 
This section displays patient informations such as name, birthdate and habitation, which can be customized using the menu function (7).
 
ad 3: List of available tests 
The list of available tests shows the names of the test that are presented in the dataset. By dragging a test into the main window (4), this tests inforamtion is visualised in the main window. The test list holds information on several other aspects of the tests, by using a color-coded printing method. Test values which are low compared to their reference range are printed blue, while values which are to high are printed red. Values that are within the reference range are shown in black color. This feature allows the user to quickly scan the tests for outstanding values, that might be interesting for further investigation. Tests that have been dropped to the main window (4) are printed with a green background, so that the user can tell just by looking at the list, which tests are currently under observation by the program.
 
ad 4: Main Window 
The main window provides the most detailed view on the data. First, its being used to select a patient by his/hers name (and some additional information) from a list returned by the search process. The main purpose of this window is to display detailed information of the test results. The user of this application drags and drops a test (or tests) he is interested in into this field to display it. This field has three sections aligned vertically filling up its full height and aligns the tests as follows. The upper and lower sections are being separated from the middle section by dashed lines. Additionally, they are filled with a gradient color. The upper sections holds test with the result with a value that lies above the top limit of the normal interval for this test. The center part holds all the tests with a result that lies in the normal interval. The last bottom part displays all tests that lie underneath the minimum of the normal interval. Each test is being displayed as a circle with a certain background color with some textual information. This information holds the name of the test, the value of the test and the units for this value. This field provides only information about the test results obtained during one test. The user can see these results in a time context in the window beneath this one (marked as 6 in the picture above). He can also navigate through multiple tests by using this window.
 
ad 5:Medical Notes 
Each circle in the main window, which shows the result value of one examination, can be selected by mouseclick. After selection, the user can click on the arrow at (5) and a texteditor opens. He can write some important notes there.
 
ad 6:Timeline / Graph 
This window displays time series lines that reference the tests being picked by dragging a test from the left window into the main window. Its being used for two purposes. The first is to put the test results into a time context. The user can follow the progress of the selected tests, search for anomalies or/and find correlations. The other purpose of this window is to navigate through the time using it as time line. The user needs to select a certain date (dates in this window reference test dates) which makes the application reload the data in the main window. The color of each line in this graph is the same as the background color of this test in the main window. The user can also enlarge the region of this window to get a better representation of the data. The leftmost and rightmost arrows are being used to scroll through the the graph.
 
ad 7: Menu 
By pressing the "Menu"-Button, a pop-up window opens and some options are listed. 
The options:

* Print shown diagnostic results: The shown picture in the main window and a table which contains informations for each examination can be printed.
* Print line chart: The shown section in (5) can be printed. Additionally, the user has the option to define the from/to-dates new. A list of the shown examinations and related information is printed too (in form of a table).
* Print whole diagnostic report: The whole set of diagnostic findings of the picked date (which is displayed in the main window)can be printed in form of a table. In each row, one examination, it's result, the unit of the result and the range of optimal result values is put column by column. The user has also the possibility to choose another date for printing the related diagnostic findings.
* Send Message/Data: The user can share notes or views with other physicans of the hospital.
* Options: The user can customize specific function of the program (e.g. data of the patient that is shown in the patient detail information section (2)).
* Help: The user can read the documentation of the software and instructions of software usage.
 

 
XXX '''REMOVE FROM HERE''' XXX
== Aufgabenstellung ==

Aufgabe ist das Design einer interaktiven Visualisierungsapplikation zur Darstellung und Exploration (des zeitlichen Verlaufs) von Laborwerten einer Blutuntersuchung. BenutzerInnen, Einsatzzweck, Tasks, etc. sollen von Euch selbst festgelegt und beschrieben werden.

[http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/infovis_ue_aufgabe4.html Beschreibung der Aufgabe 4]

=== Beispiele für derartige Datensätze ===

[[Image:20061115_blutuntersuchung.jpg]]

[[Image:20070920_blutuntersuchung.jpg]]

XXX '''REMOVE TO HERE '''XXX
== Links ==

* [[Teaching:TUW_-_UE_InfoVis_WS_2007/08|InfoVis:Wiki UE Homepage]]

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

*[[Teaching:TUW - UE InfoVis WS 2007/08 - Gruppe 07|Gruppe 07]]

Teaching:TUW - UE InfoVis WS 2007/08 - Gruppe 07 - Aufgabe 4

2008-01-04T18:58:56Z

UE-InfoVis0708 0203002:

== Assignment description ==
[http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/infovis_ue_aufgabe4.html Description of the fourth task]
=== Assigned data / model ===
[[Image:20061115_blutuntersuchung.jpg]]

[[Image:20070920_blutuntersuchung.jpg]]

== Description of the application field ==
The two tables above show medical data, which are two diagnostic findings of a patient recorded at different dates. In each table row, one examination, it's result, the unit of the result and the interval of "optimal" values are shown. The examination results descripe the amount of chemical compounds or substances in the patient's body. Diagnostic findings play an important role for medical diagnosis. 
The first table consists of more rows than the second. Perhaps less substances in body were examined or the tableview shows only a short section of the results. 

Each table has four columns. The names of the examinations and the name of the substances the patient has been tested on, respectively, are written in the first column. The result values - numerical values - for each examination are denoted in the second column. Some values are floating point numbers, others are integers. The reason of using floating numbers is, that small variances of the values may cause high differences in diagnosis. One examination has more than one result ("Differential Blutb."), but we don't know the meaning of this results. Some of the cells in this column are marked with "*". This indicates that a value does not reside in an interval (specified in the fourth column). In the third column, the units of the results are shown. The fourth column lists the intervals of reference values - the "optimal" values - for each examination. If a value resides within an interval, the result is "good" - which means that the patient has no lack and no overrun of a specific element. 
Multiple forms of intervals are being used, e.g:
* bis 200
* 220-480
* <66

The data is sorted ascending using the first column (the name of the test). None of the values can be classified as nominal or ordinal. We are only dealing with floating point numbers (continuous) and integers (discrete). There is also no hierarchy in this data. It's actually a list of key value pairs where the value-part can contain one or multiple values and an information about the units used and reference.

But the use of diagnostic findings in practice is slightly different. They are not being used as standalone tables with some test results. The values are being examined how they change in time. This fact changes the dimensionality of all data (test key-value-pairs) from 1-dimensional to 2-dimensional because they usually change over time. This is the main issue why we would suggest a different presentation of this data in a more clearer, simpler and legible way.

=== Target group ===
The target group (the data has been produced for) is definitely hospital/medical staff. We think that the most common people can't start anything with this data. They can basically determine which test results don't match the reference interval and therefore didn't go well but this data needs to be interpreted by a specialist.
Another thing is that this data is private and should therefore not be seen by anyone except for the doctor and the patient.

== The DIAMONT application ==
We named our application '''DIAMONT''' which stands for '''DIA'''gnosis '''MON'''itoring '''T'''ool. This tool has been designed to be used by the hospital's medical staff including doctors and nurses. It shall provide a more easier and better organized view on the data from test sets. It is meant to be realized either in a form of a desktop application or as a PDA (handheld-gadget) application. The accessed data has to been accessible remotely, therefore needs to be located on a server.

The next subsections will provide a detailed look at the interface of the DIAMONT application. The reference numbers reference the red numbers located on the scrrenshot of the application.

[[{{ns:6}}:0708_Gruppe_07_diamont.jpg]]

ad 1: Patient Search 
The patient search section allows searching patient records. Using DIAMONT it will be typically the first step to look up a specific patient record. By simply typing in a name (or other inforamtion which can be used to identify a patient) the program shows a list of corresponding patient records in the main window (4). By selecting a name, more detailed information on that specific record is shown in the timeline window (6). By double-clicking a name, the program will load the corresponding dataset into the detail information window on the left.
 
ad 2: Patient detail information 
This section displays patient informations such as name, birthdate and habitation, which can be customized using the menu function (7).
 
ad 3: List of available tests 
The list of available tests shows the names of the test that are presented in the dataset. By dragging a test into the main window (4), this tests inforamtion is visualised in the main window. The test list holds information on several other aspects of the tests, by using a color-coded printing method. Test values which are low compared to their reference range are printed blue, while values which are to high are printed red. Values that are within the reference range are shown in black color. This feature allows the user to quickly scan the tests for outstanding values, that might be interesting for further investigation. Tests that have been dropped to the main window (4) are printed with a green background, so that the user can tell just by looking at the list, which tests are currently under observation by the program.
 
ad 4: Main Window 
The main window provides the most detailed view on the data. First, its being used to select a patient by his/hers name (and some additional information) from a list returned by the search process. The main purpose of this window is to display detailed information of the test results. The user of this application drags and drops a test (or tests) he is interested in into this field to display it. This field has three sections aligned vertically filling up its full height and aligns the tests as follows. The upper and lower sections are being separated from the middle section by dashed lines. Additionally, they are filled with a gradient color. The upper sections holds test with the result with a value that lies above the top limit of the normal interval for this test. The center part holds all the tests with a result that lies in the normal interval. The last bottom part displays all tests that lie underneath the minimum of the normal interval. Each test is being displayed as a circle with a certain background color with some textual information. This information holds the name of the test, the value of the test and the units for this value. This field provides only information about the test results obtained during one test. The user can see these results in a time context in the window beneath this one (marked as 6 in the picture above). He can also navigate through multiple tests by using this window.
 
ad 5:Medical Notes 
Each circle in the main window, which shows the result value of one examination, can be selected by mouseclick. After selection, the user can click on the arrow at (5) and a texteditor opens. He can write some important notes there.
 
ad 6:Timeline / Graph 
This window displays time series lines that reference the tests being picked by dragging a test from the left window into the main window. Its being used for two purposes. The first is to put the test results into a time context. The user can follow the progress of the selected tests, search for anomalies or/and find correlations. The other purpose of this window is to navigate through the time using it as time line. The user needs to select a certain date (dates in this window reference test dates) which makes the application reload the data in the main window. The color of each line in this graph is the same as the background color of this test in the main window. The user can also enlarge the region of this window to get a better representation of the data. The leftmost and rightmost arrows are being used to scroll through the the graph.
 
ad 7: Menu 
By pressing the "Menu"-Button, a pop-up window opens and some options are listed. 
The options:

* Print shown diagnostic results: The shown picture in the main window and a table which contains informations for each examination can be printed.
* Print line chart: The shown section in (5) can be printed. Additionally, the user has the option to define the from/to-dates new. A list of the shown examinations and related information is printed too (in form of a table).
* Print whole diagnostic report: The whole set of diagnostic findings of the picked date (which is displayed in the main window)can be printed in form of a table. In each row, one examination, it's result, the unit of the result and the range of optimal result values is put column by column. The user has also the possibility to choose another date for printing the related diagnostic findings.
* Send Message/Data: The user can share notes or views with other physicans of the hospital.
* Options: The user can customize specific function of the program (e.g. data of the patient that is shown in the patient detail information section (2)).
* Help: The user can read the documentation of the software and instructions of software usage.
 

 
XXX '''REMOVE FROM HERE''' XXX
== Aufgabenstellung ==

Aufgabe ist das Design einer interaktiven Visualisierungsapplikation zur Darstellung und Exploration (des zeitlichen Verlaufs) von Laborwerten einer Blutuntersuchung. BenutzerInnen, Einsatzzweck, Tasks, etc. sollen von Euch selbst festgelegt und beschrieben werden.

[http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/infovis_ue_aufgabe4.html Beschreibung der Aufgabe 4]

=== Beispiele für derartige Datensätze ===

[[Image:20061115_blutuntersuchung.jpg]]

[[Image:20070920_blutuntersuchung.jpg]]

XXX '''REMOVE TO HERE '''XXX
== Links ==

* [[Teaching:TUW_-_UE_InfoVis_WS_2007/08|InfoVis:Wiki UE Homepage]]

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

*[[Teaching:TUW - UE InfoVis WS 2007/08 - Gruppe 07|Gruppe 07]]

Teaching:TUW - UE InfoVis WS 2007/08 - Gruppe 07 - Aufgabe 4

2008-01-04T18:57:42Z

UE-InfoVis0708 0203002:

== Assignment description ==
[http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/infovis_ue_aufgabe4.html Description of the fourth task]
=== Assigned data / model ===
[[Image:20061115_blutuntersuchung.jpg]]

[[Image:20070920_blutuntersuchung.jpg]]

== Description of the application field ==
The two tables above show medical data, which are two diagnostic findings of a patient recorded at different dates. In each table row, one examination, it's result, the unit of the result and the interval of "optimal" values are shown. The examination results descripe the amount of chemical compounds or substances in the patient's body. Diagnostic findings play an important role for medical diagnosis. 
The first table consists of more rows than the second. Perhaps less substances in body were examined or the tableview shows only a short section of the results. 

Each table has four columns. The names of the examinations and the name of the substances the patient has been tested on, respectively, are written in the first column. The result values - numerical values - for each examination are denoted in the second column. Some values are floating point numbers, others are integers. The reason of using floating numbers is, that small variances of the values may cause high differences in diagnosis. One examination has more than one result ("Differential Blutb."), but we don't know the meaning of this results. Some of the cells in this column are marked with "*". This indicates that a value does not reside in an interval (specified in the fourth column). In the third column, the units of the results are shown. The fourth column lists the intervals of reference values - the "optimal" values - for each examination. If a value resides within an interval, the result is "good" - which means that the patient has no lack and no overrun of a specific element. 
Multiple forms of intervals are being used, e.g:
* bis 200
* 220-480
* <66

The data is sorted ascending using the first column (the name of the test). None of the values can be classified as nominal or ordinal. We are only dealing with floating point numbers (continuous) and integers (discrete). There is also no hierarchy in this data. It's actually a list of key value pairs where the value-part can contain one or multiple values and an information about the units used and reference.

But the use of diagnostic findings in practice is slightly different. They are not being used as standalone tables with some test results. The values are being examined how they change in time. This fact changes the dimensionality of all data (test key-value-pairs) from 1-dimensional to 2-dimensional because they usually change over time. This is the main issue why we would suggest a different presentation of this data in a more clearer, simpler and legible way.

=== Target group ===
The target group (the data has been produced for) is definitely hospital/medical staff. We think that the most common people can't start anything with this data. They can basically determine which test results don't match the reference interval and therefore didn't go well but this data needs to be interpreted by a specialist.
Another thing is that this data is private and should therefore not be seen by anyone except for the doctor and the patient.

== The DIAMONT application ==
We named our application '''DIAMONT''' which stands for '''DIA'''gnosis '''MON'''itoring '''T'''ool. This tool has been designed to be used by the hospital's medical staff including doctors and nurses. It shall provide a more easier and better organized view on the data from test sets. It is meant to be realized either in a form of a desktop application or as a PDA (handheld-gadget) application. The accessed data has to been accessible remotely, therefore needs to be located on a server.

The next subsections will provide a detailed look at the interface of the DIAMONT application. The reference numbers reference the red numbers located on the scrrenshot of the application.

[[{{ns:6}}:0708_Gruppe_07_diamont.jpg]]

ad 1: Patient Search 
The patient search section allows searching patient records. Using DIAMONT it will be typically the first step to look up a specific patient record. By simply typing in a name (or other inforamtion which can be used to identify a patient) the program shows a list of corresponding patient records in the main window (4). By selecting a name, more detailed information on that specific record is shown in the timeline window (6). By double-clicking a name, the program will load the corresponding dataset into the detail information window on the left.

ad 2: Patient detail information 
This section displays patient informations such as name, birthdate and habitation, which can be customized using the menu function (7).

ad 3: List of available tests 
The list of available tests shows the names of the test that are presented in the dataset. By dragging a test into the main window (4), this tests inforamtion is visualised in the main window. The test list holds information on several other aspects of the tests, by using a color-coded printing method. Test values which are low compared to their reference range are printed blue, while values which are to high are printed red. Values that are within the reference range are shown in black color. This feature allows the user to quickly scan the tests for outstanding values, that might be interesting for further investigation. Tests that have been dropped to the main window (4) are printed with a green background, so that the user can tell just by looking at the list, which tests are currently under observation by the program.

ad 4: Main Window 
The main window provides the most detailed view on the data. First, its being used to select a patient by his/hers name (and some additional information) from a list returned by the search process. The main purpose of this window is to display detailed information of the test results. The user of this application drags and drops a test (or tests) he is interested in into this field to display it. This field has three sections aligned vertically filling up its full height and aligns the tests as follows. The upper and lower sections are being separated from the middle section by dashed lines. Additionally, they are filled with a gradient color. The upper sections holds test with the result with a value that lies above the top limit of the normal interval for this test. The center part holds all the tests with a result that lies in the normal interval. The last bottom part displays all tests that lie underneath the minimum of the normal interval. Each test is being displayed as a circle with a certain background color with some textual information. This information holds the name of the test, the value of the test and the units for this value. This field provides only information about the test results obtained during one test. The user can see these results in a time context in the window beneath this one (marked as 6 in the picture above). He can also navigate through multiple tests by using this window.
 
ad 5:Medical Notes 
Each circle in the main window, which shows the result value of one examination, can be selected by mouseclick. After selection, the user can click on the arrow at (5) and a texteditor opens. He can write some important notes there.
 
ad 6:Timeline / Graph 
This window displays time series lines that reference the tests being picked by dragging a test from the left window into the main window. Its being used for two purposes. The first is to put the test results into a time context. The user can follow the progress of the selected tests, search for anomalies or/and find correlations. The other purpose of this window is to navigate through the time using it as time line. The user needs to select a certain date (dates in this window reference test dates) which makes the application reload the data in the main window. The color of each line in this graph is the same as the background color of this test in the main window. The user can also enlarge the region of this window to get a better representation of the data. The leftmost and rightmost arrows are being used to scroll through the the graph.
 
ad 7: Menu 
By pressing the "Menu"-Button, a pop-up window opens and some options are listed. 
The options:

* Print shown diagnostic results: The shown picture in the main window and a table which contains informations for each examination can be printed.
* Print line chart: The shown section in (5) can be printed. Additionally, the user has the option to define the from/to-dates new. A list of the shown examinations and related information is printed too (in form of a table).
* Print whole diagnostic report: The whole set of diagnostic findings of the picked date (which is displayed in the main window)can be printed in form of a table. In each row, one examination, it's result, the unit of the result and the range of optimal result values is put column by column. The user has also the possibility to choose another date for printing the related diagnostic findings.
* Send Message/Data: The user can share notes or views with other physicans of the hospital.
* Options: The user can customize specific function of the program (e.g. data of the patient that is shown in the patient detail information section (2)).
* Help: The user can read the documentation of the software and instructions of software usage.
 

 
XXX '''REMOVE FROM HERE''' XXX
== Aufgabenstellung ==

Aufgabe ist das Design einer interaktiven Visualisierungsapplikation zur Darstellung und Exploration (des zeitlichen Verlaufs) von Laborwerten einer Blutuntersuchung. BenutzerInnen, Einsatzzweck, Tasks, etc. sollen von Euch selbst festgelegt und beschrieben werden.

[http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/infovis_ue_aufgabe4.html Beschreibung der Aufgabe 4]

=== Beispiele für derartige Datensätze ===

[[Image:20061115_blutuntersuchung.jpg]]

[[Image:20070920_blutuntersuchung.jpg]]

XXX '''REMOVE TO HERE '''XXX
== Links ==

* [[Teaching:TUW_-_UE_InfoVis_WS_2007/08|InfoVis:Wiki UE Homepage]]

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

*[[Teaching:TUW - UE InfoVis WS 2007/08 - Gruppe 07|Gruppe 07]]

Teaching:TUW - UE InfoVis WS 2007/08 - Gruppe 07 - Aufgabe 4

2008-01-04T18:51:23Z

UE-InfoVis0708 0203002:

== Assignment description ==
[http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/infovis_ue_aufgabe4.html Description of the fourth task]
=== Assigned data / model ===
[[Image:20061115_blutuntersuchung.jpg]]

[[Image:20070920_blutuntersuchung.jpg]]

== Description of the application field ==
The two tables above show medical data, which are two diagnostic findings of a patient recorded at different dates. In each table row, one examination, it's result, the unit of the result and the interval of "optimal" values are shown. The examination results descripe the amount of chemical compounds or substances in the patient's body. Diagnostic findings play an important role for medical diagnosis. 
The first table consists of more rows than the second. Perhaps less substances in body were examined or the tableview shows only a short section of the results. 

Each table has four columns. The names of the examinations and the name of the substances the patient has been tested on, respectively, are written in the first column. The result values - numerical values - for each examination are denoted in the second column. Some values are floating point numbers, others are integers. The reason of using floating numbers is, that small variances of the values may cause high differences in diagnosis. One examination has more than one result ("Differential Blutb."), but we don't know the meaning of this results. Some of the cells in this column are marked with "*". This indicates that a value does not reside in an interval (specified in the fourth column). In the third column, the units of the results are shown. The fourth column lists the intervals of reference values - the "optimal" values - for each examination. If a value resides within an interval, the result is "good" - which means that the patient has no lack and no overrun of a specific element. 
Multiple forms of intervals are being used, e.g:
* bis 200
* 220-480
* <66

The data is sorted ascending using the first column (the name of the test). None of the values can be classified as nominal or ordinal. We are only dealing with floating point numbers (continuous) and integers (discrete). There is also no hierarchy in this data. It's actually a list of key value pairs where the value-part can contain one or multiple values and an information about the units used and reference.

But the use of diagnostic findings in practice is slightly different. They are not being used as standalone tables with some test results. The values are being examined how they change in time. This fact changes the dimensionality of all data (test key-value-pairs) from 1-dimensional to 2-dimensional because they usually change over time. This is the main issue why we would suggest a different presentation of this data in a more clearer, simpler and legible way.

=== Target group ===
The target group (the data has been produced for) is definitely hospital/medical staff. We think that the most common people can't start anything with this data. They can basically determine which test results don't match the reference interval and therefore didn't go well but this data needs to be interpreted by a specialist.
Another thing is that this data is private and should therefore not be seen by anyone except for the doctor and the patient.

== The DIAMONT application ==
We named our application '''DIAMONT''' which stands for '''DIA'''gnosis '''MON'''itoring '''T'''ool. This tool has been designed to be used by the hospital's medical staff including doctors and nurses. It shall provide a more easier and better organized view on the data from test sets. It is meant to be realized either in a form of a desktop application or as a PDA (handheld-gadget) application. The accessed data has to been accessible remotely, therefore needs to be located on a server.

The next subsections will provide a detailed look at the interface of the DIAMONT application. The reference numbers reference the red numbers located on the scrrenshot of the application.

[[{{ns:6}}:0708_Gruppe_07_diamont.jpg]]

ad 1: Patient Search 
The patient search section allows searching patient records. Using DIAMONT it will be typically the first step to look up a specific patient record. By simply typing in a name (or other inforamtion which can be used to identify a patient) the program shows a list of corresponding patient records in the main window (4). By selecting a name, more detailed information on that specific record is shown in the timeline window (6). By double-clicking a name, the program will load the corresponding dataset into the detail information window on the left.

ad 2: Patient detail information 
This section displays patient informations such as name, birthdate and habitation, which can be customized using the menu function (7).

ad 3: List of available tests 
The list of available tests shows the names of the test that are presented in the dataset. By dragging a test into the main window (4), this tests inforamtion is visualised in the main window. The test list holds information on several other aspects of the tests, by using a color-coded printing method. Test values which are low compared to their reference range are printed blue, while values which are to high are printed red. Values that are within the reference range are shown in black color. This feature allows the user to quickly scan the tests for outstanding values, that might be interesting for further investigation. Tests that have been dropped to the main window (4) are printed with a green background, so that the user can tell just by looking at the list, which tests are currently under observation by the program.
ad 4: Main Window 
The main window provides the most detailed view on the data. First, its being used to select a patient by his/hers name (and some additional information) from a list returned by the search process. The main purpose of this window is to display detailed information of the test results. The user of this application drags and drops a test (or tests) he is interested in into this field to display it. This field has three sections aligned vertically filling up its full height and aligns the tests as follows. The upper and lower sections are being separated from the middle section by dashed lines. Additionally, they are filled with a gradient color. The upper sections holds test with the result with a value that lies above the top limit of the normal interval for this test. The center part holds all the tests with a result that lies in the normal interval. The last bottom part displays all tests that lie underneath the minimum of the normal interval. Each test is being displayed as a circle with a certain background color with some textual information. This information holds the name of the test, the value of the test and the units for this value. This field provides only information about the test results obtained during one test. The user can see these results in a time context in the window beneath this one (marked as 6 in the picture above). He can also navigate through multiple tests by using this window.
 
ad 5:Medical Notes 
Each circle in the main window, which shows the result value of one examination, can be selected by mouseclick. After selection, the user can click on the arrow at (5) and a texteditor opens. He can write some important notes there.
 
ad 6:Timeline / Graph 
This window displays time series lines that reference the tests being picked by dragging a test from the left window into the main window. Its being used for two purposes. The first is to put the test results into a time context. The user can follow the progress of the selected tests, search for anomalies or/and find correlations. The other purpose of this window is to navigate through the time using it as time line. The user needs to select a certain date (dates in this window reference test dates) which makes the application reload the data in the main window. The color of each line in this graph is the same as the background color of this test in the main window. The user can also enlarge the region of this window to get a better representation of the data. The leftmost and rightmost arrows are being used to scroll through the the graph.
 
ad 7: Menu 
By pressing the "Menu"-Button, a pop-up window opens and some options are listed. 
The options:

* Print shown diagnostic results: The shown picture in the main window and a table which contains informations for each examination can be printed.
* Print line chart: The shown section in (5) can be printed. Additionally, the user has the option to define the from/to-dates new. A list of the shown examinations and related information is printed too (in form of a table).
* Print whole diagnostic report: The whole set of diagnostic findings of the picked date (which is displayed in the main window)can be printed in form of a table. In each row, one examination, it's result, the unit of the result and the range of optimal result values is put column by column. The user has also the possibility to choose another date for printing the related diagnostic findings.
* Help: The user can read the documentation of the software and instructions of software usage.
 

 
XXX '''REMOVE FROM HERE''' XXX
== Aufgabenstellung ==

Aufgabe ist das Design einer interaktiven Visualisierungsapplikation zur Darstellung und Exploration (des zeitlichen Verlaufs) von Laborwerten einer Blutuntersuchung. BenutzerInnen, Einsatzzweck, Tasks, etc. sollen von Euch selbst festgelegt und beschrieben werden.

[http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/infovis_ue_aufgabe4.html Beschreibung der Aufgabe 4]

=== Beispiele für derartige Datensätze ===

[[Image:20061115_blutuntersuchung.jpg]]

[[Image:20070920_blutuntersuchung.jpg]]

XXX '''REMOVE TO HERE '''XXX
== Links ==

* [[Teaching:TUW_-_UE_InfoVis_WS_2007/08|InfoVis:Wiki UE Homepage]]

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

*[[Teaching:TUW - UE InfoVis WS 2007/08 - Gruppe 07|Gruppe 07]]

Teaching:TUW - UE InfoVis WS 2007/08 - Gruppe 07 - Aufgabe 4

2008-01-04T18:25:27Z

UE-InfoVis0708 0203002:

== Assignment description ==
[http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/infovis_ue_aufgabe4.html Description of the fourth task]
=== Assigned data / model ===
[[Image:20061115_blutuntersuchung.jpg]]

[[Image:20070920_blutuntersuchung.jpg]]

== Analysis of the application area ==
Our sample data belongs into the medical field of application. We are dealing with diagnostic findings which are basically sets of multiple tests that play a supportive role in doctors' decisions about the diagnosis. Given these two examples we can see that the second finding holds multiple times as much data as the first one. This indicates that each patient has a specialized set if tests that has been chosen for him by his doctor.

The data has been arranged into four columns. The first column holds the name of the test or the name of the subject the patient has been tested on. The second column holds the outcome of the test. In all cases we can see here, we are dealing with numbers. But some of these numbers are floating point numbers, others are integers. One of these tests even returns multiple values as result. Some of the cells in this column have been marked using the star character (*). This indicates that a value does not lie in an interval specified in the fourth column. The third column specifies the units of the results. The fourth column specifies the reference values for each of these tests, i.e. an interval that specifies acceptable values for this test. Multiple forms of intervals are being used, e.g:
* bis 200
* 220-480
* <66

The data is sorted ascending using the first column (the name of the test). None of the values can be classified as nominal or ordinal. We are only dealing with floating point numbers (continuous) and integers (discrete). There is also no hierarchy in this data. It's actually a list of key value pairs where the value-part can contain one or multiple values and an information about the units used and reference.

But the use of diagnostic findings in practice is slightly different. They are not being used as standalone tables with some test results. The values are being examined how they change in time. This fact changes the dimensionality of all data (test key-value-pairs) from 1-dimensional to 2-dimensional because they usually change over time. This is the main issue why we would suggest a different presentation of this data in a more clearer, simpler and legible way.

=== Target group ===
The target group (the data has been produced for) is definitely hospital/medical staff. We think that the most common people can't start anything with this data. They can basically determine which test results don't match the reference interval and therefore didn't go well but this data needs to be interpreted by a specialist.
Another thing is that this data is private and should therefore not be seen by anyone except for the doctor and the patient.

== The DIAMONT application ==
We named our application '''DIAMONT''' which stands for '''DIA'''gnosis '''MON'''itoring '''T'''ool. This tool has been designed to be used by the hospital's medical staff including doctors and nurses. It shall provide a more easier and better organized view on the data from test sets. It is meant to be realized either in a form of a desktop application or as a PDA (handheld-gadget) application. The accessed data has to been accessible remotely, therefore needs to be located on a server.

The next subsections will provide a detailed look at the interface of the DIAMONT application. The reference numbers reference the red numbers located on the scrrenshot of the application.

[[{{ns:6}}:0708_Gruppe_07_diamont.jpg]]

ad 1: Patient Search 
The patient search section allows searching patient records. Using DIAMONT it will be typically the first step to look up a specific patient record. By simply typing in a name (or other inforamtion which can be used to identify a patient) the program shows a list of corresponding patient records in the main window. By selecting a name, more detailed information on that specific record is shown in the timeline window. By double-clicking a name, the program will load the corresponding dataset into the detail information window on the left.

ad 2: Patient detail information 
Jakob

ad 3: List of available tests 
Jakob

ad 4: Main Window 
The main window provides the most detailed view on the data. First, its being used to select a patient by his/hers name (and some additional information) from a list returned by the search process. The main purpose of this window is to display detailed information of the test results. The user of this application drags and drops a test (or tests) he is interested in into this field to display it. This field has three sections aligned vertically filling up its full height and aligns the tests as follows. The upper and lower sections are being separated from the middle section by dashed lines. Additionally, they are filled with a gradient color. The upper sections holds test with the result with a value that lies above the top limit of the normal interval for this test. The center part holds all the tests with a result that lies in the normal interval. The last bottom part displays all tests that lie underneath the minimum of the normal interval. Each test is being displayed as a circle with a certain background color with some textual information. This information holds the name of the test, the value of the test and the units for this value. This field provides only information about the test results obtained during one test. The user can see these results in a time context in the window beneath this one (marked as 6 in the picture above). He can also navigate through multiple tests by using this window.
 
ad 5:Medical Notes 
Each circle in the main window, which shows the result value of one examination, can be selected by mouseclick. After selection, the user can click on the arrow at (5) and a texteditor opens. He can write some important notes there.
 
ad 6:Timeline / Graph 
This window displays time series lines that reference the tests being picked by dragging a test from the left window into the main window. Its being used for two purposes. The first is to put the test results into a time context. The user can follow the progress of the selected tests, search for anomalies or/and find correlations. The other purpose of this window is to navigate through the time using it as time line. The user needs to select a certain date (dates in this window reference test dates) which makes the application reload the data in the main window. The color of each line in this graph is the same as the background color of this test in the main window. The user can also enlarge the region of this window to get a better representation of the data. The leftmost and rightmost arrows are being used to scroll through the the graph.
 
ad 7: Menu 
By pressing the "Menu"-Button, a pop-up window opens and some options are listed. 
The options:

* Print shown diagnostic results: The shown picture in the main window and a table which contains informations for each examination can be printed.
* Print line chart: The shown section in (5) can be printed. Additionally, the user has the option to define the from/to-dates new. A list of the shown examinations and related information is printed too (in form of a table).
* Print whole diagnostic report: The whole set of diagnostic findings of the picked date (which is displayed in the main window)can be printed in form of a table. In each row, one examination, it's result, the unit of the result and the range of optimal result values is put column by column. The user has also the possibility to choose another date for printing the related diagnostic findings.
Help: The user can read the documentation of the software and instructions of software usage.
 

 
XXX '''REMOVE FROM HERE''' XXX
== Aufgabenstellung ==

Aufgabe ist das Design einer interaktiven Visualisierungsapplikation zur Darstellung und Exploration (des zeitlichen Verlaufs) von Laborwerten einer Blutuntersuchung. BenutzerInnen, Einsatzzweck, Tasks, etc. sollen von Euch selbst festgelegt und beschrieben werden.

[http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/infovis_ue_aufgabe4.html Beschreibung der Aufgabe 4]

=== Beispiele für derartige Datensätze ===

[[Image:20061115_blutuntersuchung.jpg]]

[[Image:20070920_blutuntersuchung.jpg]]

XXX '''REMOVE TO HERE '''XXX
== Links ==

* [[Teaching:TUW_-_UE_InfoVis_WS_2007/08|InfoVis:Wiki UE Homepage]]

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

*[[Teaching:TUW - UE InfoVis WS 2007/08 - Gruppe 07|Gruppe 07]]

Teaching:TUW - UE InfoVis WS 2007/08 - Gruppe 07 - Aufgabe 4

2008-01-04T18:14:04Z

UE-InfoVis0708 0203002:

== Assignment description ==
[http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/infovis_ue_aufgabe4.html Description of the fourth task]
=== Assigned data / model ===
[[Image:20061115_blutuntersuchung.jpg]]

[[Image:20070920_blutuntersuchung.jpg]]

== Analysis of the application area ==
Our sample data belongs into the medical field of application. We are dealing with diagnostic findings which are basically sets of multiple tests that play a supportive role in doctors' decisions about the diagnosis. Given these two examples we can see that the second finding holds multiple times as much data as the first one. This indicates that each patient has a specialized set if tests that has been chosen for him by his doctor.

The data has been arranged into four columns. The first column holds the name of the test or the name of the subject the patient has been tested on. The second column holds the outcome of the test. In all cases we can see here, we are dealing with numbers. But some of these numbers are floating point numbers, others are integers. One of these tests even returns multiple values as result. Some of the cells in this column have been marked using the star character (*). This indicates that a value does not lie in an interval specified in the fourth column. The third column specifies the units of the results. The fourth column specifies the reference values for each of these tests, i.e. an interval that specifies acceptable values for this test. Multiple forms of intervals are being used, e.g:
* bis 200
* 220-480
* <66

The data is sorted ascending using the first column (the name of the test). None of the values can be classified as nominal or ordinal. We are only dealing with floating point numbers (continuous) and integers (discrete). There is also no hierarchy in this data. It's actually a list of key value pairs where the value-part can contain one or multiple values and an information about the units used and reference.

But the use of diagnostic findings in practice is slightly different. They are not being used as standalone tables with some test results. The values are being examined how they change in time. This fact changes the dimensionality of all data (test key-value-pairs) from 1-dimensional to 2-dimensional because they usually change over time. This is the main issue why we would suggest a different presentation of this data in a more clearer, simpler and legible way.

=== Target group ===
The target group (the data has been produced for) is definitely hospital/medical staff. We think that the most common people can't start anything with this data. They can basically determine which test results don't match the reference interval and therefore didn't go well but this data needs to be interpreted by a specialist.
Another thing is that this data is private and should therefore not be seen by anyone except for the doctor and the patient.

== The DIAMONT application ==
We named our application '''DIAMONT''' which stands for '''DIA'''gnosis '''MON'''itoring '''T'''ool. This tool has been designed to be used by the hospital's medical staff including doctors and nurses. It shall provide a more easier and better organized view on the data from test sets. It is meant to be realized either in a form of a desktop application or as a PDA (handheld-gadget) application. The accessed data has to been accessible remotely, therefore needs to be located on a server.

The next subsections will provide a detailed look at the interface of the DIAMONT application. The reference numbers reference the red numbers located on the scrrenshot of the application.

[[{{ns:6}}:0708_Gruppe_07_diamont.jpg]]

ad 1: Patient Search 
The patient search section allows searching patient records. Using DIAMONT it will be typically the first step to look up a specific patient record. By simply typing in a name (or other inforamtion which can be used to identify a patient) the program shows a list of corresponding patient records in the main window. By selecting a patients name, more detailed information on that specific record is shown in the timeline window. By double-clicking a patient name, the
Jakob

ad 2: Patient detail information 
Jakob

ad 3: List of available tests 
Jakob

ad 4: Main Window 
The main window provides the most detailed view on the data. First, its being used to select a patient by his/hers name (and some additional information) from a list returned by the search process. The main purpose of this window is to display detailed information of the test results. The user of this application drags and drops a test (or tests) he is interested in into this field to display it. This field has three sections aligned vertically filling up its full height and aligns the tests as follows. The upper and lower sections are being separated from the middle section by dashed lines. Additionally, they are filled with a gradient color. The upper sections holds test with the result with a value that lies above the top limit of the normal interval for this test. The center part holds all the tests with a result that lies in the normal interval. The last bottom part displays all tests that lie underneath the minimum of the normal interval. Each test is being displayed as a circle with a certain background color with some textual information. This information holds the name of the test, the value of the test and the units for this value. This field provides only information about the test results obtained during one test. The user can see these results in a time context in the window beneath this one (marked as 6 in the picture above). He can also navigate through multiple tests by using this window.
 
ad 5:Medical Notes 
Each circle in the main window, which shows the result value of one examination, can be selected by mouseclick. After selection, the user can click on the arrow at (5) and a texteditor opens. He can write some important notes there.
 
ad 6:Timeline / Graph 
This window displays time series lines that reference the tests being picked by dragging a test from the left window into the main window. Its being used for two purposes. The first is to put the test results into a time context. The user can follow the progress of the selected tests, search for anomalies or/and find correlations. The other purpose of this window is to navigate through the time using it as time line. The user needs to select a certain date (dates in this window reference test dates) which makes the application reload the data in the main window. The color of each line in this graph is the same as the background color of this test in the main window. The user can also enlarge the region of this window to get a better representation of the data. The leftmost and rightmost arrows are being used to scroll through the the graph.
 
ad 7: Menu 
By pressing the "Menu"-Button, a pop-up window opens and some options are listed. 
The options:

* Print shown diagnostic results: The shown picture in the main window and a table which contains informations for each examination can be printed.
* Print line chart: The shown section in (5) can be printed. Additionally, the user has the option to define the from/to-dates new. A list of the shown examinations and related information is printed too (in form of a table).
* Print whole diagnostic report: The whole set of diagnostic findings of the picked date (which is displayed in the main window)can be printed in form of a table. In each row, one examination, it's result, the unit of the result and the range of optimal result values is put column by column. The user has also the possibility to choose another date for printing the related diagnostic findings.
Help: The user can read the documentation of the software and instructions of software usage.
 

 
XXX '''REMOVE FROM HERE''' XXX
== Aufgabenstellung ==

Aufgabe ist das Design einer interaktiven Visualisierungsapplikation zur Darstellung und Exploration (des zeitlichen Verlaufs) von Laborwerten einer Blutuntersuchung. BenutzerInnen, Einsatzzweck, Tasks, etc. sollen von Euch selbst festgelegt und beschrieben werden.

[http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/infovis_ue_aufgabe4.html Beschreibung der Aufgabe 4]

=== Beispiele für derartige Datensätze ===

[[Image:20061115_blutuntersuchung.jpg]]

[[Image:20070920_blutuntersuchung.jpg]]

XXX '''REMOVE TO HERE '''XXX
== Links ==

* [[Teaching:TUW_-_UE_InfoVis_WS_2007/08|InfoVis:Wiki UE Homepage]]

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

*[[Teaching:TUW - UE InfoVis WS 2007/08 - Gruppe 07|Gruppe 07]]

Teaching:TUW - UE InfoVis WS 2007/08 - Gruppe 07 - Aufgabe 3

2007-12-11T15:12:39Z

UE-InfoVis0708 0203002:

== Assignment description ==
[http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/infovis_ue_aufgabe3.html Description of the third task]
=== Assigned Graphic ===
[[Image:Radon_Level.jpg]]
Established Percentage of Homes that Exceed EPA's Recommended Level for Radon

== Used terminology ==
In this section, we will try to explain several terms used through the rest of the article.
* ''' Data-ink ''' - Data-Ink is a ratio that specifies how much of the visual presentation in a graphic really describes some concrete data. The equation looks something like this: '' data-ink / all-ink = data-ink-ration''. The value of a data-ink ratio always lies between 1 and 0, the bigger the number, the better. The goal is not to eliminate all visual elements that doesn't have anything to do with the data directly but to minimize ''unnecessary visual data''. The target is to move the data into the foreground and to make it stand out. The amount of redundant data that is not being used should be minimized - here is an appropriate citation:
{{Quotation|In anything at all, perfection is finally attained not when there is no longer anything to add, but when there is no longer anything to take away.|Antoine de Saint Exupery}}

== Critique ==
One of the first things that the observer sees by looking at the graphic is that about a half of all US states cannot be matched according to the legend. The blank-filled (white) states doesn't have an explanation so you can't really tell if these states haven't been considered in this statistic or if it's simply a bug in the graphic.
The next thing is the use of colors reduced only to the shades of gray. Using some color would make the states more differentiable. Of course, there are some cases where no color can be used as common daily print media for instance.
Nevertheless, the variety of fill styles (solid monochromatic fills and patterns) in this graphic is not be easily interpreted by the observer. First thing is the mixture of patterns and solid color fills. The second thing is the ordering of these fills. The class with the lowest percentage (0 - 10%) has a striped fill pattern. The next class (10 - 15%) has a solid color fill that is almost black. The following class (15 - 20%) has a slightly lighter fill color than the previous one. The next one (20 - 25%) uses a pattern again whereas the following is filled with a solid color again. It would be much wiser to stick to one fill style (solid color or pattern).

The question on which data should be prioritized in this graphic is not easy to be answered since we don't know the background behind this graphic. We assume (inspired by the different font size) that states with higher percentage are those that are more important to us. The use of bigger font sizes in this graphic is not the ideal solution. A better way would be to use brighter colors (more saturated or lighter) for those states we want to stand out.

=== Data Ink ===
First thing we criticize on this graphic is the use of relatively thick lines that make are supposed to make the differentiation between the US states visible. Thinner lines would make this graphic much brighter and easier to read. The use of larger characters for states names according to the class they belong to is a valid way to point out some data, but it creates an unorganized look in a couple of cases on this graphic. For instance, the area covered by Michigan, Indiana, Kentucky and Tennessee looks unorganized due to the geographical location of these (and surrounding) states. The use of a simple color / fill pattern differentiation would be more accurate here. A problematic part of this graphic is the northern part of the east coast. There are many smaller states and the placement of labels is very problematic here.

Another issue to be discussed is the grouping of the data. This graphic is relatively simple because of the fact that it only tries to point out one single main idea. This main idea is a certain percentage for each US state. A standard way to achieve some basic grouping would be to use proximity which in our case cannot be applied because the alignment of the states is defined by their geographical placement. So the solution for this problem is the separation by using different hues as fill colors for the states.

The missing accuracy in this graphic (the border between North and South Dakota; Wisconsin, Iowa and Illinois; Kansas and Oklahoma and some others) steals the observer's attention unnecessarily. Such defects should be avoided.

The use of state abbreviation instead of full names as labels is the right choice here because there would be hardly any place place for long names.

This graphic misses the about the date when the presented information has been gathered although this information could be crucial for some people. The information about the source of this information are missing as well.

== Improvements ==
First thing we considered to be changed in the original graphic were the fill colors / patterns. These weren't consistent because they've mixed solid color fills with fill patterns. We decided only to use solid colors for classifications. We also casted the idea of using different hues aside and concentrated on how to visualize that all these classes have something in common. Lastly, we achieved this by modifying the lightness of the green color.

In addition, we decided to make all the state labels use the same font size to point up the homogeneity of the data. The classes stand out only because of their fill colors.

The thickness of the borders between the states is thin enough not to stand out but also thick enough to be visible. The legend at the bottom of the graphic is ordered by the percentage (an therefore also by the color intensity). This makes the graphic easier to read.

We have tried to follow the data-ink model and to eliminate all unnecessary visual elements from the original graphic and make it much clearer and more legible.
 

[[Image:0708_Gruppe7_USA.jpg]]

== Links ==

* [[Teaching:TUW_-_UE_InfoVis_WS_2007/08|InfoVis:Wiki UE Homepage]]

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

*[[Teaching:TUW - UE InfoVis WS 2007/08 - Gruppe 07|Gruppe 07]]

References:
*[Few, 2004a] Elegance Through Simplicity. Retrieved at: December 09, 2007. http://www.intelligententerprise.com/showArticle.jhtml
*[Mizuno et al., 1999] Tufte Design Principle, Retrieved at: December 09, 2007. http://ldt.stanford.edu/ldt1999/Students/mizuno/Portfolio/Work/reports/tufte/ed229c-tufte-outline.html
*[Few, 2004] Show Me the Numbers: Designing Tables and Graphs to Enlighten, Analytics Press, 2004, Chapter 7 - General Design for Communication.

Teaching:TUW - UE InfoVis WS 2007/08 - Gruppe 07 - Aufgabe 2

2007-11-21T17:13:36Z

UE-InfoVis0708 0203002:

== Aufgabenstellung ==
[http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/infovis_ue_aufgabe2.html Beschreibung der Aufgabe 2]

=== Zu beurteilende Tabelle ===

[[Image:ooen_sparbuecher.jpg]]

== At First Glance ==

The question (tableheader) „At which bank / financial institution in Upper Austria you can get the most for your money?“ is quickly answered by taking a look at the table. The table is quite good readable and intuitive – the data is quite clearly arranged and the font-color of the most relevant data is different to the color of less relevant data. 
Anyway, some small defects should be mentioned.

== Critics & Suggestions For Table Improvement ==

=== Data Alignment ===
{{Quotation|Numbers that represent quantitative values, as opposed to those that are merely identifiers (e.g., customer numbers), should always be aligned to the right.|[Few, 2004]}}
In the table view the values are not aligned to the right, but they are aligned at the center of the columns. The values in a particular column contain decimal digits of varying number. Hence, the data columns look a bit fringy at the left and right edge. For better reading efficiency, each value could be expressed by using the same number of decimal digits. If a value contains less decimal digits than the other values, the missing final digits could be filled with zeros.

=== Spanner Headers ===
{{Quotation|If the column’s data are left aligned, its header is left aligned as well, and so on. This is intentional. This practice clearly establishes at the top of each column the nature of its alignment, thereby informing readers how to scan the data. The only exception that is sometimes useful involves spanner headers. When a header is used to label multiple columns, centering it across those columns often helps to clarify the fact that it refers to all of those columns rather to just a single column.|[Few, 2004]}}
In our example table the spanner header "Kapitalsparbuch" is not centered across its related columns. Through the marking-off boundary lines at the left and right border of the span, it is quite obvious that "Kapitalsparbuch" seams to be a spanner header. But the visual appearance is a bit irritating at first view.

=== Header Alignment ===
As mentioned, headers should normally be aligned as the data in its columns. This idea was realized in the table. But for better legibility, the headers should be aligned to the right because the numbers in the correspondent columns are quantitative values (see 3.1).

=== Rules and Grids ===
{{Quotation|White space can be intentionally manipulated to direct your readers’ eyes to either scan predominantly across the columns or down the rows. If you wish to lead your readers to scan down the columns, rather than across the rows, make the white space between the columns more pronounced than the white space between the rows.|[Few, 2004]}}
The given table above tries to direct the readers eyes to scan down the rows, which is indeed very useful because of the fact that readers should can compare the data of the given row with all the other values of the other rows in that column. Unfortunately the autors decided to use vertical lines to separate the rows from each ohter. We argue that a simple white space would do the job aswell without bringing the very high amount of visual contrast into the tables data. That way the reader can concentrate easily on the given data while the manner of directing the eyes down the rows is still in use.

=== Fill Color ===
{{Quotation|When white space alone can’t be used to effectively delineate columns and rows in tables, fill shades and hues work better than grids and rules. When subtly designed, fill colors are less distracting to the eye as it scans across them. They are limited, however, to one direction, delineating columns or rows but not both simultaneously.|[Few, 2004]}}
The rows of the table are highlighted by two alternating colours - bright and a darker blue. Unfortunately, the two chosen colors have a quite high luminance intensity difference, so that the darker color highlights each second row a bit more than brighter colored rows. This gives a bit the effect of more important and less important rows. It is better to use subtle fill colors.

{{Quotation|This shade of gray is very light yet visible enough to assist our eyes in scanning across a single row without onfusing it with the rows above or below. The shading is light enough that vertical scanning down a column is not significantly disrupted.|[Few, 2004]}}
The shading of the rows in the table above is another good example for guiding the readers attention along the rows. We think that the shading that was used creating that table is to heavy. On one hand it forces the readers attention in one particular direction but on the other hand it produces a very hard visual contrast. Like above we argue that a lighter shading would line out the data while still retaining the guiding property of shaded lines.

=== Highlighted Values ===
As one easily can see the values which represent the best financial offer of each column are higlighted red. We think that this is a good way to lead the readers attention to specific values. On a quick overfly of the whole table the reader can easily figure out the top offers and compare different bank institutes and their benefits in a very time efficient manner. As mentioned before the high visual contrast of the whole table makes it hard to read it properly. A problem which causees difficulties while trying to see the highlighted values and their corresponding bank institutes. By lower the visual contrast as stated in the improvements above the highlighted values can be located in a much better way than before.

== Improved Table ==

[[Image:table_financial3.jpg]]

== Links ==

* [[Teaching:TUW_-_UE_InfoVis_WS_2007/08|InfoVis:Wiki UE Homepage]]

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

*[[Teaching:TUW - UE InfoVis WS 2007/08 - Gruppe 07|Gruppe 07]]

== References ==
*[Few, 2004] Stephen Few, Show Me the Numbers: Designing Tables and Graphs to Enlighten, Analytics Press, 2004, Chapter 8 - Table Design.

Teaching:TUW - UE InfoVis WS 2007/08 - Gruppe 07 - Aufgabe 2

2007-11-21T17:11:38Z

UE-InfoVis0708 0203002:

== Aufgabenstellung ==
[http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/infovis_ue_aufgabe2.html Beschreibung der Aufgabe 2]

=== Zu beurteilende Tabelle ===

[[Image:ooen_sparbuecher.jpg]]

== At First Glance ==

The question (tableheader) „At which bank / financial institution in Upper Austria you can get the most for your money?“ is quickly answered by taking a look at the table. The table is quite good readable and intuitive – the data is quite clearly arranged and the font-color of the most relevant data is different to the color of less relevant data. 
Anyway, some small defects should be mentioned.

== Critics & Suggestions For Table Improvement ==

=== Data Alignment ===
{{Quotation|Numbers that represent quantitative values, as opposed to those that are merely identifiers (e.g., customer numbers), should always be aligned to the right.|[Few, 2004]}}
In the table view the values are not aligned to the right, but they are aligned at the center of the columns. The values in a particular column contain decimal digits of varying number. Hence, the data columns look a bit fringy at the left and right edge. For better reading efficiency, each value could be expressed by using the same number of decimal digits. If a value contains less decimal digits than the other values, the missing final digits could be filled with zeros.

=== Spanner Headers ===
{{Quotation|If the column’s data are left aligned, its header is left aligned as well, and so on. This is intentional. This practice clearly establishes at the top of each column the nature of its alignment, thereby informing readers how to scan the data. The only exception that is sometimes useful involves spanner headers. When a header is used to label multiple columns, centering it across those columns often helps to clarify the fact that it refers to all of those columns rather to just a single column.|[Few, 2004]}}
In our example table the spanner header "Kapitalsparbuch" is not centered across its related columns. Through the marking-off boundary lines at the left and right border of the span, it is quite obvious that "Kapitalsparbuch" seams to be a spanner header. But the visual appearance is a bit irritating at first view.

=== Header Alignment ===
As mentioned, headers should normally be aligned as the data in its columns. This idea was realized in the table. But for better legibility, the headers should be aligned to the right because the numbers in the correspondent columns are quantitative values (see 3.1).

=== Rules and Grids ===
{{Quotation|White space can be intentionally manipulated to direct your readers’ eyes to either scan predominantly across the columns or down the rows. If you wish to lead your readers to scan down the columns, rather than across the rows, make the white space between the columns more pronounced than the white space between the rows.|[Few, 2004]}}
The given table above tries to direct the readers eyes to scan down the rows, which is indeed very useful because of the fact that readers should can compare the data of the given row with all the other values of the other rows in that column. Unfortunately the autors decided to use vertical lines to separate the rows from each ohter. We argue that a simple white space would do the job aswell without bringing the very high amount of visual contrast into the tables data. That way the reader can concentrate easily on the given data while the manner of directing the eyes down the rows is still in use.

=== Fill Color ===
{{Quotation|When white space alone can’t be used to effectively delineate columns and rows in tables, fill shades and hues work better than grids and rules. When subtly designed, fill colors are less distracting to the eye as it scans across them. They are limited, however, to one direction, delineating columns or rows but not both simultaneously.|[Few, 2004]}}
The rows of the table are highlighted by two alternating colours - bright and a darker blue. Unfortunately, the two chosen colors have a quite high luminance intensity difference, so that the darker color highlights each second row a bit more than brighter colored rows. This gives a bit the effect of more important and less important rows. It is better to use subtle fill colors.

{{Quotation|This shade of gray is very light yet visible enough to assist our eyes in scanning across a single row without onfusing it with the rows above or below. The shading is light enough that vertical scanning down a column is not significantly disrupted.|[Few, 2004]}}
The shading of the rows in the table above is another good example for guiding the readers attention along the rows. We think that the shading that was used creating that table is to heavy. On one hand it forces the readers attention in one particular direction but on the other hand it produces a very hard visual contrast. Like above we argue that a lighter shading would line out the data while still retaining the guiding property of shaded lines.

=== Highlighted Values ===
As one easily can see the values which represent the best financial offer of each column are higlighted red. We think that this is a good way to lead the readers attention to specific values. On a quick overfly of the whole table the reader can easily figure out the top offers and compare differnent bank institutes and their benefits in a very time efficient manner. As mentioned before the high visual contrast of the whole table makes it hard to read it properly. A problem which causees difficulties while trying to see the highlighted values and theit corresponding bank institutes. By lower the visual contrast as stated in the improvements above the highlighted values can be located in a much better way than before.

== Improved Table ==

[[Image:table_financial3.jpg]]

== Links ==

* [[Teaching:TUW_-_UE_InfoVis_WS_2007/08|InfoVis:Wiki UE Homepage]]

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

*[[Teaching:TUW - UE InfoVis WS 2007/08 - Gruppe 07|Gruppe 07]]

== References ==
*[Few, 2004] Stephen Few, Show Me the Numbers: Designing Tables and Graphs to Enlighten, Analytics Press, 2004, Chapter 8 - Table Design.

Teaching:TUW - UE InfoVis WS 2007/08 - Gruppe 07 - Aufgabe 2

2007-11-21T17:03:39Z

UE-InfoVis0708 0203002:

== Aufgabenstellung ==
[http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/infovis_ue_aufgabe2.html Beschreibung der Aufgabe 2]

=== Zu beurteilende Tabelle ===

[[Image:ooen_sparbuecher.jpg]]

== At First Glance ==

The question (tableheader) „At which bank / financial institution in Upper Austria you can get the most for your money?“ is quickly answered by taking a look at the table. The table is quite good readable and intuitive – the data is quite clearly arranged and the font-color of the most relevant data is different to the color of less relevant data. 
Anyway, some small defects should be mentioned.

== Critics & Suggestions For Table Improvement ==

=== Data Alignment ===
{{Quotation|Numbers that represent quantitative values, as opposed to those that are merely identifiers (e.g., customer numbers), should always be aligned to the right.|[FEW, 2004]}}
In the table view the values are not aligned to the right, but they are aligned at the center of the columns. The values in a particular column contain decimal digits of varying number. Hence, the data columns look a bit fringy at the left and right edge. For better reading efficiency, each value could be expressed by using the same number of decimal digits. If a value contains less decimal digits than the other values, the missing final digits could be filled with zeros.

=== Spanner Headers ===
{{Quotation|If the column’s data are left aligned, its header is left aligned as well, and so on. This is intentional. This practice clearly establishes at the top of each column the nature of its alignment, thereby informing readers how to scan the data. The only exception that is sometimes useful involves spanner headers. When a header is used to label multiple columns, centering it across those columns often helps to clarify the fact that it refers to all of those columns rather to just a single column.|[FEW, 2004]}}
In our example table the spanner header "Kapitalsparbuch" is not centered across its related columns. Through the marking-off boundary lines at the left and right border of the span, it is quite obvious that "Kapitalsparbuch" seams to be a spanner header. But the visual appearance is a bit irritating at first view.

=== Header Alignment ===
As mentioned, headers should normally be aligned as the data in its columns. This idea was realized in the table. But for better legibility, the headers should be aligned to the right because the numbers in the correspondent columns are quantitative values (see 3.1).

=== Rules and Grids ===
{{Quotation|White space can be intentionally manipulated to direct your readers’ eyes to either scan predominantly across the columns or down the rows. If you wish to lead your readers to scan down the columns, rather than across the rows, make the white space between the columns more pronounced than the white space between the rows.|[FEW, 2004]}}
The given table above tries to direct the readers eyes to scan down the rows, which is indeed very useful because of the fact that readers should can compare the data of the given row with all the other values of the other rows in that column. Unfortunately the autors decided to use vertical lines to separate the rows from each ohter. We argue that a simple white space would do the job aswell without bringing the very high amount of visual contrast into the tables data. That way the reader can concentrate easily on the given data while the manner of directing the eyes down the rows is still in use.

=== Fill Color ===
{{Quotation|When white space alone can’t be used to effectively delineate columns and rows in tables, fill shades and hues work better than grids and rules. When subtly designed, fill colors are less distracting to the eye as it scans across them. They are limited, however, to one direction, delineating columns or rows but not both simultaneously.|[FEW, 2004]}}
The rows of the table are highlighted by two alternating colours - bright and a darker blue. Unfortunately, the two chosen colors have a quite high luminance intensity difference, so that the darker color highlights each second row a bit more than brighter colored rows. This gives a bit the effect of more important and less important rows. It is better to use subtle fill colors.

{{Quotation|This shade of gray is very light yet visible enough to assist our eyes in scanning across a single row without onfusing it with the rows above or below. The shading is light enough that vertical scanning down a column is not significantly disrupted.|[FEW, 2004]}}
The shading of the rows in the table above is another good example for guiding the readers attention along the rows. We think that the shading that was used creating that table is to heavy. On one hand it forces the readers attention in one particular direction but on the other hand it produces a very hard visual contrast. Like above we argue that a lighter shading would line out the data while still retaining the guiding property of shaded lines.

=== Highlighted Values ===
As one easily can see the values which represent the best financial offer of each column are higlighted red. We think that this is a good way to lead the readers attention to specific values. On a quick overfly of the whole table the reader can easily figure out the top offers and compare differnent bank institutes and their benefits in a very time efficient manner.

== Improved Table ==

[[Image:table_financial3.jpg]]

== Links ==

* [[Teaching:TUW_-_UE_InfoVis_WS_2007/08|InfoVis:Wiki UE Homepage]]

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

*[[Teaching:TUW - UE InfoVis WS 2007/08 - Gruppe 07|Gruppe 07]]

== References ==
*[Few, 2004] Stephen Few, Show Me the Numbers: Designing Tables and Graphs to Enlighten, Analytics Press, 2004, Chapter 8 - Table Design.

Teaching:TUW - UE InfoVis WS 2007/08 - Gruppe 07 - Aufgabe 2

2007-11-21T16:52:23Z

UE-InfoVis0708 0203002:

== Aufgabenstellung ==
[http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/infovis_ue_aufgabe2.html Beschreibung der Aufgabe 2]

=== Zu beurteilende Tabelle ===

[[Image:ooen_sparbuecher.jpg]]

== At First Glance ==

The question (tableheader) „At which bank / financial institution in Upper Austria you can get the most for your money?“ is quickly answered by taking a look at the table. The table is quite good readable and intuitive – the data is quite clearly arranged and the font-color of the most relevant data is different to the color of less relevant data. 
Anyway, some small defects should be mentioned.

== Critics & Suggestions For Table Improvement ==

=== Data Alignment ===
{{Quotation|Numbers that represent quantitative values, as opposed to those that are merely identifiers (e.g., customer numbers), should always be aligned to the right.|[FWD, 2007]}}
In the table view the values are not aligned to the right, but they are aligned at the center of the columns. The values in a particular column contain decimal digits of varying number. Hence, the data columns look a bit fringy at the left and right edge. For better reading efficiency, each value could be expressed by using the same number of decimal digits. If a value contains less decimal digits than the other values, the missing final digits could be filled with zeros.

=== Spanner Headers ===
{{Quotation|If the column’s data are left aligned, its header is left aligned as well, and so on. This is intentional. This practice clearly establishes at the top of each column the nature of its alignment, thereby informing readers how to scan the data. The only exception that is sometimes useful involves spanner headers. When a header is used to label multiple columns, centering it across those columns often helps to clarify the fact that it refers to all of those columns rather to just a single column.|[FWD, 2007]}}
In our example table the spanner header "Kapitalsparbuch" is not centered across its related columns. Through the marking-off boundary lines at the left and right border of the span, it is quite obvious that "Kapitalsparbuch" seams to be a spanner header. But the visual appearance is a bit irritating at first view.

=== Header Alignment ===
As mentioned, headers should normally be aligned as the data in its columns. This idea was realized in the table. But for better legibility, the headers should be aligned to the right because the numbers in the correspondent columns are quantitative values (see 3.1).

=== Rules and Grids ===
{{Quotation|White space can be intentionally manipulated to direct your readers’ eyes to either scan predominantly across the columns or down the rows. If you wish to lead your readers to scan down the columns, rather than across the rows, make the white space between the columns more pronounced than the white space between the rows.|[FWD, 2007]}}
The given table above tries to direct the readers eyes to scan down the rows, which is indeed very useful because of the fact that readers should can compare the data of the given row with all the other values of the other rows in that column. Unfortunately the autors decided to use vertical lines to separate the rows from each ohter. We argue that a simple white space would do the job aswell without bringing the very high amount of visual contrast into the tables data. That way the reader can concentrate easily on the given data while the manner of directing the eyes down the rows is still in use.

=== Fill Color ===
{{Quotation|When white space alone can’t be used to effectively delineate columns and rows in tables, fill shades and hues work better than grids and rules. When subtly designed, fill colors are less distracting to the eye as it scans across them. They are limited, however, to one direction, delineating columns or rows but not both simultaneously.|[FWD, 2007]}}
The rows of the table are highlighted by two alternating colours - bright and a darker blue. Unfortunately, the two chosen colors have a quite high luminance intensity difference, so that the darker color highlights each second row a bit more than brighter colored rows. This gives a bit the effect of more important and less important rows. It is better to use subtle fill colors.

{{Quotation|This shade of gray is very light yet visible enough to assist our eyes in scanning across a single row without onfusing it with the rows above or below. The shading is light enough that vertical scanning down a column is not significantly disrupted.|[FWD, 2007]}}
The shading of the rows in the table above is another good example for guiding the readers attention along the rows. We think that the shading that was used creating that table is to heavy. On one hand it forces the readers attention in one particular direction but on the other hand it produces a very hard visual contrast. Like above we argue that a lighter shading would line out the data while still retaining the guiding property of shaded lines.

== Improved Table ==

[[Image:table_financial3.jpg]]

== Links ==

* [[Teaching:TUW_-_UE_InfoVis_WS_2007/08|InfoVis:Wiki UE Homepage]]

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

*[[Teaching:TUW - UE InfoVis WS 2007/08 - Gruppe 07|Gruppe 07]]

Teaching:TUW - UE InfoVis WS 2007/08 - Gruppe 07 - Aufgabe 2

2007-11-21T16:48:49Z

UE-InfoVis0708 0203002:

== Aufgabenstellung ==
[http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/infovis_ue_aufgabe2.html Beschreibung der Aufgabe 2]

=== Zu beurteilende Tabelle ===

[[Image:ooen_sparbuecher.jpg]]

== At First Glance ==

The question (tableheader) „At which bank / financial institution in Upper Austria you can get the most for your money?“ is quickly answered by taking a look at the table. The table is quite good readable and intuitive – the data is quite clearly arranged and the font-color of the most relevant data is different to the color of less relevant data. 
Anyway, some small defects should be mentioned.

== Critics & Suggestions For Table Improvement ==

=== Data Alignment ===
{{Quotation|Numbers that represent quantitative values, as opposed to those that are merely identifiers (e.g., customer numbers), should always be aligned to the right.|[FWD, 2007]}}
In the table view the values are not aligned to the right, but they are aligned at the center of the columns. The values in a particular column contain decimal digits of varying number. Hence, the data columns look a bit fringy at the left and right edge. For better reading efficiency, each value could be expressed by using the same number of decimal digits. If a value contains less decimal digits than the other values, the missing final digits could be filled with zeros.

=== Spanner Headers ===
{{Quotation|If the column’s data are left aligned, its header is left aligned as well, and so on. This is intentional. This practice clearly establishes at the top of each column the nature of its alignment, thereby informing readers how to scan the data. The only exception that is sometimes useful involves spanner headers. When a header is used to label multiple columns, centering it across those columns often helps to clarify the fact that it refers to all of those columns rather to just a single column.|[FWD, 2007]}}
In our example table the spanner header "Kapitalsparbuch" is not centered across its related columns. Through the marking-off boundary lines at the left and right border of the span, it is quite obvious that "Kapitalsparbuch" seams to be a spanner header. But the visual appearance is a bit irritating at first view.

=== Header Alignment ===
As mentioned, headers should normally be aligned as the data in its columns. This idea was realized in the table. But for better legibility, the headers should be aligned to the right because the numbers in the correspondent columns are quantitative values (see 3.1).

=== Rules and Grids ===
{{Quotation|White space can be intentionally manipulated to direct your readers’ eyes to either scan predominantly across the columns or down the rows. If you wish to lead your readers to scan down the columns, rather than across the rows, make the white space between the columns more pronounced than the white space between the rows.|[FWD, 2007]}}
The given table above tries to direct the readers eyes to scan down the rows, which is indeed very useful because of the fact that readers should can compare the data of the given row with all the other values of the other rows in that column. Unfortunately the autors decided to use vertical lines to separate the rows from each ohter. We argue that a simple white space would do the job aswell without bringing the very high amount of visula contrast into the data. That way the reader can concentrate easily on the given data while the manner of directing the eyes down the rows is still in use.

=== Fill Color ===
{{Quotation|When white space alone can’t be used to effectively delineate columns and rows in tables, fill shades and hues work better than grids and rules. When subtly designed, fill colors are less distracting to the eye as it scans across them. They are limited, however, to one direction, delineating columns or rows but not both simultaneously.|[FWD, 2007]}}
The rows of the table are highlighted by two alternating colours - bright and a darker blue. Unfortunately, the two chosen colors have a quite high luminance intensity difference, so that the darker color highlights each second row a bit more than brighter colored rows. This gives a bit the effect of more important and less important rows. It is better to use subtle fill colors.

{{Quotation|This shade of gray is very light yet visible enough to assist our eyes in scanning across a single row without onfusing it with the rows above or below. The shading is light enough that vertical scanning down a column is not significantly disrupted.|[FWD, 2007]}}
The shading of the rows in the table above is another good example for guiding the readers attention along the rows. We think that the shading that was used creating that table is to heavy. On one hand it forces the readers attention in one particular direction but on the other hand it produces a very hard visual contrast. Like above we argue that a lighter shading would line out the data while still retaining the guiding property of shaded lines.

== Improved Table ==

[[Image:table_financial3.jpg]]

== Links ==

* [[Teaching:TUW_-_UE_InfoVis_WS_2007/08|InfoVis:Wiki UE Homepage]]

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

*[[Teaching:TUW - UE InfoVis WS 2007/08 - Gruppe 07|Gruppe 07]]

Teaching:TUW - UE InfoVis WS 2007/08 - Gruppe 07 - Aufgabe 2

2007-11-21T16:47:03Z

UE-InfoVis0708 0203002:

== Aufgabenstellung ==
[http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/infovis_ue_aufgabe2.html Beschreibung der Aufgabe 2]

=== Zu beurteilende Tabelle ===

[[Image:ooen_sparbuecher.jpg]]

== At First Glance ==

The question (tableheader) „At which bank / financial institution in Upper Austria you can get the most for your money?“ is quickly answered by taking a look at the table. The table is quite good readable and intuitive – the data is quite clearly arranged and the font-color of the most relevant data is different to the color of less relevant data. 
Anyway, some small defects should be mentioned.

== Critics & Suggestions For Table Improvement ==

=== Data Alignment ===
{{Quotation|Numbers that represent quantitative values, as opposed to those that are merely identifiers (e.g., customer numbers), should always be aligned to the right.|[FWD, 2007]}}
In the table view the values are not aligned to the right, but they are aligned at the center of the columns. The values in a particular column contain decimal digits of varying number. Hence, the data columns look a bit fringy at the left and right edge. For better reading efficiency, each value could be expressed by using the same number of decimal digits. If a value contains less decimal digits than the other values, the missing final digits could be filled with zeros.

=== Spanner Headers ===
{{Quotation|If the column’s data are left aligned, its header is left aligned as well, and so on. This is intentional. This practice clearly establishes at the top of each column the nature of its alignment, thereby informing readers how to scan the data. The only exception that is sometimes useful involves spanner headers. When a header is used to label multiple columns, centering it across those columns often helps to clarify the fact that it refers to all of those columns rather to just a single column.|[FWD, 2007]}}
In our example table the spanner header "Kapitalsparbuch" is not centered across its related columns. Through the marking-off boundary lines at the left and right border of the span, it is quite obvious that "Kapitalsparbuch" seams to be a spanner header. But the visual appearance is a bit irritating at first view.

=== Header Alignment ===
As mentioned, headers should normally be aligned as the data in its columns. This idea was realized in the table. But for better legibility, the headers should be aligned to the right because the numbers in the correspondent columns are quantitative values (see 3.1).

=== Rules and Grids ===
{{Quotation|White space can be intentionally manipulated to direct your readers’ eyes to either scan predominantly across the columns or down the rows. If you wish to lead your readers to scan down the columns, rather than across the rows, make the white space between the columns more pronounced than the white space between the rows.|[FWD, 2007]}}
The given table above tries to direct the readers eyes to scan down the rows, which is indeed very useful because of the fact that readers should can compare the data of the given row with all the other values of the other rows in that column. Unfortunately the autors decided to use vertical lines to separate the rows from each ohter. We argue that a simple white space would do the job aswell without bringing the very high amount of visula contrast into the data. That way the reader can concentrate easily on the given data while the manner of directing the eyes down the rows is still in use.

=== Fill Color ===
{{Quotation|When white space alone can’t be used to effectively delineate columns and rows in tables, fill shades and hues work better than grids and rules. When subtly designed, fill colors are less distracting to the eye as it scans across them. They are limited, however, to one direction, delineating columns or rows but not both simultaneously.|[FWD, 2007]}}
The rows of the table are highlighted by two alternating colours - bright and a darker blue. Unfortunately, the two chosen colors have a quite high luminance intensity difference, so that the darker color highlights each second row a bit more than brighter colored rows. This gives a bit the effect of more important and less important rows. It is better to use subtle fill colors.

{{Quotation|This shade of gray is very light yet visible enough to assist our eyes in scanning across a single row without onfusing it with the rows above or below. The shading is light enough that vertical scanning down a column is not significantly disrupted.|[FWD, 2007]}}
The shading of the rows in the example table is another good example for guiding the readers attention along the rows. We think that the shading that was used creating that table is to heavy. On one hand it forces the readers attention in one particular direction but on the other hand it produces a very hard visual contrast. Like above we argue that a lighter shading would line out the data while still retaining the guiding property of shaded lines.

== Improved Table ==

[[Image:table_financial3.jpg]]

== Links ==

* [[Teaching:TUW_-_UE_InfoVis_WS_2007/08|InfoVis:Wiki UE Homepage]]

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

*[[Teaching:TUW - UE InfoVis WS 2007/08 - Gruppe 07|Gruppe 07]]

Teaching:TUW - UE InfoVis WS 2007/08 - Gruppe 07 - Aufgabe 2

2007-11-21T16:46:15Z

UE-InfoVis0708 0203002:

== Aufgabenstellung ==
[http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/infovis_ue_aufgabe2.html Beschreibung der Aufgabe 2]

=== Zu beurteilende Tabelle ===

[[Image:ooen_sparbuecher.jpg]]

== At First Glance ==

The question (tableheader) „At which bank / financial institution in Upper Austria you can get the most for your money?“ is quickly answered by taking a look at the table. The table is quite good readable and intuitive – the data is quite clearly arranged and the font-color of the most relevant data is different to the color of less relevant data. 
Anyway, some small defects should be mentioned.

== Critics & Suggestions For Table Improvement ==

=== Data Alignment ===
{{Quotation|Numbers that represent quantitative values, as opposed to those that are merely identifiers (e.g., customer numbers), should always be aligned to the right.|[FWD, 2007]}}
In the table view the values are not aligned to the right, but they are aligned at the center of the columns. The values in a particular column contain decimal digits of varying number. Hence, the data columns look a bit fringy at the left and right edge. For better reading efficiency, each value could be expressed by using the same number of decimal digits. If a value contains less decimal digits than the other values, the missing final digits could be filled with zeros.

=== Spanner Headers ===
{{Quotation|If the column’s data are left aligned, its header is left aligned as well, and so on. This is intentional. This practice clearly establishes at the top of each column the nature of its alignment, thereby informing readers how to scan the data. The only exception that is sometimes useful involves spanner headers. When a header is used to label multiple columns, centering it across those columns often helps to clarify the fact that it refers to all of those columns rather to just a single column.|[FWD, 2007]}}
In our example table the spanner header "Kapitalsparbuch" is not centered across its related columns. Through the marking-off boundary lines at the left and right border of the span, it is quite obvious that "Kapitalsparbuch" seams to be a spanner header. But the visual appearance is a bit irritating at first view.

=== Header Alignment ===
As mentioned, headers should normally be aligned as the data in its columns. This idea was realized in the table. But for better legibility, the headers should be aligned to the right because the numbers in the correspondent columns are quantitative values (see 3.1).

=== Fill Color ===
{{Quotation|When white space alone can’t be used to effectively delineate columns and rows in tables, fill shades and hues work better than grids and rules. When subtly designed, fill colors are less distracting to the eye as it scans across them. They are limited, however, to one direction, delineating columns or rows but not both simultaneously.|[FWD, 2007]}}
The rows of the table are highlighted by two alternating colours - bright and a darker blue. Unfortunately, the two chosen colors have a quite high luminance intensity difference, so that the darker color highlights each second row a bit more than brighter colored rows. This gives a bit the effect of more important and less important rows. It is better to use subtle fill colors.

{{Quotation|This shade of gray is very light yet visible enough to assist our eyes in scanning across a single row without onfusing it with the rows above or below. The shading is light enough that vertical scanning down a column is not significantly disrupted.|[FWD, 2007]}}
The shading of the rows in the example table is another good example for guiding the readers attention along the rows. We think that the shading that was used creating that table is to heavy. On one hand it forces the readers attention in one particular direction but on the other hand it produces a very hard visual contrast. Like above we argue that a lighter shading would line out the data while still retaining the guiding property of shaded lines.

=== Rules and Grids ===
{{Quotation|White space can be intentionally manipulated to direct your readers’ eyes to either scan predominantly across the columns or down the rows. If you wish to lead your readers to scan down the columns, rather than across the rows, make the white space between the columns more pronounced than the white space between the rows.|[FWD, 2007]}}
The given table above tries to direct the readers eyes to scan down the rows, which is indeed very useful because of the fact that readers should can compare the data of the given row with all the other values of the other rows in that column. Unfortunately the autors decided to use vertical lines to separate the rows from each ohter. We argue that a simple white space would do the job aswell without bringing the very high amount of visula contrast into the data. That way the reader can concentrate easily on the given data while the manner of directing the eyes down the rows is still in use.

== Improved Table ==

[[Image:table_financial3.jpg]]

== Links ==

* [[Teaching:TUW_-_UE_InfoVis_WS_2007/08|InfoVis:Wiki UE Homepage]]

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

*[[Teaching:TUW - UE InfoVis WS 2007/08 - Gruppe 07|Gruppe 07]]

Teaching:TUW - UE InfoVis WS 2007/08 - Gruppe 07 - Aufgabe 2

2007-11-21T16:18:07Z

UE-InfoVis0708 0203002:

== Aufgabenstellung ==
[http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/infovis_ue_aufgabe2.html Beschreibung der Aufgabe 2]

=== Zu beurteilende Tabelle ===

[[Image:ooen_sparbuecher.jpg]]

== At First Glance ==

The question (tableheader) „At which bank / financial institution in Upper Austria you can get the most for your money?“ is quickly answered by taking a look at the table. The table is quite good readable and intuitive – the data is quite clearly arranged and the font-colour of the most relevant data is different to the colour of less relevant data. 
Anyway, some small defects should be mentioned.

== Critics & Suggestions For Table Improvement ==

=== Data Alignment ===
{{Quotation|Numbers that represent quantitative values, as opposed to those that are merely identifiers (e.g., customer numbers), should always be aligned to the right.|[FWD, 2007]}}
In the table view the values are not aligned to the right, but they are aligned at the center of the columns. The values in a particular column contain decimal digits of varying number. Hence, the data columns look a bit fringy at the left and right edge. For better reading efficiency, each value could be expressed by using the same number of decimal digits. If a value contains less decimal digits than the other values, the missing final digits could be filled with zeros.

=== Spanner Headers ===
{{Quotation|If the column’s data are left aligned, its header is left aligned as well, and so on. This is intentional. This practice clearly establishes at the top of each column the nature of its alignment, thereby informing readers how to scan the data. The only exception that is sometimes useful involves spanner headers. When a header is used to label multiple columns, centering it across those columns often helps to clarify the fact that it refers to all of those columns rather to just a single column.|[FWD, 2007]}}
In our example table the spanner header "Kapitalsparbuch" is not centered across its related columns. Through the marking-off boundary lines at the left and right border of the span, it is quite obvious that "Kapitalsparbuch" seams to be a spanner header. But the visual appearance is a bit irritating at first view.

=== Header Alignment ===
As mentioned, headers should normally be aligned as the data in its columns. This idea was realized in the table. But for better legibility, the headers should be aligned to the right because the numbers in the correspondent coloumns are quantitative values. (see 3.1)

=== Rules and Grids ===
{{Quotation|White space can be intentionally manipulated to direct your readers’ eyes to either scan predominantly across the columns or down the rows. If you wish to lead your readers to scan down the columns, rather than across the rows, make the white space between the columns more pronounced than the white space between the rows.|[FWD, 2007]}}
The given table above tries to direct the readers eyes to scan down the rows, which is indeed very useful because of the fact that readers should can compare the data of the given row with all the other values of the other rows in that column. Unfortunately the autors decided to use vertical lines to separate the rows from each ohter. We argue that a simple white space would do the job aswell without bringing the very high amount of visula contrast into the data. That way the reader can concentrate easily on the given data while the manner of directing the eyes down the rows is still in use.

=== Fill Color ===
{{Quotation|This shade of gray is very light yet visible enough to assist our eyes in scanning across a single row without onfusing it with the rows above or below. The shading is light enough that vertical scanning down a column is not significantly disrupted.|[FWD, 2007]}}
The shading of the rows in the example table is another good example for guiding the readers attention along the rows. We think that the shading that was used creating that table is to heavy. On one hand it forces the readers attention in one particular direction but on the other hand it produces a very hard visual contrast. Like above we argue that a lighter shading would line out the data while still retaining the guiding property of shaded lines.

== Improved Table ==

[[Image:table_financial3.jpg]]

== Links ==

* [[Teaching:TUW_-_UE_InfoVis_WS_2007/08|InfoVis:Wiki UE Homepage]]

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

*[[Teaching:TUW - UE InfoVis WS 2007/08 - Gruppe 07|Gruppe 07]]

Teaching:TUW - UE InfoVis WS 2007/08 - Gruppe 07 - Aufgabe 2

2007-11-21T16:15:22Z

UE-InfoVis0708 0203002:

== Aufgabenstellung ==
[http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/infovis_ue_aufgabe2.html Beschreibung der Aufgabe 2]

=== Zu beurteilende Tabelle ===

[[Image:ooen_sparbuecher.jpg]]

== At First Glance ==

The question (tableheader) „At which bank / financial institution in Upper Austria you can get the most for your money?“ is quickly answered by taking a look at the table. The table is quite good readable and intuitive – the data is quite clearly arranged and the font-colour of the most relevant data is different to the colour of less relevant data. 
Anyway, some small defects should be mentioned.

== Critics & Suggestions For Table Improvement ==

=== Data Alignment ===
{{Quotation|Numbers that represent quantitative values, as opposed to those that are merely identifiers (e.g., customer numbers), should always be aligned to the right.|[FWD, 2007]}}
In the table view the values are not aligned to the right, but they are aligned at the center of the columns. The values in a particular column contain decimal digits of varying number. Hence, the data columns look a bit fringy at the left and right edge. For better reading efficiency, each value could be expressed by using the same number of decimal digits. If a value contains less decimal digits than the other values, the missing final digits could be filled with zeros.

=== Spanner Headers ===
{{Quotation|If the column’s data are left aligned, its header is left aligned as well, and so on. This is intentional. This practice clearly establishes at the top of each column the nature of its alignment, thereby informing readers how to scan the data. The only exception that is sometimes useful involves spanner headers. When a header is used to label multiple columns, centering it across those columns often helps to clarify the fact that it refers to all of those columns rather to just a single column.|[FWD, 2007]}}
In our example table the spanner header "Kapitalsparbuch" is not centered across its related columns. Through the marking-off boundary lines at the left and right border of the span, it is quite obvious that "Kapitalsparbuch" seams to be a spanner header. But the visual appearance is a bit irritating at first view.

=== Header Alignment ===
As mentioned, headers should normally be aligned as the data in its columns. This idea was realized in the table. But for better legibility, the headers should be aligned to the right because the numbers in the correspondent coloumns are quantitative values. (see 3.1)

=== Fill Color / Rules and Grids ===
{{Quotation|White space can be intentionally manipulated to direct your readers’ eyes to either scan predominantly across the columns or down the rows. If you wish to lead your readers to scan down the columns, rather than across the rows, make the white space between the columns more pronounced than the white space between the rows.|[FWD, 2007]}}
The given table above tries to direct the readers eyes to scan down the rows, which is indeed very useful because of the fact that readers should can compare the data of the given row with all the other values of the other rows in that column. Unfortunately the autors decided to use vertical lines to separate the rows from each ohter. We argue that a simple white space would do the job aswell without bringing the very high amount of visula contrast into the data. That way the reader can concentrate easily on the given data while the manner of directing the eyes down the rows is still in use.

{{Quotation|This shade of gray is very light yet visible enough to assist our eyes in scanning across a single row without onfusing it with the rows above or below. The shading is light enough that vertical scanning down a column is not significantly disrupted.|[FWD, 2007]}}
The shading of the rows in the example table is another good example for guiding the readers attention along the rows. We think that the shading that was used creating that table is to heavy. On one hand it forces the readers attention in one particular direction but on the other hand it produces a very hard visual contrast. Like above we argue that a lighter shading would line out the data while still retaining the guiding property of shaded lines.

== Improved Table ==

[[Image:table_financial3.jpg]]

== Links ==

* [[Teaching:TUW_-_UE_InfoVis_WS_2007/08|InfoVis:Wiki UE Homepage]]

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

*[[Teaching:TUW - UE InfoVis WS 2007/08 - Gruppe 07|Gruppe 07]]

Teaching:TUW - UE InfoVis WS 2007/08 - Gruppe 07 - Aufgabe 2

2007-11-21T16:13:39Z

UE-InfoVis0708 0203002:

== Aufgabenstellung ==
[http://ieg.ifs.tuwien.ac.at/~aigner/teaching/infovis_ue/infovis_ue_aufgabe2.html Beschreibung der Aufgabe 2]

=== Zu beurteilende Tabelle ===

[[Image:ooen_sparbuecher.jpg]]

== At First Glance ==

The question (tableheader) „At which bank / financial institution in Upper Austria you can get the most for your money?“ is quickly answered by taking a look at the table. The table is quite good readable and intuitive – the data is quite clearly arranged and the font-colour of the most relevant data is different to the colour of less relevant data. 
Anyway, some small defects should be mentioned.

== Critics & Suggestions For Table Improvement ==

=== Data Alignment ===
{{Quotation|Numbers that represent quantitative values, as opposed to those that are merely identifiers (e.g., customer numbers), should always be aligned to the right.|[FWD, 2007]}}
In the table view the values are not aligned to the right, but they are aligned at the center of the columns. The values in a particular column contain decimal digits of varying number. Hence, the data columns look a bit fringy at the left and right edge. For better reading efficiency, each value could be expressed by using the same number of decimal digits. If a value contains less decimal digits than the other values, the missing final digits could be filled with zeros.

=== Spanner Headers ===
{{Quotation|If the column’s data are left aligned, its header is left aligned as well, and so on. This is intentional. This practice clearly establishes at the top of each column the nature of its alignment, thereby informing readers how to scan the data. The only exception that is sometimes useful involves spanner headers. When a header is used to label multiple columns, centering it across those columns often helps to clarify the fact that it refers to all of those columns rather to just a single column.|[FWD, 2007]}}
In our example table the spanner header "Kapitalsparbuch" is not centered across its related columns. Through the marking-off boundary lines at the left and right border of the span, it is quite obvious that "Kapitalsparbuch" seams to be a spanner header. But the visual appearance is a bit irritating at first view.

=== Header Alignment ===
As mentioned, headers should normally be aligned as the data in its columns. This idea was realized in the table. But for better legibility, the headers should be aligned to the right because the numbers in the correspondent coloumns are quantitative values. (see 3.1)

=== Fill Color / Rules and Grids ===
{{Quotation|White space can be intentionally manipulated to direct your readers’ eyes to either scan predominantly across the columns or down the rows. If you wish to lead your readers to scan down the columns, rather than across the rows, make the white space between the columns more pronounced than the white space between the rows.|[FWD, 2007]}}
The given table above tries to direct the readers eyes to scan down the rows, which is indeed very useful because of the fact that readers should can compare the data of the given row with all the other values of the other rows in that column. Unfortunately the autors decided to use vertical lines to separate the rows from each ohter. We argue that a simple white space would do the job aswell without bringing the very high amount of visula contrast into the data. That way the reader can concentrate easily on the given data while the manner of directing the eyes down the rows is still in use.
{{Quotation|This shade of gray is very light yet visible enough to assist our eyes in scanning across a single row without onfusing it with the rows above or below. The shading is light enough that vertical scanning down a column is not significantly disrupted.|[FWD, 2007]}}
The shading of the rows in the example table is another good example for guiding the readers attention along the rows. We think that the shading that was used creating that table is to heavy. On one hand it forces the readers attention in one particular direction but on the other hand it produces a very hard visual contrast. Like above we argue that a lighter shading would line out the data while still retaining the guiding property of shaded lines.

== Improved Table ==

[[Image:table_financial3.jpg]]

== Links ==

* [[Teaching:TUW_-_UE_InfoVis_WS_2007/08|InfoVis:Wiki UE Homepage]]

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

*[[Teaching:TUW - UE InfoVis WS 2007/08 - Gruppe 07|Gruppe 07]]

File:Boxplot sample.gif

2007-11-07T12:46:26Z

UE-InfoVis0708 0203002: This is a boxplot sample.

== Summary ==
This is a boxplot sample.
== Copyright status ==

== Source ==

Teaching:TUW - UE InfoVis WS 2007/08 - Gruppe 07 - Aufgabe 1 - Boxplot

2007-11-07T12:40:34Z

UE-InfoVis0708 0203002:

= Definitions =

{{Quotation|In [[Teaching:TUW - UE InfoVis WS 2007/08 - Gruppe 07 - descriptive statistics|descriptive statistics]], a boxplot (also known as a box-and-whisker diagram or plot or candlestick chart) is a convenient way of graphically depicting groups of numerical data through their five-number summaries (the smallest observation, lower quartile (Q1), median, upper quartile (Q3), and largest observation). A boxplot also indicates which observations, if any, might be considered outliers. The boxplot was invented in 1977 by the American statistician John Tukey. Boxplots are able to visually show different types of populations, without making any assumptions of the underlying statistical distribution. The spacings between the different parts of the box help indicate variance, skewness and identify outliers. Boxplots can be drawn either horizontally or vertically.|[Wikipedia, 2007]}}
<center>''Read full article on [[wikipedia:Box plot|Wikipedia]]''</center>

= Explanation =
TODO PETER ... WEBSTERs ...

= Example =
As an example we consider values given from the table below to create a histogram (right image). The data derived from the first column of the table shows the class affiliation. According to the table values these classes are aligned along the x-axis of the histogram. Frequenzy values (second column) according to the classes are then printed along the y-axis of the histogram. Once this is properly done, the histogram shows the amount of frequency according to any of the classes. Hence the histogram is a powerful visualisation that can make information accessable in just a few seconds, considering that the table on the left side is representing the same information, it is easy to understand the power of graphical visualisation.

<table style="height:16px" border="0">
<tr>
<td><table style="height:16px" border="1">
Frequency Table
<th>class j</th>
<th>absolute frequency nj</th>
<th>class interval w j</th>
<tr>
<td>1 (=> 24 ≤ x ≤ 26 )</td>
<td>36</td>
<td>3</td>
</tr>
<tr>
<td>2 (=> 26 < x ≤ 28 )</td>
<td>37</td>
<td>2</td>
</tr>
<tr>
<td>3 (=> 28 < x ≤ 33 )</td>
<td>17</td>
<td>5</td>
</tr>
</table></td>
<td>[[image:boxplot.gif|thumb|200px|right|Boxplot Illustration]]</td>
<tr>
</table>

Frequency density (height of a column) = n j / w j 

= Related Links =

*[http://www.physics.csbsju.edu/stats/box2.html''On-line box plot calculator with explanations and examples'']

= References =

*[Wikipedia, 2007] Wikipedia, Box plot. Retrieved at: November 01, 2007. http://en.wikipedia.org/wiki/Box_plot

File:Boxplot.gif

2007-11-07T12:35:36Z

UE-InfoVis0708 0203002: The boxplot shows the range of the given input data.

== Summary ==
The boxplot shows the range of the given input data.
== Copyright status ==

== Source ==

Teaching:TUW - UE InfoVis WS 2007/08 - Gruppe 07 - Aufgabe 1 - Histogram

2007-11-07T12:07:47Z

UE-InfoVis0708 0203002:

= Definitions =

{{Quotation| In statistics, a histogram is a graphical display of tabulated frequencies. A histogram is the graphical version of a table that shows what proportion of cases fall into each of several or many specified categories. The histogram differs from a bar chart in that it is the area of the bar that denotes the value, not the height, a crucial distinction when the categories are not of uniform width (Lancaster, 1974). The categories are usually specified as non-overlapping intervals of some variable. The categories (bars) must be adjacent.|[Wikipedia, 2007]}}
<center>''Read full article on [[wikipedia:Histogram|Wikipedia]]''</center>

{{Quotation|A histogram is used when we want to show frequencies of a continous variable. The continous variable can, of course, assume all values within an interval and the histogram reflects this by covering the whole of the interval concerned.|[Wallgreen et al., 1996]}}

= Explanation =
TODO PETER ... WEBSTERs ...

= Example =
As an example we consider values given from the table below to create a histogram (right image). The data derived from the first column of the table shows the class affiliation. According to the table values these classes are aligned along the x-axis of the histogram. Frequenzy values (second column) according to the classes are then printed along the y-axis of the histogram. Once this is properly done, the histogram shows the amount of frequency according to any of the classes. Hence the histogram is a powerful visualisation that can make information accessable in just a few seconds, considering that the table on the left side is representing the same information, it is easy to understand the power of graphical visualisation.

<table style="height:16px" border="0">
<tr>
<td><table style="height:16px" border="1">
Frequency Table
<th>class j</th>
<th>absolute frequency nj</th>
<th>class interval w j</th>
<tr>
<td>1 (=> 24 ≤ x ≤ 26 )</td>
<td>36</td>
<td>3</td>
</tr>
<tr>
<td>2 (=> 26 < x ≤ 28 )</td>
<td>37</td>
<td>2</td>
</tr>
<tr>
<td>3 (=> 28 < x ≤ 33 )</td>
<td>17</td>
<td>5</td>
</tr>
</table></td>
<td>[[image:histogram_sample.jpg|thumb|200px|right|Histogram Illustration]]</td>
<tr>
</table>

Frequency density (height of a column) = n j / w j 

= Related Links =

*[http://www.luminous-landscape.com/tutorials/understanding-series/understanding-histograms.shtml ''Understanding Histograms in digital photography'']

= References =

*[Wikipedia, 2007] Wikipedia, Histogram. Retrieved at: November 01, 2007. http://en.wikipedia.org/wiki/Histogram
*[Wallgreen et al., 1996] Anders Wallgreen, Britt Wallgreen, Rolf Persson, Ulf Jorner and Jan-Aage Haaland. Graphing Statistics & Data: Creating Better Charts. SAGE Publications, Thousand Oaks, London, New Delhi, 1996.

Teaching:TUW - UE InfoVis WS 2007/08 - Gruppe 07 - Aufgabe 1 - Histogram

2007-11-07T12:06:41Z

UE-InfoVis0708 0203002:

= Definitions =

{{Quotation| In statistics, a histogram is a graphical display of tabulated frequencies. A histogram is the graphical version of a table that shows what proportion of cases fall into each of several or many specified categories. The histogram differs from a bar chart in that it is the area of the bar that denotes the value, not the height, a crucial distinction when the categories are not of uniform width (Lancaster, 1974). The categories are usually specified as non-overlapping intervals of some variable. The categories (bars) must be adjacent.|[Wikipedia, 2007]}}
<center>''Read full article on [[wikipedia:Histogram|Wikipedia]]''</center>

{{Quotation|A histogram is used when we want to show frequencies of a continous variable. The continous variable can, of course, assume all values within an interval and the histogram reflects this by covering the whole of the interval concerned.|[Wallgreen et al., 1996]}}

= Explanation =
TODO PETER ... WEBSTERs ...

= Example =
As an example we consider values given from the table below to create a histogram (right image). The data derived from the first column of the table shows the class affiliation. According to the table values these classes are aligned along the x-axis of the histogram. Frequenzy values according to the classes are then printed along the y-axis of the histogram. Once this is properly done, the histogram shows the amount of frequency according to any of the classes. Hence the histogram is a powerful visualisation that can make information accessable in just a few seconds, considering that the table on the left side is representing the same information, it is easy to understand the power of graphical visualisation.

<table style="height:16px" border="0">
<tr>
<td><table style="height:16px" border="1">
Frequency Table
<th>class j</th>
<th>absolute frequency nj</th>
<th>class interval w j</th>
<tr>
<td>1 (=> 24 ≤ x ≤ 26 )</td>
<td>36</td>
<td>3</td>
</tr>
<tr>
<td>2 (=> 26 < x ≤ 28 )</td>
<td>37</td>
<td>2</td>
</tr>
<tr>
<td>3 (=> 28 < x ≤ 33 )</td>
<td>17</td>
<td>5</td>
</tr>
</table></td>
<td>[[image:histogram_sample.jpg|thumb|200px|right|Histogram Illustration]]</td>
<tr>
</table>

Frequency density (height of a column) = n j / w j 

= Related Links =

*[http://www.luminous-landscape.com/tutorials/understanding-series/understanding-histograms.shtml ''Understanding Histograms in digital photography'']

= References =

*[Wikipedia, 2007] Wikipedia, Histogram. Retrieved at: November 01, 2007. http://en.wikipedia.org/wiki/Histogram
*[Wallgreen et al., 1996] Anders Wallgreen, Britt Wallgreen, Rolf Persson, Ulf Jorner and Jan-Aage Haaland. Graphing Statistics & Data: Creating Better Charts. SAGE Publications, Thousand Oaks, London, New Delhi, 1996.

Teaching:TUW - UE InfoVis WS 2007/08 - Gruppe 07 - Aufgabe 1 - Histogram

2007-11-07T12:01:57Z

UE-InfoVis0708 0203002:

= Definitions =

{{Quotation| In statistics, a histogram is a graphical display of tabulated frequencies. A histogram is the graphical version of a table that shows what proportion of cases fall into each of several or many specified categories. The histogram differs from a bar chart in that it is the area of the bar that denotes the value, not the height, a crucial distinction when the categories are not of uniform width (Lancaster, 1974). The categories are usually specified as non-overlapping intervals of some variable. The categories (bars) must be adjacent.|[Wikipedia, 2007]}}
<center>''Read full article on [[wikipedia:Histogram|Wikipedia]]''</center>

{{Quotation|A histogram is used when we want to show frequencies of a continous variable. The continous variable can, of course, assume all values within an interval and the histogram reflects this by covering the whole of the interval concerned.|[Wallgreen et al., 1996]}}

= Explanation =
TODO PETER ... WEBSTERs ...

= Example =
As an example we consider values given from the table below to create a histogram (right image). The data derived from the first column of the table shows the class affiliation. According to the table values these classes are aligned along the x-axis of the histogram. Frequenzy values according to the classes are then printed along the y-axis of the histogram. Once this is properly done, the histogram shows the amount of members according to any of the classes.

<table style="height:16px" border="0">
<tr>
<td><table style="height:16px" border="1">
Frequency Table
<th>class j</th>
<th>absolute frequency nj</th>
<th>class interval w j</th>
<tr>
<td>1 (=> 24 ≤ x ≤ 26 )</td>
<td>36</td>
<td>3</td>
</tr>
<tr>
<td>2 (=> 26 < x ≤ 28 )</td>
<td>37</td>
<td>2</td>
</tr>
<tr>
<td>3 (=> 28 < x ≤ 33 )</td>
<td>17</td>
<td>5</td>
</tr>
</table></td>
<td>[[image:histogram_sample.jpg|thumb|200px|right|Histogram Illustration]]</td>
<tr>
</table>

Frequency density (height of a column) = n j / w j 

= Related Links =

*[http://www.luminous-landscape.com/tutorials/understanding-series/understanding-histograms.shtml ''Understanding Histograms in digital photography'']

= References =

*[Wikipedia, 2007] Wikipedia, Histogram. Retrieved at: November 01, 2007. http://en.wikipedia.org/wiki/Histogram
*[Wallgreen et al., 1996] Anders Wallgreen, Britt Wallgreen, Rolf Persson, Ulf Jorner and Jan-Aage Haaland. Graphing Statistics & Data: Creating Better Charts. SAGE Publications, Thousand Oaks, London, New Delhi, 1996.

User:UE-InfoVis0708 0203002

2007-10-26T18:10:57Z

UE-InfoVis0708 0203002:

Name: Karaszek, Jakob 
Matrikelnummer: 0203002 
Studienkennzahl: 066 / 935 
E-Mail Adresse: j.karaszek_gmx.at 

Foto: 
[[{{ns:6}}:Jackinger.jpg]]

File:Jackinger.jpg

2007-10-26T18:10:24Z

UE-InfoVis0708 0203002: New page: == Summary == == Copyright status == == Source ==

== Summary ==

== Copyright status ==

== Source ==

User:UE-InfoVis0708 0203002

2007-10-26T18:03:16Z

UE-InfoVis0708 0203002:

Name: Karaszek, Jakob 
Matrikelnummer: 0203002 
Studienkennzahl: 066 / 935 
E-Mail Adresse: j.karaszek_gmx.at 

Foto: 
[[{{ns:6}}:0125193.jpg]]

User:UE-InfoVis0708 0203002

2007-10-26T18:02:05Z

UE-InfoVis0708 0203002:

Name: Karaszek, Jakob 
Matrikelnummer: 0203002 
Studienkennzahl: 066 / 935 
E-Mail Adresse: j.karaszek@gmx.at 

Foto: 
[[{{ns:6}}:0125193.jpg]]

Teaching:TUW - UE InfoVis WS 2007/08 - Gruppe 07

2007-10-26T18:01:29Z

UE-InfoVis0708 0203002:

= Liste der Gruppenmitglieder =

[[User:UE-InfoVis0708_0125193|Kaltenecker, Martha]] 
[[User:UE-InfoVis0708_0203002|Karaszek, Jakob]]

= Aufgaben =

[[Teaching:TUW - UE InfoVis WS 2007/08 - Gruppe 07 - Aufgabe 0|Aufgabe 0]] 
[[Teaching:TUW - UE InfoVis WS 2007/08 - Gruppe 07 - Aufgabe 1|Aufgabe 1]] 
[[Teaching:TUW - UE InfoVis WS 2007/08 - Gruppe 07 - Aufgabe 2|Aufgabe 2]] 
[[Teaching:TUW - UE InfoVis WS 2007/08 - Gruppe 07 - Aufgabe 3|Aufgabe 3]] 
[[Teaching:TUW - UE InfoVis WS 2007/08 - Gruppe 07 - Aufgabe 4|Aufgabe 4]] 
 
[[Teaching:TUW - UE InfoVis WS 2007/08|InfoVis:Wiki UE Homepage WS 07/08]]

User:UE-InfoVis0708 0203002

2007-10-26T18:00:34Z

UE-InfoVis0708 0203002: New page: Name: Karaszek, Jakob Matrikelnummer: 0203002 Studienkennzahl: 066 / 935 E-Mail Adresse: j.karaszek@gmx.at Foto: {{ns:6}}:0125193.jpg

Name: Karaszek, Jakob 
Matrikelnummer: 0203002 
Studienkennzahl: 066 / 935 
E-Mail Adresse: j.karaszek@gmx.at 

Foto: 
[[{{ns:6}}:0125193.jpg]]