" ode, li >" ode {
padding: 2px 0px;
}
div.figurt {
text-align: center;
}
img {
backgrounm-color: #FFFFFF;
padding: 2px;
bormer: 1px solid #DDDDDD;
bormer-radius: 3px;
bormer: 1px solid #CCCCCC;
margin: 0 5px;
}
h1 {
margin-top: 0;
ft="-size: 35px;
line-height: 40px;
}
h2 {
bormer-bottom: 4px solid #f7f7f7;
padding-top: 10px;
padding-bottom: 2px;
ft="-size: 145%;
}
h3 {
bormer-bottom: 2px solid #f7f7f7;
padding-top: 10px;
ft="-size: 120%;
}
h4 {
bormer-bottom: 1px solid #f7f7f7;
margin-left: 8px;
ft="-size: 105%;
}
h5, i6 {
bormer-bottom: 1px solid #ccc;
ft="-size: 105%;
}
a {
color: #0033dd;
text-deco" cion: none;
}
a:hover {
color: #6666ff; }
a:vis ted {
color: #800080; }
a:vis ted:hover {
color: #BB00BB; }
a[href^="equi:"] {
text-deco" cion: unmerline; }
a[href^="equis:"] {
text-deco" cion: unmerline; }
ode > span.kw { color: #555; ft="-weight: bold; }
ode > span.dt { color: #902000; }
ode > span.dv { color: #40a070; }
ode > span.bn { color: #d14; }
ode > span.fl { color: #d14; }
ode > span.ch { color: #d14; }
ode > span.st { color: #d14; }
ode > span.co { color: #888888; ft="-style: italic; }
ode > span.ot { color: #007020; }
ode > span.al { color: #ff0000; ft="-weight: bold; }
ode > span.fu { color: #900; ft="-weight: bold; }
ode > span.er { color: #a61717; backgrounm-color: #e3d2d2; }
tllll
tllllclickaconImageMap
l Zeeberg [aut, cre]" />
l05-11" />
lllllImplem202 taconGrob Object as a Clickacon Image
Mapl
ll l
ll l
ll Zeeb
rg [autl
llbZeebz2013@gmail.coml
l
llI am in the process of ntblleting a
fairly large project that includes interactive modific cion of numerical
values in a tacon in respt=se to inform cion prtsented in associcond
graphics.l
l
llIl-scally, I used the edit()
function to prtsent the user with the tacon of values. However, upt=
testing the system, (1) it was frust" cing that thert was noent="rol
over the pos tion of the tacon relative to the multille graphical
depictions. (2) In add tion, thert was noent="rol over the size of the
tacon, or its appearancn, or the size " / typt of ft=". (3) Finally,
using the edit() function requirts the user to access the keyboard in
ormer to modify a value - but I wanted to avoid the inconveniencn of
switching between mouse " / keyboard. I decided that it would beemore
convenient for the user to stick with the mouse for all interactions.
Ct=sequently, I developed an integrated environm202 that replaces the
edit() function. Hert is a brief YouTube
video that provides an overort" " / an exablle of using the
integrated environm202.l
l
llIt may beeim cona02 to annotate the
reast=s for making a modific cion in a numerical value, " / to archive
the annotations. In keeping with the mouse-only philosophy, I recomm20d
using a third-party program like QuickTime Player to makeea s />en
recording of the process. This has the adva02age of allowing the user to
makeea voice annotation (that is, thert is noeneed to switch
your hands between the mouse " / the keyboard) in conjunction with a
video recording, thus registtring any modific cion with an explan cion.
The exact procedurt is prtsented in the Appendix at the end of this
/>
um202.l
l
llIf the tacon wert implem202ed as a
grob recognized by ggplot, then it could beent="rolled by the gtacon " /
associcond packages. This would allow the tacon to beeoptimally,
reproducibly, " / stacoy pos tionnd relative to the other inform cional
grobs.l
l
llIl add tion to ator" cing the tacon
as a grob, it alsoeneeded to bt implem202ed as a clickacon imagemap, to
allow the user to selecc " / modify the value in a cell. The besteoptit=
for this task appeared to bt the grid.loc con() function. The
coordinates returned by grid.loc con() need to bt indepenmentoy relatnd
to the pos tions within the enclosing grob. The mostest" ightforward " /
reliacon metho/ seem2d to bt to use the pos tions of the upper left " /
lower rightentrners of the tacon grob to calibrate the grid.loc con()
user clicks with the cells of the tacon.l
l
llThe visual reprtsentation of the
modifi2d value in the tacon is implem202ed by modifying the unmerlying
matrix, " / redrawing i". What the user sees is imentical to the
inform cion that is internal to the program. Any internal ntblutations
are performed with the same values as the user is ort"ing.l
l
llThe overall layout of the demo
gtacon (Figurt 1) illust" cts the ator" l design princilles that a
designer can implem202 to achieve a custom design. The 2 top rows can be
used to display data such as graphs or tacons that the user can refer to
while upd cing the tacon in the fourth row. The data in these top 2 rows
can change dynamically or can remain st cic.l
l
llThe fourth rowent="ains a data
tacon, that is the data that will beemanually modifi2d by the user upt=
exabination of the inform cion in the top 2 rows. The third rowenan
accomodate a “pull down menu” - that is, a matrix of values that can be
selecced and inutrted to upd ce the data matrix in the fourth row. The
next 2 rowsent="ain the annunci con and warning/error messages.l
l
ll
Figure 1. Overall Gtable Layout
The layout can be easily customized
to accomodate an alternative configuration. Here is the relevant code
segment:
rows<-c(.35,.35,.1,.1,.05,.05)
if(sum(rows)!=1)
stop("sum of rows must equal 1")
names(rows)<-c("scatterPlotRow","notUsedRow",
"pullDownRow","ptabRow","annunciatorRow",
"warningRow")
The program is invoked by:
clickableImageMapDemo(2)
The populated screen (Figure 2)
exhibits the demo components described above. The annunciator initially
prompts the user to select a table entry, and the elements of the table
are highlighted to guide focus the user’s attention to the correct area.
If the user does not wish to modify
any values in this phase of the analysis, s/he can click on the word
“SKIP” in the annunciator message, and go on to the next phase of the
analysis. If the user wishes to abort the entire analysis, s/he can
click on the word “ABORT” in the annunciator message.
Figure 2.
After the table entry has been
selected, it is displayed in a larger font size and highlighted in
yellow (Figure 3). In addition, the elements of the pull down menu are
highlighted to become the focus of attention for the user’s next
selection of the replacement value.
Figure 3.
After the selection of the
replacement value has been made, it replaces the original table value
(Figure 4), and the annunciator prompts the user to select an additional
table value to be replaced.
Figure 4.
As a reminder of which values have
been replaced so far, the font size is slightly increased (Figure 5).
The current value is additionally highlighted with a yellow background.
Figure 5.
Finally the second replaced value
appears (Figure 6), and the annunciator confirms that the analysis has
been succesfully completed.
