Merge pull request #88 from RhoInc/example-refactor

Example refactor
RhoInc · Mar 15, 2018 · c13fe89 · c13fe89
2 parents 7783f26 + 7d78a9d
commit c13fe89
Show file tree

Hide file tree

Showing 145 changed files with 6,375 additions and 3,344 deletions.
diff --git a/.gitignore b/.gitignore
@@ -4,5 +4,6 @@
 *.RData
 *.Ruserdata
 *.svn
+*.DS_Store
 node_modules
 local
diff --git a/examples/0001-density-lattice/README.md b/examples/0001-density-lattice/README.md
diff --git a/examples/0001-density-lattice/index.html b/examples/0001-density-lattice/index.html
@@ -1,52 +1,39 @@
 <html lang="en"><head>
-  <title>Density Plot</title>
+  <title></title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <link rel="stylesheet" href="../../util/web/css/examples.css">
-    <script src="https://d3js.org/d3.v3.min.js"></script>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/default.min.css">
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script>
-  <script>
-    hljs.initHighlightingOnLoad();
-  </script>
 </head>
+<body><div class="head">
+  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
+  <link rel="stylesheet" href="../../util/web/css/examples.css">
+  <ul class="vl-ex-header">
+      <li class="icon"><a href="../../"><img src="../../util/web/img/rho.png"></a></li>
+      <li class="site crumb"><a href="../../"><span>Graphics</span></a></li>
+      <li class="crumb">Example</li>
+      <li class="title">Density Plot with Lattice</li>
+      <li class="info" title="Click to toggle chart details" onclick="toggleDetails()">ⓘ</li>
+      <li class="arrow next-arrow right"><a href="../0002-dotplot-ggplot"></a></li>
+      <li class="arrow back-arrow right disabled"><a href=""></a></li>
+  </ul>
+  <div id="vl-ex-details" style="display:none;">
+    <p class="vl-ex-description"><b>Density Plot with Lattice</b> - Customized density plot created using lattice combining paneling, grouping, custom annotations and some simple data manipulation.</p>
 
-<body>
-	<div class="viz-example-header section">
-    <span class="home">
-      <a href="../../">🏠</a>
-    </span>
-    <span class="close">✖</span>
-    <h1>Density Plot</h1>
-	  <ul class="tags"><li><span class="label" style="font-size: 0.7em; color: rgb(170, 170, 170);" padding-right="0.2em">Languages&nbsp;</span><span>R</span></li><li><span class="label" style="font-size: 0.7em; color: rgb(170, 170, 170);" padding-right="0.2em">Libraries&nbsp;</span><span>lattice</span></li><li><span class="label" style="font-size: 0.7em; color: rgb(170, 170, 170);" padding-right="0.2em">Tags&nbsp;</span><span>density plot, lattice, r, groups, means, annotated, faceted</span></li><li><span class="label" style="font-size: 0.7em; color: rgb(170, 170, 170);" padding-right="0.2em">Data&nbsp;</span><span><a href="../../data/ChickWeight.csv">../../data/ChickWeight.csv</a></span></li><li><span class="label" style="font-size: 0.7em; color: rgb(170, 170, 170);" padding-right="0.2em">Results&nbsp;</span><span><a href="0001-density-lattice.png">0001-density-lattice.png</a></span></li><li><span class="label" style="font-size: 0.7em; color: rgb(170, 170, 170);" padding-right="0.2em">Code&nbsp;</span><span><a href="0001-density-lattice.R">0001-density-lattice.R</a></span></li></ul>
-    <div class="description">Customized density plot created using lattice combining paneling, grouping, custom annotations and some simple data manipulation.<a class="expandDetails">View README.md.</a></div>
+    <ul class="vl-ex-tags"><li class="vl-ex-data"><a href="../../data/ChickWeight.csv"></a></li><li class="vl-ex-code"><a href="0001-density-lattice.R"></a></li><li class="rdep"><a href="https://cran.r-project.org/web/packages/dplyr">dplyr</a></li><li class="rdep"><a href="https://cran.r-project.org/web/packages/tidyr">tidyr</a></li><li class="rdep"><a href="https://cran.r-project.org/web/packages/lattice">lattice</a></li><li class="rdep"><a href="https://cran.r-project.org/web/packages/latticeExtra">latticeExtra</a></li><li class="rdep"><a href="https://cran.r-project.org/web/packages/ggplot2">ggplot2</a></li><li class="rdep"><a href="https://cran.r-project.org/web/packages/datasets">datasets</a></li><li class="tag">density plot</li><li class="tag">lattice</li><li class="tag">r</li><li class="tag">groups</li><li class="tag">means</li><li class="tag">annotated</li><li class="tag">faceted</li></ul>
   </div>
