mirror of
https://github.com/kidwellj/hacking_religion_textbook.git
synced 2025-07-01 15:44:08 +00:00
updated render
This commit is contained in:
Jeremy Kidwell
parent
b52f19ea58
commit
5116c12449
9 changed files with 327 additions and 69 deletions
|
|
@ -2,7 +2,7 @@
|
|||
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head>
|
||||
|
||||
<meta charset="utf-8">
|
||||
<meta name="generator" content="quarto-1.3.353">
|
||||
<meta name="generator" content="quarto-1.4.549">
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
|
||||
|
||||
|
|
@ -22,7 +22,7 @@ ul.task-list li input[type="checkbox"] {
|
|||
}
|
||||
/* CSS for syntax highlighting */
|
||||
pre > code.sourceCode { white-space: pre; position: relative; }
|
||||
pre > code.sourceCode > span { display: inline-block; line-height: 1.25; }
|
||||
pre > code.sourceCode > span { line-height: 1.25; }
|
||||
pre > code.sourceCode > span:empty { height: 1.2em; }
|
||||
.sourceCode { overflow: visible; }
|
||||
code.sourceCode > span { color: inherit; text-decoration: inherit; }
|
||||
|
|
@ -81,7 +81,13 @@ pre > code.sourceCode > span > a:first-child::before { text-decoration: underlin
|
|||
"collapse-after": 3,
|
||||
"panel-placement": "start",
|
||||
"type": "textbox",
|
||||
"limit": 20,
|
||||
"limit": 50,
|
||||
"keyboard-shortcut": [
|
||||
"f",
|
||||
"/",
|
||||
"s"
|
||||
],
|
||||
"show-item-context": false,
|
||||
"language": {
|
||||
"search-no-results-text": "No results",
|
||||
"search-matching-documents-text": "matching documents",
|
||||
|
|
@ -90,8 +96,10 @@ pre > code.sourceCode > span > a:first-child::before { text-decoration: underlin
|
|||
"search-more-match-text": "more match in this document",
|
||||
"search-more-matches-text": "more matches in this document",
|
||||
"search-clear-button-title": "Clear",
|
||||
"search-text-placeholder": "",
|
||||
"search-detached-cancel-button-title": "Cancel",
|
||||
"search-submit-button-title": "Submit"
|
||||
"search-submit-button-title": "Submit",
|
||||
"search-label": "Search"
|
||||
}
|
||||
}</script>
|
||||
|
||||
|
|
@ -104,13 +112,13 @@ pre > code.sourceCode > span > a:first-child::before { text-decoration: underlin
|
|||
<header id="quarto-header" class="headroom fixed-top">
|
||||
<nav class="quarto-secondary-nav">
|
||||
<div class="container-fluid d-flex">
|
||||
<button type="button" class="quarto-btn-toggle btn" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar,#quarto-sidebar-glass" aria-controls="quarto-sidebar" aria-expanded="false" aria-label="Toggle sidebar navigation" onclick="if (window.quartoToggleHeadroom) { window.quartoToggleHeadroom(); }">
|
||||
<button type="button" class="quarto-btn-toggle btn" data-bs-toggle="collapse" data-bs-target=".quarto-sidebar-collapse-item" aria-controls="quarto-sidebar" aria-expanded="false" aria-label="Toggle sidebar navigation" onclick="if (window.quartoToggleHeadroom) { window.quartoToggleHeadroom(); }">
|
||||
<i class="bi bi-layout-text-sidebar-reverse"></i>
|
||||
</button>
|
||||
<nav class="quarto-page-breadcrumbs" aria-label="breadcrumb"><ol class="breadcrumb"><li class="breadcrumb-item"><a href="./chapter_2.html"><span class="chapter-number">2</span> <span class="chapter-title">Getting into the nitty-gritty details</span></a></li></ol></nav>
|
||||
<a class="flex-grow-1" role="button" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar,#quarto-sidebar-glass" aria-controls="quarto-sidebar" aria-expanded="false" aria-label="Toggle sidebar navigation" onclick="if (window.quartoToggleHeadroom) { window.quartoToggleHeadroom(); }">
|
||||
</a>
|
||||
<button type="button" class="btn quarto-search-button" aria-label="Search" onclick="window.quartoOpenSearch();">
|
||||
<nav class="quarto-page-breadcrumbs" aria-label="breadcrumb"><ol class="breadcrumb"><li class="breadcrumb-item"><a href="./chapter_2.html"><span class="chapter-number">2</span> <span class="chapter-title">Getting into the nitty-gritty details</span></a></li></ol></nav>
|
||||
<a class="flex-grow-1" role="button" data-bs-toggle="collapse" data-bs-target=".quarto-sidebar-collapse-item" aria-controls="quarto-sidebar" aria-expanded="false" aria-label="Toggle sidebar navigation" onclick="if (window.quartoToggleHeadroom) { window.quartoToggleHeadroom(); }">
|
||||
</a>
|
||||
<button type="button" class="btn quarto-search-button" aria-label="" onclick="window.quartoOpenSearch();">
|
||||
<i class="bi bi-search"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -119,7 +127,7 @@ pre > code.sourceCode > span > a:first-child::before { text-decoration: underlin
|
|||
<!-- content -->
|
||||
<div id="quarto-content" class="quarto-container page-columns page-rows-contents page-layout-article">
|
||||
<!-- sidebar -->
|
||||
<nav id="quarto-sidebar" class="sidebar collapse collapse-horizontal sidebar-navigation floating overflow-auto">
|
||||
<nav id="quarto-sidebar" class="sidebar collapse collapse-horizontal quarto-sidebar-collapse-item sidebar-navigation floating overflow-auto">
|
||||
<div class="pt-lg-2 mt-2 text-left sidebar-header">
|
||||
<div class="sidebar-title mb-0 py-0">
|
||||
<a href="./">Hacking Religion: TRS & Data Science in Action</a>
|
||||
|
|
@ -183,7 +191,7 @@ pre > code.sourceCode > span > a:first-child::before { text-decoration: underlin
|
|||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
<div id="quarto-sidebar-glass" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar,#quarto-sidebar-glass"></div>
|
||||
<div id="quarto-sidebar-glass" class="quarto-sidebar-collapse-item" data-bs-toggle="collapse" data-bs-target=".quarto-sidebar-collapse-item"></div>
|
||||
<!-- margin-sidebar -->
|
||||
<div id="quarto-margin-sidebar" class="sidebar margin-sidebar">
|
||||
<nav id="TOC" role="doc-toc" class="toc-active">
|
||||
|
|
@ -228,8 +236,10 @@ pre > code.sourceCode > span > a:first-child::before { text-decoration: underlin
|
|||
</div>
|
||||
|
||||
|
||||
|
||||
</header>
|
||||
|
||||
|
||||
<p>In this chapter, we’ll explore the diverse variety of ways you can frame collecting data around religion. Before we dive into that all, however, you might be wondering, why does it all really matter? Can’t we just use the census data and assume that’s a reasonably accurate approximation? I’ll explore the importance of getting the framing right, or better yet, working with data that seeks to unpack religious belonging, identity, and beliefs (or unbelief) in a variety of ways, but an example might serve to explain why this is important.</p>
|
||||
<p>The 2016 presidential election result in the USA came as a surprise to many data analysts and pollsters. As the dust settled, a number of analysis scrambled to make sense of things and identify some hidden factor that might have tipped the balance away from the expected winner Hilary Clinton. One of the most widely circulated data points was the role of white evangelical Christians in supporting Trump. Exit polls reported that 81% of this constituency voted for Trump and many major media outlets reported this figure prominently, with public commentary from many religious leaders on the meaning this figure had the social direction of evangelical Christianity.</p>
|
||||
<p>Far too few observers paused to ask what those exit polls were measuring and a closer look at that information reveals some interesting nuances. There is only a single firm that runs exit polling in the USA, Edison Research, who is contracted to do this work by a consortium of major media news outlets (“the National Election Pool”), which represents ABC News, Associated Press, CBS News, CNN, Fox News, and NBC News. It’s not a process driven by slow, nuanced, scholarly researchers strapped for funding, it’s a rapid high-stakes data collection exercise meant to provide data which can feed into the election week news cycle. The poll doesn’t ask respondents simply if they are “evangelical” it uses a broader proxy question to do this: “Would you describe yourself as a born-again or evangelical Christian?” This term “born-again” can be a useful proxy, but it can also prove misleading. When asked if they are “born again” people who identify with a number of non-Christian religions, and people who might describe themselves as non-religious will also often answer “yes”. This is particularly salient given the 2016 exit survey asked this question before asking specifically what a person’s religion was, so as Pew Research reported, “everyone who takes the exit poll (including religious “nones” and adherents of non-Christian faiths) has the opportunity to identify as a born-again or evangelical Christian.”</p>
|
||||
|
|
@ -329,15 +339,15 @@ So <em>Who’s</em> Religious?
|
|||
<dl class="code-annotation-container-grid">
|
||||
<dt data-target-cell="annotated-cell-4" data-target-annotation="1">1</dt>
|
||||
<dd>
|
||||
<span data-code-cell="annotated-cell-4" data-code-annotation="1" data-code-lines="2">First we generate new a dataframe with sums per category and</span>
|
||||
<span data-code-cell="annotated-cell-4" data-code-lines="2" data-code-annotation="1">First we generate new a dataframe with sums per category and</span>
|
||||
</dd>
|
||||
<dt data-target-cell="annotated-cell-4" data-target-annotation="2">2</dt>
|
||||
<dd>
|
||||
<span data-code-cell="annotated-cell-4" data-code-annotation="2" data-code-lines="3">…sort in descending order</span>
|
||||
<span data-code-cell="annotated-cell-4" data-code-lines="3" data-code-annotation="2">…sort in descending order</span>
|
||||
</dd>
|
||||
<dt data-target-cell="annotated-cell-4" data-target-annotation="3">3</dt>
|
||||
<dd>
|
||||
<span data-code-cell="annotated-cell-4" data-code-annotation="3" data-code-lines="5">Then we add new column with percentages based on the sums you’ve just generated</span>
|
||||
<span data-code-cell="annotated-cell-4" data-code-lines="5" data-code-annotation="3">Then we add new column with percentages based on the sums you’ve just generated</span>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
|
|
@ -367,7 +377,11 @@ So <em>Who’s</em> Religious?
|
|||
<span id="cb6-6"><a href="#cb6-6" aria-hidden="true" tabindex="-1"></a> <span class="do">## make labels left-aligned and white</span></span>
|
||||
<span id="cb6-7"><a href="#cb6-7" aria-hidden="true" tabindex="-1"></a> <span class="at">hjust =</span> <span class="dv">1</span>, <span class="at">nudge_x =</span> <span class="sc">-</span>.<span class="dv">5</span>, <span class="at">colour =</span> <span class="st">"white"</span>, <span class="at">size=</span><span class="dv">3</span>)</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
|
||||
<div class="cell-output-display">
|
||||
<p><img src="chapter_2_files/figure-html/unnamed-chunk-5-1.png" class="img-fluid" width="672"></p>
|
||||
<div>
|
||||
<figure class="figure">
|
||||
<p><img src="chapter_2_files/figure-html/unnamed-chunk-5-1.png" class="img-fluid figure-img" width="672"></p>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p>You may notice that I’ve added one feature to our chart that wasn’t in the bar charts in chapter 1, text labels with the actual value on each bar using <code>geom_text</code>.</p>
|
||||
|
|
@ -387,7 +401,11 @@ So <em>Who’s</em> Religious?
|
|||
<span id="annotated-cell-7-12"><a href="#annotated-cell-7-12" aria-hidden="true" tabindex="-1"></a></span>
|
||||
<span id="annotated-cell-7-13"><a href="#annotated-cell-7-13" aria-hidden="true" tabindex="-1"></a>religious_affiliation_ethnicity_plot</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
|
||||
<div class="cell-output-display">
|
||||
<p><img src="chapter_2_files/figure-html/unnamed-chunk-6-1.png" class="img-fluid" width="672"></p>
|
||||
<div>
|
||||
<figure class="figure">
|
||||
<p><img src="chapter_2_files/figure-html/unnamed-chunk-6-1.png" class="img-fluid figure-img" width="672"></p>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sourceCode cell-code" id="cb7"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb7-1"><a href="#cb7-1" aria-hidden="true" tabindex="-1"></a><span class="fu">ggsave</span>(<span class="st">"figures/spotlight_religious_affiliation_ethnicity.png"</span>, <span class="at">plot=</span>religious_affiliation_ethnicity_plot, <span class="at">width =</span> <span class="dv">8</span>, <span class="at">height =</span> <span class="dv">10</span>, <span class="at">units=</span><span class="fu">c</span>(<span class="st">"in"</span>))</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
|
||||
</div>
|
||||
|
|
@ -411,7 +429,7 @@ So <em>Who’s</em> Religious?
|
|||
<dl class="code-annotation-container-grid">
|
||||
<dt data-target-cell="annotated-cell-9" data-target-annotation="1">1</dt>
|
||||
<dd>
|
||||
<span data-code-cell="annotated-cell-9" data-code-annotation="1" data-code-lines="5">Note: we have removed <code>sort = TRUE</code> in the above statement as it will enforce sorting the data by quantities rather than the factor order. It wouldn’t really make sense to plot this chart in the order of response.</span>
|
||||
<span data-code-cell="annotated-cell-9" data-code-lines="5" data-code-annotation="1">Note: we have removed <code>sort = TRUE</code> in the above statement as it will enforce sorting the data by quantities rather than the factor order. It wouldn’t really make sense to plot this chart in the order of response.</span>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
|
|
@ -429,22 +447,26 @@ So <em>Who’s</em> Religious?
|
|||
<dl class="code-annotation-container-grid">
|
||||
<dt data-target-cell="annotated-cell-10" data-target-annotation="1">1</dt>
|
||||
<dd>
|
||||
<span data-code-cell="annotated-cell-10" data-code-annotation="1" data-code-lines="3">We’ve added colors, because colours are fun.</span>
|
||||
<span data-code-cell="annotated-cell-10" data-code-lines="3" data-code-annotation="1">We’ve added colors, because colours are fun.</span>
|
||||
</dd>
|
||||
<dt data-target-cell="annotated-cell-10" data-target-annotation="2">2</dt>
|
||||
<dd>
|
||||
<span data-code-cell="annotated-cell-10" data-code-annotation="2" data-code-lines="5">Also new here is <code>coord_flip</code> to rotate the chart so we have bars going horizontally</span>
|
||||
<span data-code-cell="annotated-cell-10" data-code-lines="5" data-code-annotation="2">Also new here is <code>coord_flip</code> to rotate the chart so we have bars going horizontally</span>
|
||||
</dd>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="cell-output-display">
|
||||
<p><img src="chapter_2_files/figure-html/unnamed-chunk-8-1.png" class="img-fluid" width="672"></p>
|
||||
<div>
|
||||
<figure class="figure">
|
||||
<p><img src="chapter_2_files/figure-html/unnamed-chunk-8-1.png" class="img-fluid figure-img" width="672"></p>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<section id="quick-excursus-making-things-pretty-with-themes" class="level2 page-columns page-full" data-number="7.1">
|
||||
<h2 data-number="7.1" class="anchored" data-anchor-id="quick-excursus-making-things-pretty-with-themes"><span class="header-section-number">7.1</span> Quick excursus: making things pretty with themes</h2>
|
||||
<p>Since we’re thinking about how things look just now, let’s play with themes for a minute. <code>ggplot</code> is a really powerful tool for visualising information, but it also has some quite nice features for making things look pretty.</p>
|
||||
<div class="page-columns page-full"><p></p><div class="no-row-height column-margin column-container"><span class="">If you’d like to take a proper deep dive on all this theme stuff, R-Charts has a great set of examples showing you how a number of different theme packages look in practice, <a href="https://r-charts.com/ggplot2/themes/">“R-Charts on Themes”</a>.</span></div></div>
|
||||
<div class="page-columns page-full"><p></p><div class="no-row-height column-margin column-container"><span class="margin-aside">If you’d like to take a proper deep dive on all this theme stuff, R-Charts has a great set of examples showing you how a number of different theme packages look in practice, <a href="https://r-charts.com/ggplot2/themes/">“R-Charts on Themes”</a>.</span></div></div>
|
||||
<p>R has a number of built-in themes, but these are mostly driven by functional concerns, such as whether you might want to print your chart or have a less heavy look overall. So for example you might use <code>theme_light()</code> in the following way:</p>
|
||||
<div class="cell">
|
||||
<div class="sourceCode cell-code" id="annotated-cell-11"><pre class="sourceCode r code-annotation-code code-with-copy"><code class="sourceCode r"><span id="annotated-cell-11-1"><a href="#annotated-cell-11-1" aria-hidden="true" tabindex="-1"></a><span class="fu">ggplot</span>(religiosity_sums, <span class="fu">aes</span>(<span class="at">x =</span> response, <span class="at">y =</span> n, <span class="at">color=</span>response)) <span class="sc">+</span></span>
|
||||
|
|
@ -455,7 +477,11 @@ So <em>Who’s</em> Religious?
|
|||
<span id="annotated-cell-11-6"><a href="#annotated-cell-11-6" aria-hidden="true" tabindex="-1"></a> <span class="fu">labs</span>(<span class="at">caption =</span> caption) <span class="sc">+</span></span>
|
||||
<span id="annotated-cell-11-7"><a href="#annotated-cell-11-7" aria-hidden="true" tabindex="-1"></a> <span class="fu">theme_light</span>()</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
|
||||
<div class="cell-output-display">
|
||||
<p><img src="chapter_2_files/figure-html/unnamed-chunk-9-1.png" class="img-fluid" width="672"></p>
|
||||
<div>
|
||||
<figure class="figure">
|
||||
<p><img src="chapter_2_files/figure-html/unnamed-chunk-9-1.png" class="img-fluid figure-img" width="672"></p>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p>You can also use additional packages like <code>ggthemes()</code> or <code>hrbrthemes()</code> so for example we might want to try the <code>pander</code> theme which has it’s own special (and very cheerful) colour palette.</p>
|
||||
|
|
@ -465,7 +491,11 @@ So <em>Who’s</em> Religious?
|
|||
<span id="cb8-3"><a href="#cb8-3" aria-hidden="true" tabindex="-1"></a> <span class="fu">theme_pander</span>() <span class="sc">+</span></span>
|
||||
<span id="cb8-4"><a href="#cb8-4" aria-hidden="true" tabindex="-1"></a> <span class="fu">scale_fill_pander</span>()</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
|
||||
<div class="cell-output-display">
|
||||
<p><img src="chapter_2_files/figure-html/unnamed-chunk-10-1.png" class="img-fluid" width="672"></p>
|
||||
<div>
|
||||
<figure class="figure">
|
||||
<p><img src="chapter_2_files/figure-html/unnamed-chunk-10-1.png" class="img-fluid figure-img" width="672"></p>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p>Or, you might try the well-crafted typgraphy from <code>hbrthemes</code> in the <code>theme_ipsum_pub</code> theme:</p>
|
||||
|
|
@ -476,12 +506,16 @@ So <em>Who’s</em> Religious?
|
|||
<span id="cb9-3"><a href="#cb9-3" aria-hidden="true" tabindex="-1"></a> <span class="fu">theme_ipsum_pub</span>() <span class="sc">+</span></span>
|
||||
<span id="cb9-4"><a href="#cb9-4" aria-hidden="true" tabindex="-1"></a> <span class="fu">scale_fill_pander</span>()</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
|
||||
<div class="cell-output-display">
|
||||
<p><img src="chapter_2_files/figure-html/unnamed-chunk-11-1.png" class="img-fluid" width="672"></p>
|
||||
<div>
|
||||
<figure class="figure">
|
||||
<p><img src="chapter_2_files/figure-html/unnamed-chunk-11-1.png" class="img-fluid figure-img" width="672"></p>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</section>
|
||||
<section id="spirituality-1" class="level1" data-number="8">
|
||||
<section id="spirituality-1" class="level1 page-columns page-full" data-number="8">
|
||||
<h1 data-number="8"><span class="header-section-number">8</span> Spirituality</h1>
|
||||
<p>We’re going to come back to this data around religiosity, but let’s set it to one side for a moment and build up a visualisation of an adjacent measure we used in this study which focussed on spirituality.</p>
|
||||
<div class="callout callout-style-default callout-tip callout-titled">
|
||||
|
|
@ -515,16 +549,14 @@ Statistics 101: Statistical Mean
|
|||
</div>
|
||||
</div>
|
||||
<div class="cell">
|
||||
<div class="sourceCode cell-code" id="cb10"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb10-1"><a href="#cb10-1" aria-hidden="true" tabindex="-1"></a><span class="do">### Spirituality scale --------------------------------------------------------------</span></span>
|
||||
<span id="cb10-2"><a href="#cb10-2" aria-hidden="true" tabindex="-1"></a><span class="co"># Calculate overall mean spirituality score based on six questions:</span></span>
|
||||
<span id="cb10-3"><a href="#cb10-3" aria-hidden="true" tabindex="-1"></a>climate_experience_data<span class="sc">$</span>spirituality_score <span class="ot"><-</span> <span class="fu">rowMeans</span>(<span class="fu">select</span>(climate_experience_data, Q52a_1<span class="sc">:</span>Q52f_1))</span>
|
||||
<span id="cb10-4"><a href="#cb10-4" aria-hidden="true" tabindex="-1"></a><span class="co"># Calculate overall mean nature relatedness score based on six questions:</span></span>
|
||||
<span id="cb10-5"><a href="#cb10-5" aria-hidden="true" tabindex="-1"></a>climate_experience_data<span class="sc">$</span>Q51_score <span class="ot"><-</span> <span class="fu">rowMeans</span>(<span class="fu">select</span>(climate_experience_data, Q51_heritage<span class="sc">:</span>Q51_remote_vacation))</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
|
||||
<div class="sourceCode cell-code" id="cb10"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb10-1"><a href="#cb10-1" aria-hidden="true" tabindex="-1"></a><span class="co"># Calculate overall mean spirituality score based on six questions:</span></span>
|
||||
<span id="cb10-2"><a href="#cb10-2" aria-hidden="true" tabindex="-1"></a>climate_experience_data<span class="sc">$</span>spirituality_score <span class="ot"><-</span> <span class="fu">rowMeans</span>(<span class="fu">select</span>(climate_experience_data, Q52a_1<span class="sc">:</span>Q52f_1))</span>
|
||||
<span id="cb10-3"><a href="#cb10-3" aria-hidden="true" tabindex="-1"></a><span class="co"># Calculate overall mean nature relatedness score based on six questions:</span></span>
|
||||
<span id="cb10-4"><a href="#cb10-4" aria-hidden="true" tabindex="-1"></a>climate_experience_data<span class="sc">$</span>Q51_score <span class="ot"><-</span> <span class="fu">rowMeans</span>(<span class="fu">select</span>(climate_experience_data, Q51_heritage<span class="sc">:</span>Q51_remote_vacation))</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
|
||||
</div>
|
||||
<p>Like we did in chapter 1, let’s start by exploring the data and get a bit of a sense of the character of the responses overall. One good place to start is to find out the mean response for our two continum questions. We can start with religiosity:</p>
|
||||
<div class="cell">
|
||||
<div class="sourceCode cell-code" id="cb11"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb11-1"><a href="#cb11-1" aria-hidden="true" tabindex="-1"></a><span class="do">### Calculating mean --------------------------------------------------------------</span></span>
|
||||
<span id="cb11-2"><a href="#cb11-2" aria-hidden="true" tabindex="-1"></a><span class="fu">mean</span>(climate_experience_data<span class="sc">$</span>Q57_1)</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
|
||||
<div class="sourceCode cell-code" id="cb11"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb11-1"><a href="#cb11-1" aria-hidden="true" tabindex="-1"></a><span class="fu">mean</span>(climate_experience_data<span class="sc">$</span>Q57_1)</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
|
||||
<div class="cell-output cell-output-stdout">
|
||||
<pre><code>[1] 5.581349</code></pre>
|
||||
</div>
|
||||
|
|
@ -540,12 +572,15 @@ Statistics 101: Statistical Mean
|
|||
<p>This is quite a blunt measure, telling us how the whole average of all the responses compares in each case. But what is the relationship between these two measures for each individual? To find out more about this, we need to explore the correlation between points. We’ll talk about correlation analysis in a little bit, but I think it can be helpful to get ourselves back to thinking about our data as consisting of hundreds of tiny points all of which relate to a specific person who provided a range of responses.</p>
|
||||
<p>Now let’s try out some visualisations, staring with the religiosity data.</p>
|
||||
<div class="cell">
|
||||
<div class="sourceCode cell-code" id="cb15"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb15-1"><a href="#cb15-1" aria-hidden="true" tabindex="-1"></a><span class="do">### Plotting religiosity --------------------------------------------------------------</span></span>
|
||||
<span id="cb15-2"><a href="#cb15-2" aria-hidden="true" tabindex="-1"></a><span class="fu">ggplot</span>(climate_experience_data, <span class="fu">aes</span>(<span class="at">x =</span> <span class="dv">1</span>, <span class="at">y =</span> Q57_1)) <span class="sc">+</span></span>
|
||||
<span id="cb15-3"><a href="#cb15-3" aria-hidden="true" tabindex="-1"></a> <span class="fu">geom_point</span>() <span class="sc">+</span></span>
|
||||
<span id="cb15-4"><a href="#cb15-4" aria-hidden="true" tabindex="-1"></a> <span class="fu">labs</span>(<span class="at">x =</span> <span class="cn">NULL</span>, <span class="at">y =</span> <span class="st">"Q57_1"</span>)</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
|
||||
<div class="sourceCode cell-code" id="cb15"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb15-1"><a href="#cb15-1" aria-hidden="true" tabindex="-1"></a><span class="fu">ggplot</span>(climate_experience_data, <span class="fu">aes</span>(<span class="at">x =</span> <span class="dv">1</span>, <span class="at">y =</span> Q57_1)) <span class="sc">+</span></span>
|
||||
<span id="cb15-2"><a href="#cb15-2" aria-hidden="true" tabindex="-1"></a> <span class="fu">geom_point</span>() <span class="sc">+</span></span>
|
||||
<span id="cb15-3"><a href="#cb15-3" aria-hidden="true" tabindex="-1"></a> <span class="fu">labs</span>(<span class="at">x =</span> <span class="cn">NULL</span>, <span class="at">y =</span> <span class="st">"Q57_1"</span>)</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
|
||||
<div class="cell-output-display">
|
||||
<p><img src="chapter_2_files/figure-html/unnamed-chunk-15-1.png" class="img-fluid" width="672"></p>
|
||||
<div>
|
||||
<figure class="figure">
|
||||
<p><img src="chapter_2_files/figure-html/unnamed-chunk-15-1.png" class="img-fluid figure-img" width="672"></p>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p>This is pretty disappointing, as ggplot doesn’t know what to do with the x-axis as our points are 1-dimensional, e.g. they only have one value. But it’s easy to fix! You can ask R to add random numbers for the x-axis so that we can see more of the dots and they aren’t overlapping. This is called jitter:</p>
|
||||
|
|
@ -554,17 +589,26 @@ Statistics 101: Statistical Mean
|
|||
<span id="cb16-2"><a href="#cb16-2" aria-hidden="true" tabindex="-1"></a> <span class="fu">geom_point</span>(<span class="at">position =</span> <span class="fu">position_jitter</span>(<span class="at">width =</span> <span class="fl">0.1</span>)) <span class="sc">+</span></span>
|
||||
<span id="cb16-3"><a href="#cb16-3" aria-hidden="true" tabindex="-1"></a> <span class="fu">labs</span>(<span class="at">x =</span> <span class="cn">NULL</span>, <span class="at">y =</span> <span class="st">"Q57_1"</span>) <span class="sc">+</span> <span class="fu">theme</span>(<span class="at">axis.text.x =</span> <span class="fu">element_blank</span>())</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
|
||||
<div class="cell-output-display">
|
||||
<p><img src="chapter_2_files/figure-html/unnamed-chunk-16-1.png" class="img-fluid" width="672"></p>
|
||||
<div>
|
||||
<figure class="figure">
|
||||
<p><img src="chapter_2_files/figure-html/unnamed-chunk-16-1.png" class="img-fluid figure-img" width="672"></p>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p>You’ll also notice that we’ve hidden the x-axis value labels as these are just random numbers and not really something we want to draw attention to. We’ve also hidden the label for that axis.</p>
|
||||
<p>This is visually pretty chaotic, but you can see probably see some places where the dots are thicker and get the sense that there are more in the top than the bottom.</p>
|
||||
<p>Since this is quite a large plot, I’d recommend going one step further and making the dots a bit smaller, and a bit transparent (this is called “alpha” in R). The advantage of this is that we’ll be able to tell visually when dots are overlapping and register that there is a cluster. When they’re all the same black color, this is impossible to tell.</p>
|
||||
<div class="cell">
|
||||
<div class="sourceCode cell-code" id="cb17"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb17-1"><a href="#cb17-1" aria-hidden="true" tabindex="-1"></a><span class="fu">ggplot</span>(climate_experience_data, <span class="fu">aes</span>(<span class="at">x =</span> <span class="dv">1</span>, <span class="at">y =</span> Q57_1)) <span class="sc">+</span></span>
|
||||
<span id="cb17-2"><a href="#cb17-2" aria-hidden="true" tabindex="-1"></a> <span class="fu">geom_point</span>(<span class="at">position =</span> <span class="fu">position_jitter</span>(<span class="at">width =</span> <span class="dv">1</span>), <span class="at">color=</span><span class="st">"black"</span>, <span class="at">size=</span><span class="fl">0.5</span>, <span class="at">alpha=</span><span class="fl">0.3</span>) <span class="sc">+</span></span>
|
||||
<span id="cb17-2"><a href="#cb17-2" aria-hidden="true" tabindex="-1"></a> <span class="fu">geom_point</span>(<span class="at">position =</span> <span class="fu">position_jitter</span>(<span class="at">width =</span> <span class="dv">1</span>), <span class="at">color=</span><span class="st">"black"</span>, <span class="at">size=</span><span class="fl">1.5</span>, <span class="at">alpha=</span><span class="fl">0.3</span>) <span class="sc">+</span></span>
|
||||
<span id="cb17-3"><a href="#cb17-3" aria-hidden="true" tabindex="-1"></a> <span class="fu">labs</span>(<span class="at">x =</span> <span class="cn">NULL</span>, <span class="at">y =</span> <span class="st">"Q57_1"</span>) <span class="sc">+</span> <span class="fu">theme</span>(<span class="at">axis.text.x =</span> <span class="fu">element_blank</span>())</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
|
||||
<div class="cell-output-display">
|
||||
<p><img src="chapter_2_files/figure-html/unnamed-chunk-17-1.png" class="img-fluid" width="672"></p>
|
||||
<div>
|
||||
<figure class="figure">
|
||||
<p><img src="chapter_2_files/figure-html/unnamed-chunk-17-1.png" class="img-fluid figure-img" width="672"></p>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p>That’s a bit better. And we can start to see the weight of points hovering just over a value of 5, which aligns with our observation of the overall mean for this column of data a bit earlier in the exercise. But let’s say we’d like to be able to see this in an even more explicit way using a modification of the jitterplot with additional visual elements showing us where the mean is located. One example of this is called a boxplot:</p>
|
||||
|
|
@ -573,7 +617,11 @@ Statistics 101: Statistical Mean
|
|||
<span id="cb18-2"><a href="#cb18-2" aria-hidden="true" tabindex="-1"></a> <span class="fu">geom_boxplot</span>(<span class="at">color =</span> <span class="st">"black"</span>, <span class="at">fill =</span> <span class="st">"lightblue"</span>, <span class="at">alpha =</span> <span class="fl">0.7</span>) <span class="sc">+</span></span>
|
||||
<span id="cb18-3"><a href="#cb18-3" aria-hidden="true" tabindex="-1"></a> <span class="fu">labs</span>(<span class="at">x =</span> <span class="cn">NULL</span>, <span class="at">y =</span> <span class="st">"Q57_1"</span>) <span class="sc">+</span> <span class="fu">coord_flip</span>() <span class="sc">+</span> <span class="fu">theme</span>(<span class="at">axis.text.y =</span> <span class="fu">element_blank</span>())</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
|
||||
<div class="cell-output-display">
|
||||
<p><img src="chapter_2_files/figure-html/unnamed-chunk-18-1.png" class="img-fluid" width="672"></p>
|
||||
<div>
|
||||
<figure class="figure">
|
||||
<p><img src="chapter_2_files/figure-html/unnamed-chunk-18-1.png" class="img-fluid figure-img" width="672"></p>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p>I’ve flipped this chart on its side using <code>coord_flip()</code> because I just feel like these plot are easier to read from left to right. I also needed to adjust the concealment of labels to the y-axis.</p>
|
||||
|
|
@ -602,7 +650,11 @@ Statistics 101: Range and getting into Quartiles, Quintiles, Deciles etc.
|
|||
<span id="cb19-4"><a href="#cb19-4" aria-hidden="true" tabindex="-1"></a> <span class="fu">labs</span>(<span class="at">x =</span> <span class="cn">NULL</span>, <span class="at">y =</span> <span class="st">"Q57_1"</span>) <span class="sc">+</span> <span class="fu">theme_ipsum</span>() <span class="sc">+</span></span>
|
||||
<span id="cb19-5"><a href="#cb19-5" aria-hidden="true" tabindex="-1"></a> <span class="fu">theme</span>(<span class="at">axis.text.y =</span> <span class="fu">element_blank</span>()) <span class="sc">+</span> <span class="fu">coord_flip</span>()</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
|
||||
<div class="cell-output-display">
|
||||
<p><img src="chapter_2_files/figure-html/unnamed-chunk-19-1.png" class="img-fluid" width="672"></p>
|
||||
<div>
|
||||
<figure class="figure">
|
||||
<p><img src="chapter_2_files/figure-html/unnamed-chunk-19-1.png" class="img-fluid figure-img" width="672"></p>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p>Let’s set the religiosity data to one side and look at the spirituality scale data. I’ve mentioned before that this dataset takes a set of six questions and then averages them out. It might be useful to start out by visualising each of these six separately, sticking with our jittered points-on-boxplot format for the sake of exploration. Let’s start by gathering our data:</p>
|
||||
|
|
@ -644,7 +696,11 @@ dropped</code></pre>
|
|||
<span id="cb24-10"><a href="#cb24-10" aria-hidden="true" tabindex="-1"></a> <span class="fu">ylab</span>(<span class="st">"Spirituality scales"</span>) <span class="sc">+</span></span>
|
||||
<span id="cb24-11"><a href="#cb24-11" aria-hidden="true" tabindex="-1"></a> <span class="fu">scale_x_discrete</span>(<span class="at">labels =</span> <span class="cf">function</span>(x) <span class="fu">str_wrap</span>(x, <span class="at">width =</span> <span class="dv">45</span>))</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
|
||||
<div class="cell-output-display">
|
||||
<p><img src="chapter_2_files/figure-html/unnamed-chunk-22-1.png" class="img-fluid" width="672"></p>
|
||||
<div>
|
||||
<figure class="figure">
|
||||
<p><img src="chapter_2_files/figure-html/unnamed-chunk-22-1.png" class="img-fluid figure-img" width="672"></p>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cell">
|
||||
|
|
@ -663,10 +719,15 @@ dropped</code></pre>
|
|||
<pre><code>`geom_smooth()` using method = 'gam' and formula = 'y ~ s(x, bs = "cs")'</code></pre>
|
||||
</div>
|
||||
<div class="cell-output-display">
|
||||
<p><img src="chapter_2_files/figure-html/unnamed-chunk-24-1.png" class="img-fluid" width="672"></p>
|
||||
<div>
|
||||
<figure class="figure">
|
||||
<p><img src="chapter_2_files/figure-html/unnamed-chunk-24-1.png" class="img-fluid figure-img" width="672"></p>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p>It may be helpful to add a few more visual elements to help someone understand this data. Let’s try adding a density plot:</p>
|
||||
<div class="page-columns page-full"><p></p><div class="no-row-height column-margin column-container"><span class="margin-aside">If you’d like to explore a wider range of correlation plots, you might want to check out Data Analysis and Visualization in R Using smplot2, <a href="https://smin95.github.io/dataviz/basics-of-ggplot2-and-correlation-plot.html">“data import”</a>.</span></div></div>
|
||||
<div class="cell">
|
||||
<div class="sourceCode cell-code" id="cb28"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb28-1"><a href="#cb28-1" aria-hidden="true" tabindex="-1"></a><span class="fu">library</span>(ggExtra)</span>
|
||||
<span id="cb28-2"><a href="#cb28-2" aria-hidden="true" tabindex="-1"></a>p <span class="ot"><-</span> <span class="fu">ggplot</span>(climate_experience_data, <span class="fu">aes</span>(<span class="at">x =</span> spirituality_score, <span class="at">y =</span> Q57_1)) <span class="sc">+</span></span>
|
||||
|
|
@ -677,7 +738,11 @@ dropped</code></pre>
|
|||
<span id="cb28-7"><a href="#cb28-7" aria-hidden="true" tabindex="-1"></a>p_with_density <span class="ot"><-</span> <span class="fu">ggMarginal</span>(p, <span class="at">type =</span> <span class="st">"histogram"</span>)</span>
|
||||
<span id="cb28-8"><a href="#cb28-8" aria-hidden="true" tabindex="-1"></a>p_with_density</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
|
||||
<div class="cell-output-display">
|
||||
<p><img src="chapter_2_files/figure-html/unnamed-chunk-25-1.png" class="img-fluid" width="672"></p>
|
||||
<div>
|
||||
<figure class="figure">
|
||||
<p><img src="chapter_2_files/figure-html/unnamed-chunk-25-1.png" class="img-fluid figure-img" width="672"></p>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p>As an alternative we can view this as a heatmap:</p>
|
||||
|
|
@ -692,7 +757,11 @@ dropped</code></pre>
|
|||
ℹ Please use `after_stat(level)` instead.</code></pre>
|
||||
</div>
|
||||
<div class="cell-output-display">
|
||||
<p><img src="chapter_2_files/figure-html/unnamed-chunk-26-1.png" class="img-fluid" width="672"></p>
|
||||
<div>
|
||||
<figure class="figure">
|
||||
<p><img src="chapter_2_files/figure-html/unnamed-chunk-26-1.png" class="img-fluid figure-img" width="672"></p>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -923,7 +992,11 @@ Statistics 101: Standard Deviation
|
|||
<span id="cb57-27"><a href="#cb57-27" aria-hidden="true" tabindex="-1"></a> <span class="fu">guides</span>(<span class="at">fill =</span> <span class="fu">guide_legend</span>(<span class="at">title =</span> <span class="cn">NULL</span>)) <span class="sc">+</span></span>
|
||||
<span id="cb57-28"><a href="#cb57-28" aria-hidden="true" tabindex="-1"></a> <span class="fu">coord_flip</span>() <span class="co"># [4]</span></span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
|
||||
<div class="cell-output-display">
|
||||
<p><img src="chapter_2_files/figure-html/unnamed-chunk-38-1.png" class="img-fluid" width="672"></p>
|
||||
<div>
|
||||
<figure class="figure">
|
||||
<p><img src="chapter_2_files/figure-html/unnamed-chunk-38-1.png" class="img-fluid figure-img" width="672"></p>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<ol type="1">
|
||||
|
|
@ -964,7 +1037,11 @@ Use mutate to put "prefer not to say" at the bottom
|
|||
<span id="cb58-23"><a href="#cb58-23" aria-hidden="true" tabindex="-1"></a> <span class="fu">guides</span>(<span class="at">fill =</span> <span class="fu">guide_legend</span>(<span class="at">title =</span> <span class="cn">NULL</span>)) <span class="sc">+</span></span>
|
||||
<span id="cb58-24"><a href="#cb58-24" aria-hidden="true" tabindex="-1"></a> <span class="fu">coord_flip</span>() </span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
|
||||
<div class="cell-output-display">
|
||||
<p><img src="chapter_2_files/figure-html/unnamed-chunk-39-1.png" class="img-fluid" width="672"></p>
|
||||
<div>
|
||||
<figure class="figure">
|
||||
<p><img src="chapter_2_files/figure-html/unnamed-chunk-39-1.png" class="img-fluid figure-img" width="672"></p>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -1051,10 +1128,9 @@ window.document.addEventListener("DOMContentLoaded", function (event) {
|
|||
// clear code selection
|
||||
e.clearSelection();
|
||||
});
|
||||
function tippyHover(el, contentFn) {
|
||||
function tippyHover(el, contentFn, onTriggerFn, onUntriggerFn) {
|
||||
const config = {
|
||||
allowHTML: true,
|
||||
content: contentFn,
|
||||
maxWidth: 500,
|
||||
delay: 100,
|
||||
arrow: false,
|
||||
|
|
@ -1064,8 +1140,17 @@ window.document.addEventListener("DOMContentLoaded", function (event) {
|
|||
interactive: true,
|
||||
interactiveBorder: 10,
|
||||
theme: 'quarto',
|
||||
placement: 'bottom-start'
|
||||
placement: 'bottom-start',
|
||||
};
|
||||
if (contentFn) {
|
||||
config.content = contentFn;
|
||||
}
|
||||
if (onTriggerFn) {
|
||||
config.onTrigger = onTriggerFn;
|
||||
}
|
||||
if (onUntriggerFn) {
|
||||
config.onUntrigger = onUntriggerFn;
|
||||
}
|
||||
window.tippy(el, config);
|
||||
}
|
||||
const noterefs = window.document.querySelectorAll('a[role="doc-noteref"]');
|
||||
|
|
@ -1079,6 +1164,125 @@ window.document.addEventListener("DOMContentLoaded", function (event) {
|
|||
const note = window.document.getElementById(id);
|
||||
return note.innerHTML;
|
||||
});
|
||||
}
|
||||
const xrefs = window.document.querySelectorAll('a.quarto-xref');
|
||||
const processXRef = (id, note) => {
|
||||
// Strip column container classes
|
||||
const stripColumnClz = (el) => {
|
||||
el.classList.remove("page-full", "page-columns");
|
||||
if (el.children) {
|
||||
for (const child of el.children) {
|
||||
stripColumnClz(child);
|
||||
}
|
||||
}
|
||||
}
|
||||
stripColumnClz(note)
|
||||
if (id === null || id.startsWith('sec-')) {
|
||||
// Special case sections, only their first couple elements
|
||||
const container = document.createElement("div");
|
||||
if (note.children && note.children.length > 2) {
|
||||
container.appendChild(note.children[0].cloneNode(true));
|
||||
for (let i = 1; i < note.children.length; i++) {
|
||||
const child = note.children[i];
|
||||
if (child.tagName === "P" && child.innerText === "") {
|
||||
continue;
|
||||
} else {
|
||||
container.appendChild(child.cloneNode(true));
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (window.Quarto?.typesetMath) {
|
||||
window.Quarto.typesetMath(container);
|
||||
}
|
||||
return container.innerHTML
|
||||
} else {
|
||||
if (window.Quarto?.typesetMath) {
|
||||
window.Quarto.typesetMath(note);
|
||||
}
|
||||
return note.innerHTML;
|
||||
}
|
||||
} else {
|
||||
// Remove any anchor links if they are present
|
||||
const anchorLink = note.querySelector('a.anchorjs-link');
|
||||
if (anchorLink) {
|
||||
anchorLink.remove();
|
||||
}
|
||||
if (window.Quarto?.typesetMath) {
|
||||
window.Quarto.typesetMath(note);
|
||||
}
|
||||
// TODO in 1.5, we should make sure this works without a callout special case
|
||||
if (note.classList.contains("callout")) {
|
||||
return note.outerHTML;
|
||||
} else {
|
||||
return note.innerHTML;
|
||||
}
|
||||
}
|
||||
}
|
||||
for (var i=0; i<xrefs.length; i++) {
|
||||
const xref = xrefs[i];
|
||||
tippyHover(xref, undefined, function(instance) {
|
||||
instance.disable();
|
||||
let url = xref.getAttribute('href');
|
||||
let hash = undefined;
|
||||
if (url.startsWith('#')) {
|
||||
hash = url;
|
||||
} else {
|
||||
try { hash = new URL(url).hash; } catch {}
|
||||
}
|
||||
if (hash) {
|
||||
const id = hash.replace(/^#\/?/, "");
|
||||
const note = window.document.getElementById(id);
|
||||
if (note !== null) {
|
||||
try {
|
||||
const html = processXRef(id, note.cloneNode(true));
|
||||
instance.setContent(html);
|
||||
} finally {
|
||||
instance.enable();
|
||||
instance.show();
|
||||
}
|
||||
} else {
|
||||
// See if we can fetch this
|
||||
fetch(url.split('#')[0])
|
||||
.then(res => res.text())
|
||||
.then(html => {
|
||||
const parser = new DOMParser();
|
||||
const htmlDoc = parser.parseFromString(html, "text/html");
|
||||
const note = htmlDoc.getElementById(id);
|
||||
if (note !== null) {
|
||||
const html = processXRef(id, note);
|
||||
instance.setContent(html);
|
||||
}
|
||||
}).finally(() => {
|
||||
instance.enable();
|
||||
instance.show();
|
||||
});
|
||||
}
|
||||
} else {
|
||||
// See if we can fetch a full url (with no hash to target)
|
||||
// This is a special case and we should probably do some content thinning / targeting
|
||||
fetch(url)
|
||||
.then(res => res.text())
|
||||
.then(html => {
|
||||
const parser = new DOMParser();
|
||||
const htmlDoc = parser.parseFromString(html, "text/html");
|
||||
const note = htmlDoc.querySelector('main.content');
|
||||
if (note !== null) {
|
||||
// This should only happen for chapter cross references
|
||||
// (since there is no id in the URL)
|
||||
// remove the first header
|
||||
if (note.children.length > 0 && note.children[0].tagName === "HEADER") {
|
||||
note.children[0].remove();
|
||||
}
|
||||
const html = processXRef(null, note);
|
||||
instance.setContent(html);
|
||||
}
|
||||
}).finally(() => {
|
||||
instance.enable();
|
||||
instance.show();
|
||||
});
|
||||
}
|
||||
}, function(instance) {
|
||||
});
|
||||
}
|
||||
let selectedAnnoteEl;
|
||||
const selectorForAnnotation = ( cell, annotation) => {
|
||||
|
|
@ -1121,6 +1325,7 @@ window.document.addEventListener("DOMContentLoaded", function (event) {
|
|||
}
|
||||
div.style.top = top - 2 + "px";
|
||||
div.style.height = height + 4 + "px";
|
||||
div.style.left = 0;
|
||||
let gutterDiv = window.document.getElementById("code-annotation-line-highlight-gutter");
|
||||
if (gutterDiv === null) {
|
||||
gutterDiv = window.document.createElement("div");
|
||||
|
|
@ -1146,6 +1351,32 @@ window.document.addEventListener("DOMContentLoaded", function (event) {
|
|||
});
|
||||
selectedAnnoteEl = undefined;
|
||||
};
|
||||
// Handle positioning of the toggle
|
||||
window.addEventListener(
|
||||
"resize",
|
||||
throttle(() => {
|
||||
elRect = undefined;
|
||||
if (selectedAnnoteEl) {
|
||||
selectCodeLines(selectedAnnoteEl);
|
||||
}
|
||||
}, 10)
|
||||
);
|
||||
function throttle(fn, ms) {
|
||||
let throttle = false;
|
||||
let timer;
|
||||
return (...args) => {
|
||||
if(!throttle) { // first call gets through
|
||||
fn.apply(this, args);
|
||||
throttle = true;
|
||||
} else { // all the others get throttled
|
||||
if(timer) clearTimeout(timer); // cancel #2
|
||||
timer = setTimeout(() => {
|
||||
fn.apply(this, args);
|
||||
timer = throttle = false;
|
||||
}, ms);
|
||||
}
|
||||
};
|
||||
}
|
||||
// Attach click handler to the DT
|
||||
const annoteDls = window.document.querySelectorAll('dt[data-target-cell]');
|
||||
for (const annoteDlNode of annoteDls) {
|
||||
|
|
@ -1205,14 +1436,16 @@ window.document.addEventListener("DOMContentLoaded", function (event) {
|
|||
}
|
||||
});
|
||||
</script>
|
||||
<script src="https://utteranc.es/client.js" repo="kidwellj/hacking_religion_textbook" issue-term="pathname" theme="github-light" crossorigin="anonymous" async="">
|
||||
</script>
|
||||
<nav class="page-navigation">
|
||||
<div class="nav-page nav-page-previous">
|
||||
<a href="./chapter_1.html" class="pagination-link">
|
||||
<a href="./chapter_1.html" class="pagination-link aria-label=" <span="">
|
||||
<i class="bi bi-arrow-left-short"></i> <span class="nav-page-text"><span class="chapter-number">1</span> <span class="chapter-title">Preamble</span></span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="nav-page nav-page-next">
|
||||
<a href="./chapter_3.html" class="pagination-link">
|
||||
<a href="./chapter_3.html" class="pagination-link" aria-label="<span class='chapter-number'>3</span> <span class='chapter-title'>Mapping churches: geospatial data science</span>">
|
||||
<span class="nav-page-text"><span class="chapter-number">3</span> <span class="chapter-title">Mapping churches: geospatial data science</span></span> <i class="bi bi-arrow-right-short"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -1221,4 +1454,5 @@ window.document.addEventListener("DOMContentLoaded", function (event) {
|
|||
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
Loading…
Add table
Add a link
Reference in a new issue