diff --git a/README.md b/README.md index 1c9ccdf..4e2e14b 100644 --- a/README.md +++ b/README.md @@ -1,14 +1,14 @@ -# {Course Name} +# Cancer Informatics Data Visualization in Practice This course was created from [this GitHub template](https://github.com/jhudsl/OTTR_Template). -You can see the rendered course material here: {Link to rendered bookdown and/or to the Leanpub.} +You can see the rendered course material here: https://hutchdatascience.org/DataViz_Practice/ If you would like to contribute to this course material, take a look at the [OTTR documentation](https://www.ottrproject.org/). ## About this course -This course introduces {info on what this course introduces} +This ITN course focuses on practicing best practices in data visualization by discussing common graph types used within Cancer Informatics, building graphs (while employing best practices), showcasing ITCR tools that are helpful for data visualization of cancer research data, and providing additional resources for further visualization practice. ## Learning Objectives diff --git a/_output.yml b/_output.yml index 509a629..9c1d813 100644 --- a/_output.yml +++ b/_output.yml @@ -1,16 +1,18 @@ bookdown::gitbook: - css: assets/style.css + css: assets/style_ITN.css includes: - before_body: assets/big-image.html - after_body: [assets/footer.html, assets/open-new-tab.html] - highlight: tango + before_body: assets/big-image-itcr.html + after_body: assets/footer.html + highlight: tango config: toc: collapse: section before: | - + after: |

This content was published with bookdown using

The OTTR Template by:

The Johns Hopkins Data Science Lab

+

Style adapted from: rstudio4edu-book (CC-BY 2.0)

+

Click here to provide feedback

