Skip to content
This repository has been archived by the owner on Nov 17, 2021. It is now read-only.

Commit

Permalink
fix(Examples): Update Simple example with new component tag names
Browse files Browse the repository at this point in the history
  • Loading branch information
@alex-ketch
alex-ketch committed Oct 8, 2019
1 parent dccb8dc commit e1b738e
Show file tree
Hide file tree
Showing 2 changed files with 150 additions and 76 deletions.
212 changes: 143 additions & 69 deletions src/examples/article-rmarkdown.html
View file
Original file line number Diff line number Diff line change
@@ -1,116 +1,190 @@
<html>

<head>
<title>Writing reproducible articles with R Markdown and Stencila</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://unpkg.com/@stencila/[email protected]/dist/themes/stencila/styles.css"
rel="stylesheet">
<script src="https://unpkg.com/@stencila/[email protected]/dist/themes/stencila/index.js"
type="text/javascript"></script>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link
href="https://unpkg.com/@stencila/[email protected]/dist/themes/stencila/styles.css"
rel="stylesheet"
/>
<script
src="https://unpkg.com/@stencila/[email protected]/dist/themes/stencila/index.js"
type="text/javascript"
></script>
<script
src="https://unpkg.com/@stencila/components@&lt;=1/dist/stencila-components/stencila-components.esm.js"
type="module"></script>
type="module"
></script>
<script
src="https://unpkg.com/@stencila/components@&lt;=1/dist/stencila-components/stencila-components.js"
type="text/javascript"></script>
type="text/javascript"
></script>
</head>

