forked from hrbrmstr/metricsgraphics
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.Rmd
151 lines (118 loc) · 4.69 KB
/
index.Rmd
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
---
title: "Introduction to metricsgraphics"
output:
html_document:
theme: spacelab
highlight: tango
---
[metricsgraphics](http://github.com/hrbrmstr/metricsgraphics) is an [htmlwidget](https://github.com/ramnathv/htmlwidgets) interface to the [MetricsGraphics.js](http://metricsgraphicsjs.org) JavaScript/D3 chart library.
The current `htmlwidget` wrapper for it does not provide support for MetricsGraphics histograms but does have basic support for it's best feature - time series charts.
### Installation
`devtools::install_github("hrbrmstr/metricsgraphics")`
### Usage
Building `metricsgraphics` charts follows the "piping" idiom made popular through the [magrittr](https://github.com/smbache/magrittr), [ggvis](http://ggvis.rstudio.com/) and [dplyr](http://github.com/dplyr) packages. This makes it possible to avoid one giant function with a ton of parameters and facilitates breaking out the chart building into logical steps. While MetricsGraphics.js charts may not have the flexibility of `ggplot2`, you can build functional, interactive [multi-]line, scatterplot & bar charts (histograms coming soon) and even link charts together.
All plots begin with `mjs_plot`, which sets up the widget. You then use `mjs_line`, `mjs_bar` or `mjs_point` to specify the "geom" you want to use for plotting. However, unlike `ggplot2` (or even `base` `plot`) you cannot combine "geoms". The only exception to that is adding more lines to a `mjs_line` plot. This is not a limitation of the package, but more a design principle of the MetricsGraphics JavaScript library.
### Examples
#### Basic Line Chart
This example shows a basic line chart with MetricsGraphics.js `baseline` [[1](https://github.com/mozilla/metrics-graphics/wiki/Graphic#wiki-baselines)] & `marker` [[2](https://github.com/mozilla/metrics-graphics/wiki/Graphic#wiki-markers)] annotations:
```{r}
library(htmltools)
library(htmlwidgets)
library(metricsgraphics)
library(RColorBrewer)
tmp <- data.frame(year=seq(1790, 1970, 10), uspop=as.numeric(uspop))
tmp %>%
mjs_plot(x=year, y=uspop) %>%
mjs_line() %>%
mjs_add_marker(1850, "Something Wonderful") %>%
mjs_add_baseline(150, "Something Awful")
```
#### Basic Bar Chart
```{r}
tmp %>%
mjs_plot(x=uspop, y=year, width=500, height=400) %>%
mjs_bar() %>%
mjs_axis_x(xax_format = 'plain')
```
```{r}
```
#### Scatterplots
```{r}
mtcars %>%
mjs_plot(x=wt, y=mpg, width=600, height=500) %>%
mjs_point(color_accessor=carb, size_accessor=carb) %>%
mjs_labs(x="Weight of Car", y="Miles per Gallon")
```
```{r}
mtcars %>%
mjs_plot(x=wt, y=mpg, width=600, height=500) %>%
mjs_point(color_accessor=cyl,
x_rug=TRUE, y_rug=TRUE,
size_accessor=carb,
size_range=c(5, 10),
color_type="category",
color_range=brewer.pal(n=11, name="RdBu")[c(1, 5, 11)]) %>%
mjs_labs(x="Weight of Car", y="Miles per Gallon") %>%
mjs_add_legend(legend="X")
```
```{r}
mtcars %>%
mjs_plot(x=wt, y=mpg, width=600, height=500) %>%
mjs_point(least_squares=TRUE) %>%
mjs_labs(x="Weight of Car", y="Miles per Gallon")
```
#### Muti-line charts
```{r}
set.seed(1492)
stocks <- data.frame(
time = as.Date('2009-01-01') + 0:9,
X = rnorm(10, 0, 1),
Y = rnorm(10, 0, 2),
Z = rnorm(10, 0, 4))
stocks %>%
mjs_plot(x=time, y=X) %>%
mjs_line() %>%
mjs_add_line(Y) %>%
mjs_add_line(Z) %>%
mjs_axis_x(xax_format="date") %>%
mjs_add_legend(legend=c("X", "Y", "Z"))
```
#### Linked Charts
```{r}
stocks2 <- data.frame(
time = as.Date('2009-01-01') + 0:9,
X = rnorm(10, 0, 1),
Y = rnorm(10, 0, 2),
Z = rnorm(10, 0, 4))
s1 <- stocks %>%
mjs_plot(x=time, y=X, linked=TRUE, width=350, height=275) %>%
mjs_line() %>%
mjs_add_line(Y) %>%
mjs_add_line(Z) %>%
mjs_axis_x(xax_format="date") %>%
mjs_add_legend(legend=c("X", "Y", "Z"))
s2 <- stocks2 %>%
mjs_plot(x=time, y=X, linked=TRUE, width=350, height=275) %>%
mjs_line() %>%
mjs_add_line(Y) %>%
mjs_add_line(Z) %>%
mjs_axis_x(xax_format="date") %>%
mjs_add_legend(legend=c("X", "Y", "Z"))
```
```{r eval=FALSE}
tagList(HTML("<table width='100%'><tr><td>"),
s1,
HTML("</td><td>"),
s2,
HTML("</td></tr></table>"))
```
```{r results='asis', echo=FALSE}
tagList(HTML("<table width='100%'><tr><td>"), s1, HTML("</td><td>"), s2, HTML("</td></tr></table>"))
```
```{r results='asis', echo=FALSE}
tagList(div(style="border-top:1px solid black; padding-top:10px; padding-bottom:20px; font-size:11px",
HTML("metricsgraphics R package by Bob Rudis<br/>"),
HTML("htmlwidgets R package by Ramnath Vaidyanathan, Kenton Russell<br/>"),
HTML("MetricsGraphics JavaScript library by Ali Almossawi, Hamilton Ulmer and the Metrics Team at Mozilla."))
)
```