Skip to content

Commit

Permalink
update
Browse files Browse the repository at this point in the history
  • Loading branch information
@jtleek
jtleek committed May 5, 2014
1 parent a681ecf commit b42c8b1
Show file tree
Hide file tree
Showing 4 changed files with 601 additions and 0 deletions.
39 changes: 39 additions & 0 deletions 09_DevelopingDataProducts/googleVis/index.Rmd
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,3 +14,42 @@ widgets : [mathjax] # {mathjax, quiz, bootstrap}
mode : selfcontained # {standalone, draft}
---

## Google Vis API

<img class="center" src="../../assets/img/googlecharts.png" height=500>

https://developers.google.com/chart/interactive/docs/gallery

```{r setOptions, echo=FALSE}
options(gvis.plot.tag="chart")
```

---

## Basic idea

* The R function creates an HTML page
* The HTML page calls Google Charts
* The result is an interactive HTML graphic

---

## Example

```{r,results="asis"}
library(googleVis)
plot(gvisMotionChart(Fruits, "Fruit", "Year",
options=list(width=600, height=400)))
```


---

## For more info

```{r,eval=FALSE}
demo(googleVis)
```

http://cran.r-project.org/web/packages/googleVis/vignettes/googleVis.pdf
https://developers.google.com/chart/interactive/docs/gallery
334 changes: 334 additions & 0 deletions 09_DevelopingDataProducts/googleVis/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,334 @@
<!DOCTYPE html>
<html>
<head>
<title>googleVis</title>
<meta charset="utf-8">
<meta name="description" content="googleVis">
<meta name="author" content="Brian Caffo, Jeff Leek, Roger Peng">
<meta name="generator" content="slidify" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<link rel="stylesheet" href="../../librariesNew/frameworks/io2012/css/default.css" media="all" >
<link rel="stylesheet" href="../../librariesNew/frameworks/io2012/css/phone.css"
media="only screen and (max-device-width: 480px)" >
<link rel="stylesheet" href="../../librariesNew/frameworks/io2012/css/slidify.css" >
<link rel="stylesheet" href="../../librariesNew/highlighters/highlight.js/css/tomorrow.css" />
<base target="_blank"> <!-- This amazingness opens all links in a new tab. -->

<!-- Grab CDN jQuery, fall back to local if offline -->
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.min.js"></script>
<script>window.jQuery || document.write('<script src="../../librariesNew/widgets/quiz/js/jquery.js"><\/script>')</script>
<script data-main="../../librariesNew/frameworks/io2012/js/slides"
src="../../librariesNew/frameworks/io2012/js/require-1.0.8.min.js">
</script>



</head>
<body style="opacity: 0">
<slides class="layout-widescreen">

<!-- LOGO SLIDE -->
<slide class="title-slide segue nobackground">
<aside class="gdbar">
<img src="../../assets/img/bloomberg_shield.png">
</aside>
<hgroup class="auto-fadein">
<h1>googleVis</h1>
<h2>Data Products</h2>
<p>Brian Caffo, Jeff Leek, Roger Peng<br/>Johns Hopkins Bloomberg School of Public Health</p>
</hgroup>
<article></article>
</slide>


<!-- SLIDES -->
<slide class="" id="slide-1" style="background:;">
<hgroup>
<h2>Google Vis API</h2>
</hgroup>
<article data-timings="">
<p><img class="center" src="../../assets/img/googlecharts.png" height=500></p>

<p><a href="https://developers.google.com/chart/interactive/docs/gallery">https://developers.google.com/chart/interactive/docs/gallery</a></p>

</article>
<!-- Presenter Notes -->
</slide>

<slide class="" id="slide-2" style="background:;">
<hgroup>
<h2>Basic idea</h2>
</hgroup>
<article data-timings="">
<ul>
<li>The R function creates an HTML page</li>
<li>The HTML page calls Google Charts</li>
<li>The result is an interactive HTML graphic</li>
</ul>

</article>
<!-- Presenter Notes -->
</slide>

<slide class="" id="slide-3" style="background:;">
<hgroup>
<h2>Example</h2>
</hgroup>
<article data-timings="">
<pre><code class="r">library(googleVis)
plot(gvisMotionChart(Fruits, &quot;Fruit&quot;, &quot;Year&quot;, options = list(width = 600, height = 400)))
</code></pre>

<!-- MotionChart generated in R 3.1.0 by googleVis 0.5.1 package -->

<!-- Sun May 4 23:28:41 2014 -->

<!-- jsHeader -->

<script type="text/javascript">