diff --git a/assets/ITN_favicon.ico b/assets/ITN_favicon.ico new file mode 100755 index 0000000..726a500 Binary files /dev/null and b/assets/ITN_favicon.ico differ diff --git a/assets/ITN_logo.png b/assets/ITN_logo.png new file mode 100644 index 0000000..0ade934 Binary files /dev/null and b/assets/ITN_logo.png differ diff --git a/assets/big-image-itcr.html b/assets/big-image-itcr.html new file mode 100644 index 0000000..aea142a --- /dev/null +++ b/assets/big-image-itcr.html @@ -0,0 +1,12 @@ + + + + + + + + + +
+ +
\ No newline at end of file diff --git a/assets/itcr_main_image.png b/assets/itcr_main_image.png new file mode 100644 index 0000000..db2c053 Binary files /dev/null and b/assets/itcr_main_image.png differ diff --git a/assets/style_ITN.css b/assets/style_ITN.css new file mode 100644 index 0000000..ad7e3b4 --- /dev/null +++ b/assets/style_ITN.css @@ -0,0 +1,551 @@ +@import url('https://fonts.googleapis.com/css?family=Abril+Fatface|Karla:400,400i,700,700i|Lora:400,400i,700,700i&display=swap'); + +p.caption { + color: #777; + margin-top: 10px; +} +p code { + white-space: inherit; +} +pre { + word-break: normal; + word-wrap: normal; +} +pre code { + white-space: inherit; +} + +/*---------------Hero Image------------------*/ + +/* next 3 rules are for setting large image at top of each page and pushing down the book content to appear beneath the image */ + +.hero-image-container { + position: absolute; + top: 0; + left: 0; + right: 0; + height: 200px; + /*background-image: url("images/books.jpg");*/ + /*background-color: #193a5c;*/ +} + +.hero-image { + width: 100%; + height: 80%; + /*object-fit: cover;*/ +} + +.page-inner { + padding-top: 140px !important; +} + + +/* ------------Links------------------ */ + +.book .book-body .page-wrapper .page-inner section.normal a { + color: #e0471c; +} + + +/*------------- Body and header text---------------- */ + +.book.font-family-1 { + font-family: 'Karla', arial, sans-serif; +} + +h1, h2, h3, h4 { + font-family: 'Lora', arial, sans-serif; +} + + +.book .book-body .page-wrapper .page-inner section.normal h1, +.book .book-body .page-wrapper .page-inner section.normal h2, +.book .book-body .page-wrapper .page-inner section.normal h3, +.book .book-body .page-wrapper .page-inner section.normal h4, +.book .book-body .page-wrapper .page-inner section.normal h5, +.book .book-body .page-wrapper .page-inner section.normal h6 { + margin-top: 2.275em; + margin-bottom: 1em; +} + +.title { + font-family: 'Lora'; + font-size: 4em !important; + color: #193a5c; + margin-top: 0.275em !important; + margin-bottom: 0.35em !important; +} + +.subtitle { + font-family: 'Lora'; + color: #0b8d96; +} + + +/*----------DROP CAPS--------------*/ + + +/*p:nth-child(2):first-letter { /* /* DROP-CAP FOR FIRST P BENEATH EACH H1 OR H2*/ /* + color: #3fb5bd; + float: left; + font-family: 'Abril Fatface', serif; + font-size: 7em; + line-height: 65px; + padding-top: 4px; + padding-right: 8px; + padding-left: 3px; + margin-bottom: 9px; +} +*/ + +.section.level1 > p:first-of-type:first-letter { /*drop cap for first p beneath level 1 headers only within class .section*/ + color: #193a5c; + float: left; + font-family: 'Abril Fatface', serif; + font-size: 7em; + line-height: 65px; + padding-top: 4px; + padding-right: 8px; + padding-left: 3px; + margin-bottom: 9px; +} + +/* add drop cap to first paragraph that follows the first 2nd level header*/ +/* +.section.level2:first-of-type > p:first-of-type:first-letter { + color: #3fb5bd; + float: left; + font-family: 'Abril Fatface', serif; + font-size: 7em; + line-height: 65px; + padding-top: 4px; + padding-right: 8px; + padding-left: 3px; + margin-bottom: 9px; +} +*/ + + + +/*------------ TOC --------------*/ + + +.book .book-summary { + background: white; + border-right: none; +} + +/*---color of links in TOC----*/ + +.book .book-summary a { +color: #193a5c +} + +.summary{ + font-family: 'Karla', sans-serif; +} + +/* all TOC list items, basically */ +.book .book-summary ul.summary li a, +.book .book-summary ul.summary li span { + padding-top: 8px; + padding-bottom: 8px; + padding-left: 15px; + padding-right: 15px; + color: #193a5c; +} + +.summary a:hover { + color: #e0471c !important; +} + +.book .book-summary ul.summary li.active>a { /*active TOC links*/ + color: #e0471c !important; + border-left: solid 4px; + border-color: #e0471c; + padding-left: 11px !important; +} + +.trapezoid { + width: 130px; + text-align: center; + height: 15; + position: relative; + border-right: 50px solid transparent; + border-bottom: 50px solid #dbdbdb; + border-left: 50px solid transparent; + box-sizing: content-box; +} +.trapezoid span { + position: absolute; + top: 5px; + bottom: 5px; + left: 5%; + color: #fff; +} + + + + +li.appendix span, li.part span { /* for TOC part names */ + margin-top: 1em; + color: #000000; + opacity: .9 !important; + text-transform: uppercase; +} + +.part + li[data-level=""] { /* grabs first .chapter immediately after .part...but only those ch without numbers */ + text-transform: uppercase; +} + + +/* The next two rules make the horizontal line go straight across in top navbar */ + +.summary > li:first-child { + height: 50px; + padding-top: 10px; + border-bottom: 1px solid rgba(0,0,0,.07); +} + +.book .book-summary ul.summary li.divider { + height: 0px; +} + + + +/*--- LOGO ---*/ + +.toc-logo { + width: 200px !important; + object-fit: contain; + margin: 0 auto; +} + +.toc-logo img { + max-width: 100%; + margin-bottom: 10px; +} + +.summary > li:first-child { + height: auto !important; +} + +/* --------------Two columns--------------- */ + +.col2 { + columns: 2 200px; /* number of columns and width in pixels*/ + -webkit-columns: 2 200px; /* chrome, safari */ + -moz-columns: 2 200px; /* firefox */ +} + + +.side-by-side { + display: flex; +} + +.side1 { + width: 40%; +} + +.side2 { + width: 58%; + margin-left: 1rem; +} + +/* --------------Even split- two columns--------------- */ + +.split { + display: flex; +} + +.split1 { + width: 50%; + padding-right: 20px; +} + +.split2 { + width: 50%; +} + + +/* Sidebar formating --------------------------------------------*/ +/* from r-pkgs.org*/ + +div.notice{ + border: 4px #193a5c; + border-style: solid; + padding: 1em; + margin: 1em 0; + padding-left: 100px; + background-size: 70px; + background-repeat: no-repeat; + background-position: 15px center; + min-height: 120px; + background-color: #e8ebee; +} + +div.notice{ + background-image: url("../assets/box_images/note.png"); +} + +div.warning{ + border: 4px #e0471c; + border-style: solid; + padding: 1em; + margin: 1em 0; + padding-left: 100px; + background-size: 70px; + background-repeat: no-repeat; + background-position: 15px center; + min-height: 120px; + background-color: #e8ebee; +} + +div.warning{ + background-image: url("../assets/box_images/warning.png"); +} + + + +div.github{ + border: 4px #000000; + border-style: solid; + padding: 1em; + margin: 1em 0; + padding-left: 100px; + background-size: 70px; + background-repeat: no-repeat; + background-position: 15px center; + min-height: 120px; + background-color: #e8ebee; +} + +div.github{ + background-image: url("../assets/box_images/github.png"); +} + +div.dictionary{ + border: 4px #193a5c; + border-style: solid; + padding: 1em; + margin: 1em 0; + padding-left: 100px; + background-size: 70px; + background-repeat: no-repeat; + background-position: 15px center; + min-height: 120px; + background-color: #e8ebee; +} + +div.dictionary{ + background-image: url("../assets/box_images/dictionary.png"); +} + +div.reflection{ + border: 4px #193a5c; + border-style: solid; + padding: 1em; + margin: 1em 0; + padding-left: 100px; + background-size: 90px; + background-repeat: no-repeat; + background-position: 15px center; + min-height: 120px; + background-color: #e8ebee; +} + +div.reflection{ + background-image: url("../assets/box_images/thinking_face.png"); +} + + +div.rstudio-tip, div.tip, div.gotcha, div.design, div.hat{ + border: 4px #aed6d963; + border-style: dashed solid; + padding: 1em; + margin: 1em 0; + padding-left: 100px; + background-size: 70px; + background-repeat: no-repeat; + background-position: 15px center; + min-height: 120px; + color: #2ea8b3; + background-color: #fcfcfc; +} + + +div.rstudio-tip { + background-image: url("../images/divs/rstudio.png"); +} + +div.tip { + background-image: url("../images/divs/lightbulb.png"); +} + +div.gotcha { + background-image: url("../images/divs/gotcha_2.png"); +} + +div.design { + background-image: url("../images/divs/design.png"); +} + +div.hat { + background-image: url("../images/divs/hat.png"); +} + +/* for fancy bookdown cookbook */ + +div.puzzle, div.fyi, div.demo, div.note { + padding: 1em; + margin: 1em 0; + padding-left: 100px; + background-size: 70px; + background-repeat: no-repeat; + background-position: 15px center; + min-height: 120px; + color: #1f5386; + background-color: #bed3ec; + border: solid 5px #dfedff; +} + +div.puzzle { + background-image: url("../images/illos/Your-turn.png"); +} + +div.fyi { + background-image: url("../images/illos/fyi.png"); +} + +div.demo { + background-image: url("../images/illos/Live-code.png"); +} + +div.note { + background-image: url("../images/illos/lightbulb2.png"); +} + + +/* .book .book-body .page-wrapper .page-inner section.normal is needed + to override the styles produced by gitbook, which are ridiculously + overspecified. Goal of the selectors is to ensure internal "margins" + controlled only by padding of container */ + +.book .book-body .page-wrapper .page-inner section.normal div.rstudio-tip > :first-child, +.book .book-body .page-wrapper .page-inner section.normal div.tip > :first-child { + margin-top: 0; +} + +.book .book-body .page-wrapper .page-inner section.normal div.rstudio-tip > :last-child, +.book .book-body .page-wrapper .page-inner section.normal div.tip > :last-child { + margin-bottom: 0; +} + +iframe { + -moz-transform-origin: top left; + -webkit-transform-origin: top left; + -o-transform-origin: top left; + -ms-transform-origin: top left; + transform-origin: top left; +} + +.iframe-container { + overflow: auto; + -webkit-overflow-scrolling: touch; + border: #ddd 2px solid; + box-shadow: #888 0px 5px 8px; + margin-bottom: 1em; +} + +.iframe-container > iframe { + border: none; +} + + +/* -------Clipboard copy button --------- */ +.copy { + width: inherit; + background-color: #e2e2e2 ; + border: none; + border-radius: 2px; + float: right; + font-size: 60%; + padding: 4px 4px 4px 4px; +} + +/* for new copy button */ + +.hasCopyButton { + position: relative; +} + +.btn-copy-ex { + position: absolute; + right: 0; + top: 0; + visibility: hidden; +} + +.hasCopyButton:hover button.btn-copy-ex { + visibility: visible; +} + + + +/* -----------Section anchors -------------*/ + +.book .book-body .page-wrapper .page-inner section.normal { + overflow: visible !important; /*so anchor link doesn't get cut off */ +} + +a.anchor { + margin-left: -30px; + padding-right: 3px; + display:inline-block; + width: 30px; + height: 30px; + /*visibility: hidden;*/ + background-image: url(https://image.flaticon.com/icons/svg/34/34735.svg) !important; + background-repeat: no-repeat !important; + background-size: 20px 20px !important; + background-position: center bottom !important; + opacity: 0; +} + + +.hasAnchor:hover a.anchor, +a.anchor:hover { + /*visibility: visible;*/ + opacity: 0.6; +} + +/* disable anchors for headers with "no-anchor" class */ +.no-anchor .hasAnchor:hover a.anchor, +.no-anchor a.anchor:hover { + opacity: 0 !important; +} + +@media (max-width: 1144px) { /* don't show anchor link on small screens */ + .hasAnchor:hover a.anchor { + visibility: hidden; + } +} + + +/*____Code Chunks____*/ + +.sourceCode { + margin-bottom: 0.85em; /* adds same amount of margin as a

would */ +} + +.sourceCode pre { + margin: 0 !important; /* makes space above and below symmetrical*/ +} + +/* Footer */ + +.footer { + font-family: "Lora", serif; + font-size: .85em; + color: #193a5c; +} \ No newline at end of file diff --git a/index.Rmd b/index.Rmd index 79614a5..33a998f 100644 --- a/index.Rmd +++ b/index.Rmd @@ -1,26 +1,23 @@ --- -title: "Course Name" +title: "Informatics Technology for Cancer Research (ITCR): Course Name " date: "`r format(Sys.time(), '%B, %Y')`" site: bookdown::bookdown_site documentclass: book -bibliography: [book.bib] +bibliography: [book.bib, packages.bib] biblio-style: apalike link-citations: yes description: "Description about Course/Book." -favicon: assets/dasl_favicon.ico -output: - bookdown::word_document2: - toc: true +favicon: assets/ITN_favicon.ico --- -# About this Course {-} - -## Available course formats +```{r include=FALSE} +# automatically create a bib database for R packages +knitr::write_bib(c( + .packages(), "bookdown", "knitr", "rmarkdown" +), "packages.bib") +``` -This course is available in multiple formats which allows you to take it in the way that best suites your needs. You can take it for certificate which can be for free or fee. +# About this Course {-} -- The material for this course can be viewed without login requirement on this [Bookdown website](LINK HERE). This format might be most appropriate for you if you rely on screen-reader technology. -- This course can be taken for [free certification through Leanpub](LINK HERE). -- This course can be taken on [Coursera for certification here](LINK HERE) (but it is not available for free on Coursera). -- Our courses are open source, you can find the [source material for this course on GitHub](LINK HERE). +This course is part of a series of courses for the [Informatics Technology for Cancer Research (ITCR)](https://itcr.cancer.gov/) called the Informatics Technology for Cancer Research Education Resource. This material was created by the ITCR Training Network (ITN) which is a collaborative effort of researchers around the United States to support cancer informatics and data science training through resources, technology, and events. This initiative is funded by the following grant: [National Cancer Institute (NCI)](https://www.cancer.gov/) UE5 CA254170. Our courses feature tools developed by ITCR Investigators and make it easier for principal investigators, scientists, and analysts to integrate cancer informatics into their workflows. Please see our website at [www.itcrtraining.org](www.itcrtraining.org) for more information.