<body>
<article itemtype="https://schema.org/Article" itemscope="true">
<h1 itemprop="headline">Writing reproducible articles with R Markdown and Stencila</h1>
<h1 itemprop="headline">
Writing reproducible articles with R Markdown and Stencila
</h1>
<div>
<ol class="authors">
<li itemtype="https://schema.org/Person" itemscope="true" itemprop="author"><span
itemprop="name" content="Nokome Bentley"><span itemprop="givenName">Nokome</span><span
itemprop="familyName">Bentley</span></span></li>
<li
itemtype="https://schema.org/Person"
itemscope="true"
itemprop="author"
>
<span itemprop="name" content="Nokome Bentley"
><span itemprop="givenName">Nokome</span
><span itemprop="familyName">Bentley</span></span
>
</li>
</ol>
</div>
<section>
<h2>Abstract</h2>
<div itemprop="description">R Markdown is a popular format for reproducible research. This
article provides a guide to how to write, and collaborate on, a reproducible research
article using R Markdown and Stencila. As well as describing the basics of embedding R
code in your article, it covers how to include meta-data (such as author names and
affiliations), citations and references. Finally, we discuss how you can preview your
article and convert it to other formats using Stencila. </div>
<div itemprop="description">
R Markdown is a popular format for reproducible research. This article
provides a guide to how to write, and collaborate on, a reproducible
research article using R Markdown and Stencila. As well as describing
the basics of embedding R code in your article, it covers how to
include meta-data (such as author names and affiliations), citations
and references. Finally, we discuss how you can preview your article
and convert it to other formats using Stencila.
</div>
</section>
<h1 id="preface">Preface</h1>
<p>This is part of a series of “self-documenting” example articles, each written in a
particular format, describing how to author reproducibles in that format. The canonical
source for this article is <a
href="https://github.com/stencila/examples/tree/master/rmarkdown/rmarkdown.Rmd"><code>rmarkdown.Rmd</code></a>
on Github where there is also a rendered version as a R Notebook, <a
href="https://github.com/stencila/examples/tree/master/rmarkdown/rmarkdown.nb.html"><code>rmarkdown.nb.html</code></a>.
If you are not already, you can open this R Notebook on Stencila using <a
href="https://hub.stenci.la/open/https://github.com/stencila/examples/tree/master/rmarkdown/rmarkdown.nb.html">this
link</a>.</p>
<p>
This is part of a series of “self-documenting” example articles, each
written in a particular format, describing how to author reproducibles
in that format. The canonical source for this article is
<a
href="https://github.com/stencila/examples/tree/master/rmarkdown/rmarkdown.Rmd"
><code>rmarkdown.Rmd</code></a
>
on Github where there is also a rendered version as a R Notebook,
<a
href="https://github.com/stencila/examples/tree/master/rmarkdown/rmarkdown.nb.html"
><code>rmarkdown.nb.html</code></a
>. If you are not already, you can open this R Notebook on Stencila
using
<a
href="https://hub.stenci.la/open/https://github.com/stencila/examples/tree/master/rmarkdown/rmarkdown.nb.html"
>this link</a
>.
</p>
<p>Other articles in this series for other formats / sites:</p>
<ul>
<li><a
href="https://hub.stenci.la/open/https://github.com/stencila/examples/tree/master/jupyter/jupyter.ipynb">Jupyter
Notebooks</a></li>
<li><a
href="https://hub.stenci.la/open/https://docs.google.com/document/d/1BW6MubIyDirCGW9Wq-tSqCma8pioxBI6VpeLyXn5mZA">Google
Docs</a></li>
<li><a href="https://hub.stenci.la/open/https://hackmd.io/RaFYCFoyTlODFxz5hPevLw">HackMD</a>
<li>
<a
href="https://hub.stenci.la/open/https://github.com/stencila/examples/tree/master/jupyter/jupyter.ipynb"
>Jupyter Notebooks</a
>
</li>
<li>
<a
href="https://hub.stenci.la/open/https://docs.google.com/document/d/1BW6MubIyDirCGW9Wq-tSqCma8pioxBI6VpeLyXn5mZA"
>Google Docs</a
>
</li>
<li>
<a
href="https://hub.stenci.la/open/https://hackmd.io/RaFYCFoyTlODFxz5hPevLw"
>HackMD</a
>
</li>
</ul>
<p>Please note that this example is a work in progress.</p>
<h1 id="introduction">Introduction</h1>
<p><a href="https://rmarkdown.rstudio.com/">R Markdown</a> is a popular format for writing
reprodubile documents. <a
href="https://daringfireball.net/projects/markdown/syntax">Markdown</a> is a simple text
format, which, in the words of it’s creator, is “intended to be as easy-to-read and
easy-to-write as is feasible”. R Markdown extends Markdown with some custom syntax for
embedding executable R code.</p>
<p>There are many resources available for how to use R Markdown for reproducible research,
inlcuding:</p>
<p>
<a href="https://rmarkdown.rstudio.com/">R Markdown</a> is a popular
format for writing reprodubile documents.
<a href="https://daringfireball.net/projects/markdown/syntax"
>Markdown</a
>
is a simple text format, which, in the words of it’s creator, is
“intended to be as easy-to-read and easy-to-write as is feasible”. R
Markdown extends Markdown with some custom syntax for embedding
executable R code.
</p>
<p>
There are many resources available for how to use R Markdown for
reproducible research, inlcuding:
</p>
<ul>
<li>
<p>Chris Hartgerink (2017) <em>Composing reproducible manuscripts using R Markdown</em> <a
href="https://elifesciences.org/labs/cad57bcf/composing-reproducible-manuscripts-using-r-markdown">https://elifesciences.org/labs/cad57bcf/composing-reproducible-manuscripts-using-r-markdown</a>
<p>
Chris Hartgerink (2017)
<em>Composing reproducible manuscripts using R Markdown</em>
<a
href="https://elifesciences.org/labs/cad57bcf/composing-reproducible-manuscripts-using-r-markdown"
>https://elifesciences.org/labs/cad57bcf/composing-reproducible-manuscripts-using-r-markdown</a
>
</p>
</li>
<li>
<p>Daniel Nüst, Vicky Steeves, Rémi Rampin, Markus Konkol, Edzer Pebesma (2018)<em>Writing
reprocible geoscience papers using R Markdown, Docker, and GitLab</em> <a
href="https://vickysteeves.gitlab.io/repro-papers/index.html">https://vickysteeves.gitlab.io/repro-papers/index.html</a>
<p>
Daniel Nüst, Vicky Steeves, Rémi Rampin, Markus Konkol, Edzer
Pebesma (2018)<em
>Writing reprocible geoscience papers using R Markdown, Docker,
and GitLab</em
>
<a href="https://vickysteeves.gitlab.io/repro-papers/index.html"
>https://vickysteeves.gitlab.io/repro-papers/index.html</a
>
</p>
</li>
<li>
<p>Paul Bauer (2018) <em>Writing a Reproducible Paper in R Markdown</em> <a
href="https://papers.ssrn.com/sol3/papers.cfm?abstract_id=3175518">https://papers.ssrn.com/sol3/papers.cfm?abstract_id=3175518</a>
<p>
Paul Bauer (2018)
<em>Writing a Reproducible Paper in R Markdown</em>
<a
href="https://papers.ssrn.com/sol3/papers.cfm?abstract_id=3175518"
>https://papers.ssrn.com/sol3/papers.cfm?abstract_id=3175518</a
>
</p>
</li>
</ul>
<h1 id="code-chunks">Code chunks</h1>
<p>At the heart of R Markdown are “code chunks”. Code chunks can produce outputs, or they can
be used to execute arbitrary R code. For example, here we assign a variable called
<code>randoms</code> which will be an array of 1000 random numbers sampled from a normal
distribution:</p>
<p>
At the heart of R Markdown are “code chunks”. Code chunks can produce
outputs, or they can be used to execute arbitrary R code. For example,
here we assign a variable called <code>randoms</code> which will be an
array of 1000 random numbers sampled from a normal distribution:
</p>
<stencila-code-chunk>
<pre slot="text"><code class="language-r">randoms &lt;- rnorm(1000)
</code></pre>
</stencila-code-chunk>
<p>When you assign a variable in a code chunk you can reuse it in another chunk, later in the
document. For example, we can plot the frequency distribution of the random numbers we
assigned to the <code>randoms</code> variable earlier:</p>
<p>
When you assign a variable in a code chunk you can reuse it in another
chunk, later in the document. For example, we can plot the frequency
distribution of the random numbers we assigned to the
<code>randoms</code> variable earlier:
</p>
<stencila-code-chunk>
<pre slot="text"><code class="language-r">hist(randoms, breaks=30, col=&quot;grey&quot;, main=&quot;&quot;)
<pre
slot="text"
><code class="language-r">hist(randoms, breaks=30, col=&quot;grey&quot;, main=&quot;&quot;)
</code></pre>
<figure slot="outputs"><img src="article-rmarkdown.html.media/0" itemprop="image"></figure>
<figure slot="outputs">
<img src="article-rmarkdown.html.media/0" itemprop="image" />
</figure>
</stencila-code-chunk>
<h1 id="inline-code-chunks">Inline code chunks</h1>
<p>In R Markdown you can also inline “inline” code chunks within paragraphs and other text
content. For example, here is the mean of the <code>randoms</code> variable that we assigned
earlier: <stencila-code-expression programming-language="r"><code class="r"
slot="text">mean(randoms)</code><output slot="output">6.077451710^{-4}</output>
</stencila-code-expression>. In Stencila, we call these <code>CodeExpression</code>s,
because they are intended to display a calculated value, and shouldn’t be used for
statements, such as assigning a variable.</p>
<p>
In R Markdown you can also inline “inline” code chunks within paragraphs
and other text content. For example, here is the mean of the
<code>randoms</code> variable that we assigned earlier:
<stencila-code-expression programming-language="r"
><code class="r" slot="text">mean(randoms)</code
><output slot="output"
>6.077451710^{-4}</output
> </stencila-code-expression
>. In Stencila, we call these <code>CodeExpression</code>s, because they
are intended to display a calculated value, and shouldn’t be used for
statements, such as assigning a variable.
</p>
</article>
</body>