-  <div class="viz-example-body">
-    <div class="viz-example-details section hidden">
-      <div class="wrap">
-        <span class="close">✖</span>
-        <h2>Readme.md</h2>
-        <div class="detail-content"><p><em>B Krouse, 2017-01-20</em></p></div>
-      </div>
-    </div>
-	  <div class="viz-example-chart section"><div class="exampleImg"><img src="0001-density-lattice.png" width="960"></div></div>
-  </div>
-
-<script defer="">
-
-  /*show/hide events*/
-  d3.select(".viz-example-header .close").on("click",function(){
-    d3.select(".viz-example-header").classed("hidden",true)
-    d3.select(".viz-example-details").classed("hidden",true)
-    d3.select(".viz-example-body").style("height","100%")
-  })
+  <script>
+    function toggleDetails(){
+      var details = document.getElementById("vl-ex-details");
+      if (details.style.display === "none") {
+          details.style.display = "block";
+      } else {
+          details.style.display = "none";
+        }
+    }
+  </script>
+</div>
 
-  d3.select(".viz-example-details .close").on("click",function(){
-    d3.select(".viz-example-details").classed("hidden",true)
-  })
+  <div class="example">
+    <img width="960" src="0001-density-lattice.png">
+  </div>
 
-  d3.select(".expandDetails").on("click",function(){
-    d3.select(".viz-example-details").classed("hidden",false)
-  })
-</script>
 
 </body></html>
diff --git a/examples/0001-density-lattice/package.json b/examples/0001-density-lattice/package.json
@@ -0,0 +1,20 @@
+{
+  "homepage":"0001-density-lattice.png",
+  "main": "0001-density-lattice.R",
+  "name": "density-plot",
+  "label":"Density Plot with Lattice",
+  "version": "1.0.0",
+  "description": "Customized density plot created using lattice combining paneling, grouping, custom annotations and some simple data manipulation.",
+  "author": "Rho, Inc.",
+  "license": "MIT",
+  "keywords":["density plot", "lattice", "r", "groups", "means","annotated", "faceted"],
+  "rDependencies": {
+    "dplyr":null,
+    "tidyr":null,
+    "lattice":null,
+    "latticeExtra":null,
+    "ggplot2":null,
+    "datasets":null
+  },
+  "dataDependecies":["../../data/ChickWeight.csv"]
+}
diff --git a/examples/0002-dotplot-ggplot/README.md b/examples/0002-dotplot-ggplot/README.md
diff --git a/examples/0002-dotplot-ggplot/index.html b/examples/0002-dotplot-ggplot/index.html
@@ -1,52 +1,39 @@
 <html lang="en"><head>
-  <title>Stacked Dot Plot #1</title>
+  <title></title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <link rel="stylesheet" href="../../util/web/css/examples.css">
-    <script src="https://d3js.org/d3.v3.min.js"></script>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/default.min.css">
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script>
-  <script>
-    hljs.initHighlightingOnLoad();
-  </script>
 </head>
+<body><div class="head">
+  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
+  <link rel="stylesheet" href="../../util/web/css/examples.css">
+  <ul class="vl-ex-header">
+      <li class="icon"><a href="../../"><img src="../../util/web/img/rho.png"></a></li>
+      <li class="site crumb"><a href="../../"><span>Graphics</span></a></li>
+      <li class="crumb">Example</li>
+      <li class="title">Stacked Dot Plot (ggplot)</li>
+      <li class="info" title="Click to toggle chart details" onclick="toggleDetails()">ⓘ</li>
+      <li class="arrow next-arrow right"><a href="../0003-dotplot-lattice"></a></li>
+      <li class="arrow back-arrow right"><a href="../0001-density-lattice"></a></li>
+  </ul>
+  <div id="vl-ex-details" style="display:none;">
+    <p class="vl-ex-description"><b>Stacked Dot Plot (ggplot)</b> - Stacked dot plot created using ggplot2 combining paneling, custom annotations and some simple data manipulation.</p>
 
