Example of a Document for Display in a Browser

Dr David J Scott

Entering Text


Ordinary paragraph text can be entering using hwrite. Aspects of the text such as the font family, face, size and colour can be altered in line by using tags or styles.

For example the font can be changed to sans-serif like this, italic like this, bold like this, coloured like this, or any combination of these like this.

Some text variations may not be rendered appropriately as can be seen in the examples above. Classes can be defined in the .css file to deal with this problem.

Incorporating Special Symbols


Using appropriate tags and a list of symbols it is possible to output mathematical and other symbols. Superscripts and subscripts are also possible.

Here are some Greek letters: α β and Γ, followed by some examples of superscripts and subscripts: α2 and βn. As examples of other symbols, here are some arrows: ← and ⇒, some set symbols: ∃ and ∩, and some operators: ∫ and ∏.

More than one approach is available to produce mathematical symbols. Greek letters can be produced by using symbol font: a, b, G, although this may not work in some browsers without the presence of additional fonts. Codes can be used instead of \(\LaTeX\)-like names: ←, ∫ and ∏

Quotes can be incorporated by escaping with "\", so for example we can obtain " and ' in the middle of some text.

Rendering Mathematics


Entering more complex mathematical expressions including displayed mathematical expressions is difficult. One approach is to insert an image produced by other means, for example by \(\LaTeX\) or Word's equation editor. The following expression was produced by Word's equation editor then saved as a jpeg.

DisplayedEquation.jpg

To enable the rendering of complex mathematical expressions using \(\LaTeX\) syntax, JavaScript is required, the JavaScript being run when the file is loaded into the browser. The package R2HTML uses MathPlayer to do the rendering. An alternative is MathJax which is used by org-babel. MathJax is supported by a number of scientific societies and is sponsored by the American Mathematical Society and the Society for Industrial and Applied Mathematics: see . MathPlayer does not work reliably in all browsers and may require an add-on to function. MathJax is preferred for these reasons in extending the capabilities of hwriter in the hwriterPlus package

Here is an inline expression:\(\int_{-\infty}^{1}f(x)dx\), followed by two displayed expressions, one of which is numbered and has also been assigned a label. The first example also has a box around it, by assigning the value "border = '1'" to the argument table.attributes.


\[\int_{-\infty}^{1}f(x)dx\]


 \[\{ 26.119 < \sum_{i=1}^n(X_i-\bar{X})^2\} \bigcup\ \{ 5.629 > \sum_{i=1}^n (X_i-\bar{X})^2 \}.\](1)


Incorporating Images


Incorporating images is complicated by the inability of different browsers to display images in different formats. Firefox will not display .wmf images for example. The only scalable image format which can be displayed by all the common browsers (Internet Explorer, Firefox, Safari and Chrome) appears to be .svg, scalable vector graphics.

Here is a windows metafile, .wmf image. Unfortunately this will only display in Internet Explorer, and there will be no output produced at all if this example is run on linux. The example is the cats data used by Leisch as an Sweave example, taken from Venables and Ripley (1987). The data frame contains measurements of heart and body weight of 144 cats (47 female, 47 male).

A linear regression model of heart weight by sex and gender was fitted to this data. The graph is a scatter plot of the data including the regression lines

cats.wmf
Here is the cats data plot in svg format. This uses an extension to hwriter to produce HTML code which enables display in up to date versions of all common browsers.

A further format is png (portable network graphics). This should display in up to date versions of all common browsers. It is a bitmap format however so not scalable.
cats.png
One problem with images is that the size of the image displayed can vary widely from browser to browser. Obtaining the right sized image for a particular browser may require a lot of trial and error.

Vectors, Matrices and Dataframes


Here is some code producing a character vector
form <- y ~ a + b + c
example <- as.character(form)

This is the result of printing the vector
~ya + b + c

Here is some code producing a numeric vector
y <- 3*(1:5)

This is the result of printing the vector
3691215

Here is some code producing a matrix
mdat <- matrix(c(1,2,3, 11,12,13),
               nrow = 2, ncol = 3, byrow = TRUE,
               dimnames = list(c('row1', 'row2'),
                               c('C.1', 'C.2', 'C.3')))

This is the result of printing the matrix
C.1C.2C.3
row1123
row2111213

Here is some code producing a dataframe
L3 <- LETTERS[1:3]
d <- data.frame(cbind(x = 1, y = 1:10),
                fac = sample(L3, 10, replace = TRUE))

This is the result of printing the dataframe
xyfac
1 1A
1 2C
1 3C
1 4A
1 5B
1 6C
1 7C
1 8B
1 9B
110B

Tables


Here is an example taken from the documentation of xtable. It shows the output of an ANOVA table.

Df Sum Sq Mean Sq F value Pr(> F)
sex 1 75.37 75.37 0.38 0.5417
ethnicty 3 2572.15 857.38 4.27 0.0072
grade 1 36.31 36.31 0.18 0.6717
disadvg 1 59.30 59.30 0.30 0.5882
Residuals 93 18682.87 200.89

Here is an example taken from the documentation of table. It shows the output of a two-dimensional table.