</html>
</html>
14 changes: 7 additions & 7 deletions src/examples/simple.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,13 +29,13 @@ <h4>Title 4</h4>
<h5>Title 5</h5>
<h6>Title 6</h6>

<stencila-codechunk data-collapsed="false" data-execution_count="4">
<pre slot="code"><code class="lang-python">import time
<stencila-code-chunk data-collapsed="false" data-execution_count="4">
<pre slot="text"><code class="lang-python">import time
time.sleep(10)</code></pre>
<figure slot="outputs">
<img src="https://via.placeholder.com/350x500" />
</figure>
</stencila-codechunk>
</stencila-code-chunk>

<ul>
<li>Item number 1</li>
Expand All @@ -56,15 +56,15 @@ <h6>Title 6</h6>
<li>Item number 8</li>
</ul>

<stencila-codechunk data-collapsed="false" data-execution_count="4">
<pre slot="code"><code class="lang-python">import time
<stencila-code-chunk data-collapsed="false" data-execution_count="4">
<pre slot="text"><code class="lang-python">import time
time.sleep(10)</code></pre>
<figure slot="outputs">
<img src="https://via.placeholder.com/350x500" />
</figure>
</stencila-codechunk>
</stencila-code-chunk>

<pre slot="code"><code>import time
<pre slot="text"><code>import time
time.sleep(10)</code></pre>
</body>
</html>

0 comments on commit e1b738e

Please sign in to comment.