-<body>
-	<div class="viz-example-header section">
-    <span class="home">
-      <a href="../../">🏠</a>
-    </span>
-    <span class="close">✖</span>
-    <h1>Stacked Dot Plot #1</h1>
-	  <ul class="tags"><li><span class="label" style="font-size: 0.7em; color: rgb(170, 170, 170);" padding-right="0.2em">Languages&nbsp;</span><span>R</span></li><li><span class="label" style="font-size: 0.7em; color: rgb(170, 170, 170);" padding-right="0.2em">Libraries&nbsp;</span><span>ggplot2</span></li><li><span class="label" style="font-size: 0.7em; color: rgb(170, 170, 170);" padding-right="0.2em">Tags&nbsp;</span><span>dotplot, r, ggplot2, facet, median, highlight, stack points, discrete</span></li><li><span class="label" style="font-size: 0.7em; color: rgb(170, 170, 170);" padding-right="0.2em">Data&nbsp;</span><span><a href="../../data/discrete_scores.csv">../../data/discrete_scores.csv</a></span></li><li><span class="label" style="font-size: 0.7em; color: rgb(170, 170, 170);" padding-right="0.2em">Results&nbsp;</span><span><a href="0002-dotplot-ggplot.png">0002-dotplot-ggplot.png</a></span></li><li><span class="label" style="font-size: 0.7em; color: rgb(170, 170, 170);" padding-right="0.2em">Code&nbsp;</span><span><a href="0002-dotplot-ggplot.R">0002-dotplot-ggplot.R</a></span></li></ul>
-    <div class="description">Stacked dot plot created using ggplot2 combining paneling, custom annotations and some simple data manipulation.<a class="expandDetails">View README.md.</a></div>
+    <ul class="vl-ex-tags"><li class="vl-ex-data"><a href="../../data/discrete_scores.csv"></a></li><li class="vl-ex-code"><a href="0002-dotplot-ggplot.R"></a></li><li class="rdep"><a href="https://cran.r-project.org/web/packages/dplyr">dplyr</a></li><li class="rdep"><a href="https://cran.r-project.org/web/packages/tidyr">tidyr</a></li><li class="rdep"><a href="https://cran.r-project.org/web/packages/ggplot2">ggplot2</a></li><li class="tag">dotplot</li><li class="tag">R</li><li class="tag">ggplot2</li><li class="tag">facet</li><li class="tag">median</li><li class="tag">highlight</li><li class="tag">stacked points</li><li class="tag">discrete</li></ul>
   </div>
-  <div class="viz-example-body">
-    <div class="viz-example-details section hidden">
-      <div class="wrap">
-        <span class="close">✖</span>
-        <h2>Readme.md</h2>
-        <div class="detail-content"><p><em>B Krouse, 2017-01-20</em></p></div>
-      </div>
-    </div>
-	  <div class="viz-example-chart section"><div class="exampleImg"><img src="0002-dotplot-ggplot.png" width="960"></div></div>
-  </div>
-
-<script defer="">
-
-  /*show/hide events*/
-  d3.select(".viz-example-header .close").on("click",function(){
-    d3.select(".viz-example-header").classed("hidden",true)
-    d3.select(".viz-example-details").classed("hidden",true)
-    d3.select(".viz-example-body").style("height","100%")
-  })
+  <script>
+    function toggleDetails(){
+      var details = document.getElementById("vl-ex-details");
+      if (details.style.display === "none") {
+          details.style.display = "block";
+      } else {
+          details.style.display = "none";
+        }
+    }
+  </script>
+</div>
 
-  d3.select(".viz-example-details .close").on("click",function(){
-    d3.select(".viz-example-details").classed("hidden",true)
-  })
+  <div class="example">
+    <img width="960" src="0002-dotplot-ggplot.png">
+  </div>
 