Northeast South North Central West
New England 6 0 0 0
Middle Atlantic 3 0 0 0
South Atlantic 0 8 0 0
East South Central 0 4 0 0
West South Central 0 4 0 0
East North Central 0 0 5 0
West North Central 0 0 7 0
Mountain 0 0 0 8
Pacific 0 0 0 5

R Output

To include output from R in a file, the command capture.output is used to record the output. Then the output is included in the HTML file by using the command hwriteOutput, which is not in the package hwriter.
Here is an example from the glm help.
aggOut <-
    capture.output(data(iris),
                   str(iris),
                   aggregate(Sepal.Length~Species, iris, mean)
                   )

This produces the following result.
'data.frame':	150 obs. of  5 variables:
 $ Sepal.Length: num  5.1 4.9 4.7 4.6 5 5.4 4.6 5 4.4 4.9 ...
 $ Sepal.Width : num  3.5 3 3.2 3.1 3.6 3.9 3.4 3.4 2.9 3.1 ...
 $ Petal.Length: num  1.4 1.4 1.3 1.5 1.4 1.7 1.4 1.5 1.4 1.5 ...
 $ Petal.Width : num  0.2 0.2 0.2 0.2 0.2 0.4 0.3 0.2 0.2 0.1 ...
 $ Species     : Factor w/ 3 levels "setosa","versicolor",..: 1 1 1 1 1 1 1 1 1 1 ...
     Species Sepal.Length
1     setosa        5.006
2 versicolor        5.936
3  virginica        6.588

Note the commas separating the parts of the output to be captured. See the help and examples for capture.output for details.

An R Session

To capture an R session, or part of one, including both commands and output, the command txtStart from the package TeachingDemos can be used then hwriteOutput. This requires writing to a file, and reading the results back from the file. A temporary file can used for holding the output. See ?tempfile.
Here is an example.
> clotting <- data.frame(u = c(5, 10, 15, 20, 30, 40, 60, 80, 100), 
+ lot1 = c(118, 58, 42, 35, 27, 25, 21, 19, 18), lot2 = c(69, 
+ 
+ 35, 26, 21, 18, 16, 13, 12, 12))
> clotting
    u lot1 lot2
1   5  118   69
2  10   58   35
3  15   42   26
4  20   35   21
5  30   27   18
6  40   25   16
7  60   21   13
8  80   19   12
9 100   18   12
> coef(glm(lot1 ~ log(u), data = clotting, family = Gamma))
(Intercept)      log(u) 
-0.01655438  0.01534311 

An alternative approach which should not mangle line breaks is provided by the script function written by Ross Ihaka
Script started on Sat Sep 01 19:17:13 2012 
> clotting <-
>     data.frame(
>                u = c(5,10,15,20,30,40,60,80,100),
>                lot1 = c(118,58,42,35,27,25,21,19,18),
>                lot2 = c(69,35,26,21,18,16,13,12,12)
>                )
> clotting
    u lot1 lot2
1   5  118   69
2  10   58   35
3  15   42   26
4  20   35   21
5  30   27   18
6  40   25   16
7  60   21   13
8  80   19   12
9 100   18   12
> coef(glm(lot1 ~ log(u), data=clotting, family=Gamma))
(Intercept)      log(u) 
-0.01655438  0.01534311 
> q()
Script done on Sat Sep 01 19:17:13 2012 

The new function hwriteScript can be used to drop off lines at the beginning and end of the file created by script.
> clotting <-
>     data.frame(
>                u = c(5,10,15,20,30,40,60,80,100),
>                lot1 = c(118,58,42,35,27,25,21,19,18),
>                lot2 = c(69,35,26,21,18,16,13,12,12)
>                )
> clotting
    u lot1 lot2
1   5  118   69
2  10   58   35
3  15   42   26
4  20   35   21
5  30   27   18
6  40   25   16
7  60   21   13
8  80   19   12
9 100   18   12
> coef(glm(lot1 ~ log(u), data=clotting, family=Gamma))
(Intercept)      log(u) 
-0.01655438  0.01534311 

Creating Links

Since HTML is being produced, it is easy to create links to other websites. Here is an example of a link to the Statistics Department website: The Department of Statistics.

Links may be created within pages using anchors. Destination anchors in HTML documents may be specified either by the a element (naming it with the name attribute), or by any other element (naming with the id attribute). Here is a link to the first section created using the a element: Entering Text.

Here is a link to the third section created by naming with the id attribute: Rendering Mathematics.

This use of named or identified elements of a documents is how cross-referencing can be implemented.

The numbered equation entered previously can be cross-referenced using the link argument to hwrite. That equation is equation 1 at present. Here is the link to the equation: Numbered Equation.
We can also retrieve the number of a labeled equation. For example the numbered equation was the first equation and had the label "equation1" which in full is "eq:equation1". We can retrieve the number using which(hwriterEquationList == "eq:equation1") which produces 1 or more easily using the convenience function eqRef, using simply eqRef("equation1").

The graph in SVG format included previously can also be cross-referenced since it was assigned an identifier using the id attribute. Here is a link to that graph: Graph in SVG format.



(Page generated on Sat Sep 01 19:17:13 2012 by hwriter 1.3)