SLIDE 1
Imagemaps and R
How the WWW WWWorks Hyperlinks and Imagemaps R Plots to Imagemaps
Imagemaps and R How the WWW WWWorks Hyperlinks and Imagemaps R - - PowerPoint PPT Presentation
Imagemaps and R How the WWW WWWorks Hyperlinks and Imagemaps R - - PowerPoint PPT Presentation
Imagemaps and R How the WWW WWWorks Hyperlinks and Imagemaps R Plots to Imagemaps Clients and Servers Server Client Clients and Servers runs runs web browser web server Clients and Servers browser sends http request to server
SLIDE 2
SLIDE 3
Clients and Servers
web browser web server
runs runs
SLIDE 4
Clients and Servers
web browser renders html web server browser sends http request to server server sends response to client browser
SLIDE 5
HTTP
Client sends: GET /foo.html Server replies: HTTP/1.1 200 OK Content-type: text/html Content-length: 83 <html> <head> <title>Document</title> </head> <body> Hello World </body> </html>
SLIDE 6
Text Hyperlink
Read more about <a href="foo.html">Foo</a>
request: GET foo.html
user clicks here Read more about Foo
SLIDE 7
Image Hyperlink
<a href="foo.html"> <img src="shapes.png" border=0 /> </a>
request: GET foo.html
user clicks here
SLIDE 8
Server-side imagemap
<a href="foo.html"> <img src="shapes.png" ismap border=0 /> </a>
request: GET foo.html?224,80
user clicks here
SLIDE 9
Client-side imagemap
<map name="mymap">
<area shape="circle" coords="189,80,46" href="circle.html"> <area shape="rect" coords="31,26,101,135" href="rectangle.html"> <area shape="poly" coords="210,21,258,102,192,140,293,142,286,10" href="polygon.html"> </map> <img src="image1.png" alt="Image Map" usemap="#mymap" ismap>
SLIDE 10
Client-side imagemap
user clicks here
request: GET circle.html
SLIDE 11
Example: find the outlier
SLIDE 12
Workflow
Write R code to make the plot. Create a graphics file plot. Write the HTML MAP code.
SLIDE 13
Make the plot
set.seed(999) x=1:10 y=3.4*x+rnorm(10,0,4) y[3]=y[3]+15
- utlierPlot=function(x,y){
plot(x,y) title("Find the outlier")
}
SLIDE 14
Making an image file
png(file=”outlier.png”, width=500,height=500)
- utlierPlot(x,y)
dev.off()
Use the png() or jpeg() functions. Create the plot Close the graphics device.
- utlier.png
SLIDE 15
HTML code
Can now show a clickable R plot on the web:
<img src="outlier.png" border=0 ISMAP USEMAP=”#outlier” /> <map name=”outlier”> <area ..... > </map>
Problem now is writing the <map> parts...
SLIDE 16
Specify the active areas
makeMap=function(x,y){ require(imagemap) im=imagemap("Outliers",height=500,width=500)
- utlierPlot(x,y)
for(i in c(1,2,4:10)){ addRegion(im) = imPoint(x[i],y[i],1,1, href="notOutlier.html") } addRegion(im) = imPoint(x[3],y[3],1,1, href="isOutlier.html") createPage(im,"outlier.html", imgTags=list(border=0)) imClose(im) }
SLIDE 17
Run...
makeMap(x,y)
- utlier.html
<html> <head><title>Imagemap from R</title></head> <body> <img src="outlier.png" usemap="#outlier" border="0" ISMAP> <map name="outlier"> <area shape="rect" coords="51,403,94,392" href="notOutlier.html"> <area shape="rect" coords="94,412,136,400" href="notOutlier.html"> <area shape="rect" coords="179,258,222,247" href="notOutlier.html"> <area shape="rect" coords="222,244,264,232" href="notOutlier.html"> <area shape="rect" coords="264,218,307,206" href="notOutlier.html"> <area shape="rect" coords="307,240,350,228" href="notOutlier.html"> <area shape="rect" coords="350,171,392,160" href="notOutlier.html"> <area shape="rect" coords="392,118,435,106" href="notOutlier.html"> <area shape="rect" coords="435,85,477,73" href="notOutlier.html"> <area shape="rect" coords="136,98,179,87" href="isOutlier.html"> </map> </body> </html>
- utlier.png
SLIDE 18
Closer look...
<html> <head><title>Imagemap from R</title></head> <body> <img src="outlier.png" usemap="#outlier" border="0" ISMAP> <map name="outlier"> <area shape="rect" coords="51,403,94,392" href="notOutlier.html"> <area shape="rect" coords="94,412,136,400" href="notOutlier.html"> <area shape="rect" coords="179,258,222,247" href="notOutlier.html"> <area shape="rect" coords="222,244,264,232" href="notOutlier.html"> <area shape="rect" coords="264,218,307,206" href="notOutlier.html"> <area shape="rect" coords="307,240,350,228" href="notOutlier.html"> <area shape="rect" coords="350,171,392,160" href="notOutlier.html"> <area shape="rect" coords="392,118,435,106" href="notOutlier.html"> <area shape="rect" coords="435,85,477,73" href="notOutlier.html"> <area shape="rect" coords="136,98,179,87" href="isOutlier.html"> </map> </body> </html>
SLIDE 19
Complex Example
http://www.maths.lancs.ac.uk/~rowlings/Graphics/ImageMaps/
SLIDE 20
Circles
Plot with:
symbols(8.5,8.5,circle=1.5,add=TRUE,inches=F)
Create hotspot:
addRegion(im) = imCircle(8.5,8.5,1.5,href="imCircle.html")
SLIDE 21
Text
Plot with:
msg = expression(paste("imText: ",hat(beta) == (X^t * X)^{-1} * X^t * y,sep='')) text(2,4, msg, srt=45)
Create hotspot:
addRegion(im) = imText(2,4,msg,pars=list(srt=45),href="imText.html")
SLIDE 22
Rectangles
Plot with:
rect(6.1,2.1,7,2.9) text(6.5,2.5,'hole') rect(6,2,10,4) text(8,3,'imRect(1)') rect(5,1,10.2,4.2) text(6,1.3,'imRect(2)')
Create hotspot:
addRegion(im) = imRect(6.1,2.1,7,2.9) addRegion(im) = imRect(6,2,10,4,href="imRect-1.html") addRegion(im) = imRect(5,1,10.2,4.2,href="imRect-2.html")
SLIDE 23
Polygons
Plot with:
xy <- cbind(c(2.9,1.3,2.4,4.2,4.6,2.9), c(9.8,8.8,7.0,7.0,8.6,9.8)) lines(xy)
Create hotspot:
addRegion(im) = imPoly(xy,href="imPoly.html")
SLIDE 24
Default
Set default:
addRegion(im) = imDefault(href="imDefault.html")
SLIDE 25