-  d3.select(".expandDetails").on("click",function(){
-    d3.select(".viz-example-details").classed("hidden",false)
-  })
-</script>
 
 </body></html>
diff --git a/examples/0002-dotplot-ggplot/package.json b/examples/0002-dotplot-ggplot/package.json
@@ -0,0 +1,17 @@
+{
+  "homepage":"0002-dotplot-ggplot.png",
+  "main": "0002-dotplot-ggplot.R",
+  "name": "dotplot-ggplot",
+  "label":"Stacked Dot Plot (ggplot)",
+  "version": "1.0.0",
+  "description": "Stacked dot plot created using ggplot2 combining paneling, custom annotations and some simple data manipulation.",
+  "author": "Rho, Inc.",
+  "license": "MIT",
+  "keywords":["dotplot", "R", "ggplot2", "facet", "median", "highlight", "stacked points", "discrete"],
+  "rDependencies": {
+    "dplyr":null,
+    "tidyr":null,
+    "ggplot2":null
+  },
+  "dataDependecies":["../../data/discrete_scores.csv"]
+}
diff --git a/examples/0003-dotplot-lattice/README.md b/examples/0003-dotplot-lattice/README.md
diff --git a/examples/0003-dotplot-lattice/index.html b/examples/0003-dotplot-lattice/index.html
@@ -1,52 +1,39 @@
 <html lang="en"><head>
-  <title>Stacked Dot Plot #2</title>
+  <title></title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-    <link rel="stylesheet" href="../../util/web/css/examples.css">
-    <script src="https://d3js.org/d3.v3.min.js"></script>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/styles/default.min.css">
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.9.0/highlight.min.js"></script>
-  <script>
-    hljs.initHighlightingOnLoad();
-  </script>
 </head>
+<body><div class="head">
+  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
+  <link rel="stylesheet" href="../../util/web/css/examples.css">
+  <ul class="vl-ex-header">
+      <li class="icon"><a href="../../"><img src="../../util/web/img/rho.png"></a></li>
+      <li class="site crumb"><a href="../../"><span>Graphics</span></a></li>
+      <li class="crumb">Example</li>
+      <li class="title">Stacked Dot Plot (lattice)</li>
+      <li class="info" title="Click to toggle chart details" onclick="toggleDetails()">ⓘ</li>
+      <li class="arrow next-arrow right"><a href="../0004-pirateplot-yarrr"></a></li>
+      <li class="arrow back-arrow right"><a href="../0002-dotplot-ggplot"></a></li>
+  </ul>
+  <div id="vl-ex-details" style="display:none;">
+    <p class="vl-ex-description"><b>Stacked Dot Plot (lattice)</b> - Stacked dot plot created using lattice combining paneling, custom annotations and some simple data manipulation.</p>
 
-<body>
-	<div class="viz-example-header section">
-    <span class="home">
-      <a href="../../">🏠</a>
-    </span>
-    <span class="close">✖</span>
-    <h1>Stacked Dot Plot #2</h1>
-	  <ul class="tags"><li><span class="label" style="font-size: 0.7em; color: rgb(170, 170, 170);" padding-right="0.2em">Languages&nbsp;</span><span>R</span></li><li><span class="label" style="font-size: 0.7em; color: rgb(170, 170, 170);" padding-right="0.2em">Libraries&nbsp;</span><span>lattice</span></li><li><span class="label" style="font-size: 0.7em; color: rgb(170, 170, 170);" padding-right="0.2em">Tags&nbsp;</span><span>dotplot, r, lattice, facet, median, highlight, stack points, discrete</span></li><li><span class="label" style="font-size: 0.7em; color: rgb(170, 170, 170);" padding-right="0.2em">Data&nbsp;</span><span><a href="../../data/discrete_scores.csv">../../data/discrete_scores.csv</a></span></li><li><span class="label" style="font-size: 0.7em; color: rgb(170, 170, 170);" padding-right="0.2em">Results&nbsp;</span><span><a href="0003-dotplot-lattice.png">0003-dotplot-lattice.png</a></span></li><li><span class="label" style="font-size: 0.7em; color: rgb(170, 170, 170);" padding-right="0.2em">Code&nbsp;</span><span><a href="0003-dotplot-lattice.R">0003-dotplot-lattice.R</a></span></li></ul>
-    <div class="description">Stacked dot plot created using ggplot2 combining paneling, custom annotations and simple data manipulation. Similar to &lt;a href="../0002-dotplot-lattice"&gt;this example&lt;/a&gt; made with lattice.<a class="expandDetails">View README.md.</a></div>
+    <ul class="vl-ex-tags"><li class="vl-ex-data"><a href="../../data/discrete_scores.csv"></a></li><li class="vl-ex-code"><a href="0003-dotplot-lattice.R"></a></li><li class="rdep"><a href="https://cran.r-project.org/web/packages/dplyr">dplyr</a></li><li class="rdep"><a href="https://cran.r-project.org/web/packages/tidyr">tidyr</a></li><li class="rdep"><a href="https://cran.r-project.org/web/packages/ggplot2">ggplot2</a></li><li class="tag">dotplot</li><li class="tag">R</li><li class="tag">lattice</li><li class="tag">facet</li><li class="tag">median</li><li class="tag">highlight</li><li class="tag">stacked points</li><li class="tag">discrete</li></ul>
   </div>
