Prototypo of Javascript to create figures

layout: page

title: Figures

---

{% include all_figures.html %}

<script>

  window.onload = function() {

    var lesson_episodes = [

    {% for episode in site.episodes %}

    "{{ episode.url}}"{% unless forloop.last %},{% endunless %}

    {% endfor %}

    ];

    var xmlHttp = [];  /* Required since we are going to query every episode. */

    for (i=0; i < lesson_episodes.length; i++) {

      xmlHttp[i] = new XMLHttpRequest();

      xmlHttp[i].episode = lesson_episodes[i];  /* To enable use this later. */

      xmlHttp[i].onreadystatechange = function() {

        if (this.readyState == 4 && this.status == 200) {

          var article_here = document.getElementById(this.episode);

          var parser = new DOMParser();

          var htmlDoc = parser.parseFromString(this.responseText,"text/html");

          var htmlDocArticle = htmlDoc.getElementsByTagName("article")[0];

          article_here.appendChild(htmlDocArticle.getElementsByTagName("h1")[0]);

          for (let image of htmlDocArticle.getElementsByTagName("img")) {

            article_here.appendChild(image);

          }

        }

      }

      episode_url = "{{ page.root }}" + lesson_episodes[i];

      xmlHttp[i].open("GET", episode_url);

      xmlHttp[i].send(null);

    }

  }

</script>

{% comment %}

Create anchor for each one of the episodes.

{% endcomment %}

{% for episode in site.episodes %}

<article id="{{ episode.url }}"></article>

{% endfor %}

<p><img alt="" src="{{ page.root }}/fig/using-github-import.png" /></p>

<hr/>

<p><img alt="Forking Repositories" src="{{ page.root }}/fig/forking.svg" /></p>

<hr/>

<p><img alt="Repository Links" src="{{ page.root }}/fig/repository-links.svg" /></p>

<hr/>

<p><img alt="Source and Destination Files" src="{{ page.root }}/fig/file-mapping.svg" /></p>

<hr/>

<p><img alt="Formatting Rules" src="{{ page.root }}/fig/episode-format-small.png" /></p>

<hr/>

<p><img alt="" src="{{ page.root }}/fig/episode-format.png" /></p>

<hr/>

<p><img alt="plot of chunk plot-example" src="{{ page.root }}/fig/rmd-plot-example-1.png" /></p>