// jsData
function gvisDataMotionChartID9452f37c976 () {
var data = new google.visualization.DataTable();
var datajson =
[
[
"Apples",
2008,
"West",
98,
78,
20,
"2008-12-31"
],
[
"Apples",
2009,
"West",
111,
79,
32,
"2009-12-31"
],
[
"Apples",
2010,
"West",
89,
76,
13,
"2010-12-31"
],
[
"Oranges",
2008,
"East",
96,
81,
15,
"2008-12-31"
],
[
"Bananas",
2008,
"East",
85,
76,
9,
"2008-12-31"
],
[
"Oranges",
2009,
"East",
93,
80,
13,
"2009-12-31"
],
[
"Bananas",
2009,
"East",
94,
78,
16,
"2009-12-31"
],
[
"Oranges",
2010,
"East",
98,
91,
7,
"2010-12-31"
],
[
"Bananas",
2010,
"East",
81,
71,
10,
"2010-12-31"
]
];
data.addColumn('string','Fruit');
data.addColumn('number','Year');
data.addColumn('string','Location');
data.addColumn('number','Sales');
data.addColumn('number','Expenses');
data.addColumn('number','Profit');
data.addColumn('string','Date');
data.addRows(datajson);
return(data);
}

// jsDrawChart
function drawChartMotionChartID9452f37c976() {
var data = gvisDataMotionChartID9452f37c976();
var options = {};
options["width"] = 600;
options["height"] = 400;

var chart = new google.visualization.MotionChart(
document.getElementById('MotionChartID9452f37c976')
);
chart.draw(data,options);


}


// jsDisplayChart
(function() {
var pkgs = window.__gvisPackages = window.__gvisPackages || [];
var callbacks = window.__gvisCallbacks = window.__gvisCallbacks || [];
var chartid = "motionchart";

// Manually see if chartid is in pkgs (not all browsers support Array.indexOf)
var i, newPackage = true;
for (i = 0; newPackage && i < pkgs.length; i++) {
if (pkgs[i] === chartid)
newPackage = false;
}
if (newPackage)
pkgs.push(chartid);

// Add the drawChart function to the global list of callbacks
callbacks.push(drawChartMotionChartID9452f37c976);
})();
function displayChartMotionChartID9452f37c976() {
var pkgs = window.__gvisPackages = window.__gvisPackages || [];
var callbacks = window.__gvisCallbacks = window.__gvisCallbacks || [];
window.clearTimeout(window.__gvisLoad);
// The timeout is set to 100 because otherwise the container div we are
// targeting might not be part of the document yet
window.__gvisLoad = setTimeout(function() {
var pkgCount = pkgs.length;
google.load("visualization", "1", { packages:pkgs, callback: function() {
if (pkgCount != pkgs.length) {
// Race condition where another setTimeout call snuck in after us; if
// that call added a package, we must not shift its callback
return;
}
while (callbacks.length > 0)
callbacks.shift()();
} });
}, 100);
}

// jsFooter
</script>


<!-- jsChart -->

<script type="text/javascript" src="https://www.google.com/jsapi?callback=displayChartMotionChartID9452f37c976"></script>


<!-- divChart -->

<div id="MotionChartID9452f37c976"
style="width: 600px; height: 400px;">
</div>

</article>
<!-- Presenter Notes -->
</slide>

<slide class="" id="slide-4" style="background:;">
<hgroup>
<h2>For more info</h2>
</hgroup>
<article data-timings="">
<pre><code class="r">demo(googleVis)
</code></pre>

<p><a href="http://cran.r-project.org/web/packages/googleVis/vignettes/googleVis.pdf">http://cran.r-project.org/web/packages/googleVis/vignettes/googleVis.pdf</a>
<a href="https://developers.google.com/chart/interactive/docs/gallery">https://developers.google.com/chart/interactive/docs/gallery</a></p>

</article>
<!-- Presenter Notes -->
</slide>

<slide class="backdrop"></slide>
</slides>
<div class="pagination pagination-small" id='io2012-ptoc' style="display:none;">
<ul>
<li>
<a href="#" target="_self" rel='tooltip'
data-slide=1 title='Google Vis API'>
1
</a>
</li>
<li>
<a href="#" target="_self" rel='tooltip'
data-slide=2 title='Basic idea'>
2
</a>
</li>
<li>
<a href="#" target="_self" rel='tooltip'
data-slide=3 title='Example'>
3
</a>
</li>
<li>
<a href="#" target="_self" rel='tooltip'
data-slide=4 title='For more info'>
4
</a>
</li>
</ul>
</div> <!--[if IE]>
<script
src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js">
</script>
<script>CFInstall.check({mode: 'overlay'});</script>
<![endif]-->
</body>
<!-- Load Javascripts for Widgets -->

<!-- MathJax: Fall back to local if CDN offline but local image fonts are not supported (saves >100MB) -->
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
tex2jax: {
inlineMath: [['$','$'], ['\\(','\\)']],
processEscapes: true
}
});
</script>
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/2.0-latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<!-- <script src="https://c328740.ssl.cf1.rackcdn.com/mathjax/2.0-latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script> -->
<script>window.MathJax || document.write('<script type="text/x-mathjax-config">MathJax.Hub.Config({"HTML-CSS":{imageFont:null}});<\/script><script src="../../librariesNew/widgets/mathjax/MathJax.js?config=TeX-AMS-MML_HTMLorMML"><\/script>')
</script>
<!-- LOAD HIGHLIGHTER JS FILES -->
<script src="../../librariesNew/highlighters/highlight.js/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<!-- DONE LOADING HIGHLIGHTER JS FILES -->

</html>
Loading

0 comments on commit b42c8b1

Please sign in to comment.