-  <div class="viz-example-body">
-    <div class="viz-example-details section hidden">
-      <div class="wrap">
-        <span class="close">✖</span>
-        <h2>Readme.md</h2>
-        <div class="detail-content"><p><em>B Krouse, 2017-01-20</em></p></div>
-      </div>
-    </div>
-	  <div class="viz-example-chart section"><div class="exampleImg"><img src="0003-dotplot-lattice.png" width="960"></div></div>
-  </div>
-
-<script defer="">
-
-  /*show/hide events*/
-  d3.select(".viz-example-header .close").on("click",function(){
-    d3.select(".viz-example-header").classed("hidden",true)
-    d3.select(".viz-example-details").classed("hidden",true)
-    d3.select(".viz-example-body").style("height","100%")
-  })
+  <script>
+    function toggleDetails(){
+      var details = document.getElementById("vl-ex-details");
+      if (details.style.display === "none") {
+          details.style.display = "block";
+      } else {
+          details.style.display = "none";
+        }
+    }
+  </script>
+</div>
 
-  d3.select(".viz-example-details .close").on("click",function(){
-    d3.select(".viz-example-details").classed("hidden",true)
-  })
+  <div class="example">
+    <img width="960" src="0003-dotplot-lattice.png">
+  </div>
 
-  d3.select(".expandDetails").on("click",function(){
-    d3.select(".viz-example-details").classed("hidden",false)
-  })
-</script>
 
 </body></html>
diff --git a/examples/0003-dotplot-lattice/package.json b/examples/0003-dotplot-lattice/package.json
@@ -0,0 +1,17 @@
+{
+  "homepage":"0003-dotplot-lattice.png",
+  "main": "0003-dotplot-lattice.R",
+  "name": "dotplot-lattice",
+  "label":"Stacked Dot Plot (lattice)",
+  "version": "1.0.0",
+  "description": "Stacked dot plot created using lattice combining paneling, custom annotations and some simple data manipulation.",
+  "author": "Rho, Inc.",
+  "license": "MIT",
+  "keywords":["dotplot", "R", "lattice", "facet", "median", "highlight", "stacked points", "discrete"],
+  "rDependencies": {
+    "dplyr":null,
+    "tidyr":null,
+    "ggplot2":null
+  },
+  "dataDependecies":["../../data/discrete_scores.csv"]
+}
diff --git a/examples/0004-pirateplot-yarrr/0004-pirateplot-yarrr_tags.txt b/examples/0004-pirateplot-yarrr/0004-pirateplot-yarrr_tags.txt
diff --git a/examples/0004-pirateplot-yarrr/README.md b/examples/0004-pirateplot-yarrr/README.md
@@ -14,9 +14,7 @@
 
 **Results:** 0004-pirateplot-yarrr.png
 
-[comment]: <> (---END OF HEADER---)
-
-*Agustin Calatroni, October 11, 2016* 
+*Agustin Calatroni, October 11, 2016*
 
 ### What is a pirateplot()?