In jwiggi18/HistoryOfEarth:

knitr::opts_chunk$set(echo = TRUE)

data(taxa_links, package="HistoryOfEarth")

knitr::asis_output(htmltools::htmlPreserve(paste0('
<script type="text/javascript">
var txt = ',"'",
knitr::asis_output(htmltools::htmlPreserve(jsonlite::toJSON(taxa_links, pretty=FALSE))),"'",
';
txt = txt.replace("<!--/html_preserve-->", "").replace("<!--/html_preserve-->", "").replace("<!--html_preserve-->", "").replace("<!--html_preserve-->", "");
var taxoninfo = JSON.parse(txt);

</script>
')))

shiny::fluidRow(class = "overview",
    column(12, style = "background-color:#545353", align = "center",
      shiny::actionButton("overview_button", shiny::h3("Overview", color="ffffff"), align = "center",
                    onclick = "window.open('https://youtu.be/rWp5ZpJAIAE', '_blank')",
                    style = "size: 16px; padding: 1px; color: #ffffff; background-color:#545353; border-color:#545353")
                  )
    )
    shiny::fluidRow(class = "overview_vg",
        column(12, style = "background-color:#545353", align = "center",
          shiny::actionButton("overview_vg", "Questions", align = "center",
                        onclick = "window.open('https://quizlet.com/365498277/test', '_blank')",
                        style = "size: 12px; padding: 1px; color: #ffffff; background-color:#545353; border-color:#545353")
                      )
        )
    shiny::fluidRow(class = "Eras",
        column(6, style = "background-color:#FFFF99", align = "center",
            shiny::actionButton("paleozoic_button", shiny::h4("Paleozoic Era", style="color:black"), #yellow
                          onclick = "window.open('https://youtu.be/RDQa0okkpf0', '_blank')",
                          style = "size: 16px; padding: 1px; color: #000000; background-color:#FFFF99; border-color:#FFFF99")
        ),
        column(3, style = "background-color:#1F78B4", align = "center",
            shiny::actionButton("mesozoic_button", shiny::h4("Mesozoic Era"), #blue
                          onclick = "window.open('https://youtu.be/ZoHO3fAj_78', '_blank')",
                          style = "size: 16px; padding: 1px; background-color:#1F78B4; border-color:#1F78B4")
        ),
        column(3, style = "background-color:#B2DF8A", align = "center",
            actionButton("cenozoic_button", shiny::h4("Cenozoic Era", style="color:black"), #green
                          onclick = "window.open('https://youtu.be/2ofNufZVcMU', '_blank')",
                          style = "size: 16px; padding: 1px; color: #000000; background-color:#B2DF8A; border-color:#B2DF8A")
        )
      )
      shiny::fluidRow(class = "Viewer_Guides",
          column(6, style = "background-color:#FFFF99", align = "center",
              shiny::actionButton("paleozoic_vg", "Questions", #yellow
                            onclick = "window.open('https://quizlet.com/365224880/test', '_blank')",
                            style = "padding: 1px; color: #000000; background-color:#FFFF99; border-color:#FFFF99")
          ),
          column(3, style = "background-color:#1F78B4", align = "center",
              shiny::actionButton("mesozoic_vg", "Questions", #blue
                            onclick = "window.open('https://quizlet.com/365535631/test', '_blank')",
                            style = "padding: 1px; background-color:#1F78B4; border-color:#1F78B4")
          ),
          column(3, style = "background-color:#B2DF8A", align = "center",
              shiny::actionButton("cenozoic_vg", "Questions", #green
                            onclick = "window.open('https://quizlet.com/365527235/test', '_blank')",
                            style = "padding: 1px; color: #000000; background-color:#B2DF8A; border-color:#B2DF8A")
          )
        )
        shiny::fluidRow(class = "Periods",
            column(1, style = "background-color:#A6CEE3", align = "center",
                shiny::actionButton("cambrian_button", "Cambrian",
                onclick = "window.open('https://www.nationalgeographic.com/science/prehistoric-world/cambrian/', '_blank')",
                style = "padding: 6px 0px; color: #000000; background-color:#A6CEE3; border-color:#A6CEE3")
              ),
            column(1, style = "background-color:#1F78B4", align = "center",
                shiny::actionButton("ordovician_button", "Ordovician",
                onclick = "window.open('https://youtu.be/yQhlUqLFDxQ', '_blank')",
                style = "padding: 6px 0px; background-color:#1F78B4; border-color:#1F78B4")
              ),
            column(1, style = "background-color:#B2DF8A", align = "center",
                shiny::actionButton("silurian_button", "Silurian",
                onclick = "window.open('http://www.ucmp.berkeley.edu/silurian/silurian.php', '_blank')",
                style = "padding: 6px 0px; color: #000000; background-color:#B2DF8A; border-color:#B2DF8A")
              ),
            column(1, style = "background-color:#33A02C", align = "center",
                shiny::actionButton("devonian_button", "Devonian",
                onclick = "window.open('https://youtu.be/6Fr8vL9-j2Q', '_blank')",
                style = "padding: 6px 0px; background-color:#33A02C; border-color:#33A02C")
              ),
            column(1, style = "background-color:#FB9A99", align = "center",
                shiny::actionButton("carboniferous_button", "Carboniferous",
                onclick = "window.open('http://www.ucmp.berkeley.edu/carboniferous/carboniferous.php', '_blank')",
                style = "padding: 6px 0px; color: #000000; background-color:#FB9A99; border-color:#FB9A99")
              ),
            column(1, style = "background-color:#E31A1C", align = "center",
                shiny::actionButton("permian_button", "Permian",
                onclick = "window.open('https://youtu.be/FlEC6tp36nw', '_blank')",
                style = "padding: 6px 0px; background-color:#E31A1C; border-color:#E31A1C")
              ),
            column(1, style = "background-color:#FDBF6F", align = "center",
                shiny::actionButton("triassic_button", "Triassic",
                onclick = "window.open('https://youtu.be/moxu_uTemNg', '_blank')",
                style = "padding: 6px 0px; color: #000000; background-color:#FDBF6F; border-color:#FDBF6F")
              ),
            column(1, style = "background-color:#FF7F00", align = "center",
                shiny::actionButton("jurassic_button", "Jurassic",
                onclick = "window.open('https://youtu.be/OYUwrA-jZok', '_blank')",
                style = "padding: 6px 0px; background-color:#FF7F00; border-color:#FF7F00")
              ),
            column(1, style = "background-color:#CAB2D6", align = "center",
                shiny::actionButton("cretaceous_button", "Cretaceous",
                onclick = "window.open('https://www.nationalgeographic.com/science/prehistoric-world/cretaceous/', '_blank')",
                style = "padding: 6px 0px; color: #000000; background-color:#CAB2D6; border-color:#CAB2D6")
              ),
            column(1, style = "background-color:#6A3D9A", align = "center",
                shiny::actionButton("paleogene_button", "Paleogene",
                onclick = "window.open('https://www.nationalgeographic.com/science/prehistoric-world/paleogene/', '_blank')",
                style = "padding: 6px 1px; background-color:#6A3D9A; border-color:#6A3D9A")
              ),
            column(1, style = "background-color:#FFFF99", align = "center",
                shiny::actionButton("neogene_button", "Neogene",
                onclick = "window.open('https://www.nationalgeographic.com/science/prehistoric-world/neogene/', '_blank')",
                style = "padding: 6px 0px; color: #000000; background-color:#FFFF99; border-color:#FFFF99")
              ),
            column(1, style = "background-color:#B15928", align = "center",
                shiny::actionButton("quaternary_button", "Quaternary",
                onclick = "window.open('https://www.nationalgeographic.com/science/prehistoric-world/quaternary/', '_blank')",
                style = "padding: 6px 0px; background-color:#B15928; border-color:#B15928")
              )
          )
          shiny::br()

Welcome to the History of Earth site! Here you can find information about how animals have evolved and how the continents have shifted through time. You can click on the names above of any of the time periods to open a web page with information on that period, or click on questions to open a page that can check your understanding. Below, pick an organism to examine in more detail, then see where it lives or lived on the planet and, below that, its placement on a family tree of animals.

data(taxa_links, package="HistoryOfEarth")
genus_choices <- taxa_links$Genus
names(genus_choices) <- paste0(taxa_links$common_name, " (",taxa_links$Genus,")")
identical_names <- which(taxa_links$Genus == taxa_links$common_name)
names(genus_choices)[identical_names] <- taxa_links$Genus[identical_names]



shiny::fluidRow(
    column(4, align="center",
      shiny::selectInput("genus", "Choose an organism:",
        choices = genus_choices,
        multiple = FALSE, selected=unname(genus_choices[1]), selectize=FALSE)
    ),

    column(8, align="center",
    shiny::selectInput("period", "Choose a period:",
                    choices = c("All", HistoryOfEarth::GetAgeDF()$Period),
                    multiple = FALSE, selected="All", selectize=FALSE)

    )
)
shiny::fluidRow(
  column(4, align="center",
    htmltools::img(id="organismphoto", src="https://upload.wikimedia.org/wikipedia/commons/c/c1/La_Brea_Tar_Pits.jpg", alt="picture of the selected organism", width=200),
    shiny::br(),
    htmltools::div(id="more_info",
      htmltools::a("Learn about All", href=taxa_links$Link[1], target="_blank")
    )
  ),
  column(8, align="center",
  htmltools::img(id="map", src="img/map_All_All.gif", alt="map of plates")
  )
)
shiny::fluidRow(
  column(12, align="center",
    htmltools::img(id="tree", src="img/tree_All_All.jpg", alt="phylogeny of organisms")
  )
)

knitr::asis_output(htmltools::htmlPreserve('
<script type="text/javascript">


var g = document.getElementById("genus");
g.addEventListener("change", function() {
    var selected = $(this).find("option:selected");
    var chosenperiod = document.getElementById("period");
    chosenperiod.selectedIndex = 0; // reset to all
    var str_chosenperiod = chosenperiod.options[chosenperiod.selectedIndex].value;
    //alert("img/map_" + selected.text() + "_" + str_chosenperiod + ".gif");

    //alert(JSON.stringify(taxoninfo[$("#genus").prop("selectedIndex")].Genus));
    document.getElementById("organismphoto").src=taxoninfo[$("#genus").prop("selectedIndex")].pic_url;
    document.getElementById("map").src="img/map_" + taxoninfo[$("#genus").prop("selectedIndex")].Genus + "_" + str_chosenperiod + ".gif";
    document.getElementById("tree").src="img/tree_" + taxoninfo[$("#genus").prop("selectedIndex")].Genus + "_" + str_chosenperiod + ".jpg";


 document.getElementById("section-more_info").innerHTML =  "<a href=\\"" + taxoninfo[$("#genus").prop("selectedIndex")].Link + "\\" target=\\"_blank\\">Learn more about <i>" + taxoninfo[$("#genus").prop("selectedIndex")].Genus + "</i></a>";


});
</script>

<script type="text/javascript">

var p = document.getElementById("period");
p.addEventListener("change", function() {
    var selected = $(this).find("option:selected");
    // var chosengenus = document.getElementById("genus");
    // var str_chosengenus = chosengenus.options[chosengenus.selectedIndex].text;
  //  alert(selected.val() + " " + selected.text() + str_chosengenus);
    document.getElementById("map").src="img/map_" + taxoninfo[$("#genus").prop("selectedIndex")].Genus + "_" + selected.val() + ".gif";
    document.getElementById("tree").src="img/tree_" + taxoninfo[$("#genus").prop("selectedIndex")].Genus + "_" + selected.val() + ".jpg";
});
</script>
'))

knitr::asis_output(htmltools::htmlPreserve('

<script>

//var a = document.getElementById("genus");
//a.addEventListener("change", function() {
//  alert(this.text);
//}, false);
</script>




'))

---

Site created using R, javascript, and HTML; hosted on GitHub pages. Key technologies and data sources used are:

• GPlates: A reconstruction of the Earth's plates through time.
• EarthByte: They host a portal and API allowing use of maps computed with GPlates.
• gplatesr: R package that pulls in the maps from EarthByte. It uses ggplot2 to plot the maps. Package developed by Luna Sanchez Reyes, Jodie Wiggins, and Brian O'Meara.
• Paleobiology Database: A public resource for fossil data -- we use it for specimens and for their taxonomy.
• paleotree: R package with many functions for phylogenies (evolutionary family trees) that have fossil and living organisms. Developed by Dave Bapst. We use a slightly modified version; it can be installed by typing devtools::install_github("bomeara/paleotree", ref="developmentBranch") in R.
• PhyloPic: Database of images curated by Mike Keesey and donated by many people. The small icons on the tree all come from here.
• animation: R package by Yihui Xie to animate from a series of images in R.
• Shiny: R package that can create interactive websites. The first version of this site was created using it; we found that some steps took long enough that caching images was a better idea, but this is still used to help create the final layout. htmltools, R Markdown, and knitr are also key R technologies we use.

This project was developed by Jodie Wiggins, Brian O'Meara, Dave Bapst, and Luna Sanchez Reyes in collaboration with public school teachers Nellie Johnson, Kellee Shuttleworth, and Cara Stephens, as part of the phylotastic project. Funds to support this work came from the US National Science Foundation (NSF) grants 1458572, 1453424, and 1458603.

All materials are open for this: you can go to https://github.com/jwiggi18/HistoryOfEarth to see the code we use, list issues, and try modifying it yourself.

jwiggi18/HistoryOfEarth documentation built on July 19, 2019, 7:17 p.m.