imagemaps and r
play

Imagemaps and R How the WWW WWWorks Hyperlinks and Imagemaps R - PowerPoint PPT Presentation

Jan 29, 2023 •129 likes •390 views

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

  1. Imagemaps and R  How the WWW WWWorks  Hyperlinks and Imagemaps  R Plots to Imagemaps

  2. Clients and Servers Server Client

  3. Clients and Servers runs runs web browser web server

  4. Clients and Servers browser sends http request to server web browser renders html server sends response web server to client browser

  5. HTTP Server replies: Client sends: GET /foo.html HTTP/1.1 200 OK Content-type: text/html Content-length: 83 <html> <head> <title>Document</title> </head> <body> Hello World </body> </html>

  6. Text Hyperlink Read more about <a href="foo.html">Foo</a> user clicks here Read more about Foo request: GET foo.html

  7. Image Hyperlink <a href="foo.html"> <img src="shapes.png" border=0 /> </a> user clicks here request: GET foo.html

  8. Server-side imagemap <a href="foo.html"> <img src="shapes.png" ismap border=0 /> </a> user clicks here request: GET foo.html?224,80

  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>

  10. Client-side imagemap user clicks here request: GET circle.html

  11. Example: find the outlier

  12. Workflow  Write R code to make the plot.  Create a graphics file plot.  Write the HTML MAP code.

  13. Make the plot set.seed(999) x=1:10 y=3.4*x+rnorm(10,0,4) y[3]=y[3]+15 outlierPlot=function(x,y){ plot(x,y) title("Find the outlier") }

  14. Making an image file  Use the png() or jpeg() functions.  Create the plot  Close the graphics device. png(file=”outlier.png”, width=500,height=500) outlierPlot(x,y) dev.off() outlier.png

  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...

  16. Specify the active areas makeMap=function(x,y){ require(imagemap) im=imagemap("Outliers",height=500,width=500) outlierPlot(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) }

  17. Run... makeMap(x,y) outlier.html <html> <head><title>Imagemap from R</title></head> <body> <img src="outlier.png" usemap="#outlier" border="0" ISMAP> outlier.png <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>

  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>

  19. Complex Example http://www.maths.lancs.ac.uk/~rowlings/Graphics/ImageMaps/

  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")

  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")

  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")

  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")

  24. Default Set default: addRegion(im) = imDefault(href="imDefault.html")

  25. Fancy Tricks These days, web pages can do all sorts of exciting things.... http://www.maths.lancs.ac.uk/~rowlings/Graphics/ImageMaps/fancy.html (uses the jQuery javascript library) http://www.rpad.org/Rpad/imagemap.Rpad (implements a 'hover' hotspot)

Recommend

More recommend