kidwellj/hacking_religion_textbook
1
0
Fork 0
mirror of https://github.com/kidwellj/hacking_religion_textbook.git synced 2024-11-01 09:22:21 +00:00
Code Issues Packages Projects Releases Wiki Activity
hacking_religion_textbook/hacking_religion/_book/chapter_1.html
Jeremy Kidwell ca7b5ae7fc updated render
2023-10-03 20:27:32 +01:00

918 lines
52 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<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.450">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<title>Hacking Religion: TRS &amp; Data Science in Action - 2&nbsp; The 2021 UK Census</title>
<style>
code{white-space: pre-wrap;}
span.smallcaps{font-variant: small-caps;}
div.columns{display: flex; gap: min(4vw, 1.5em);}
div.column{flex: auto; overflow-x: auto;}
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
ul.task-list{list-style: none;}
ul.task-list li input[type="checkbox"] {
width: 0.8em;
margin: 0 0.8em 0.2em -1em; /* quarto-specific, see https://github.com/quarto-dev/quarto-cli/issues/4556 */
vertical-align: middle;
}
/* 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:empty { height: 1.2em; }
.sourceCode { overflow: visible; }
code.sourceCode > span { color: inherit; text-decoration: inherit; }
div.sourceCode { margin: 1em 0; }
pre.sourceCode { margin: 0; }
@media screen {
div.sourceCode { overflow: auto; }
}
@media print {
pre > code.sourceCode { white-space: pre-wrap; }
pre > code.sourceCode > span { text-indent: -5em; padding-left: 5em; }
}
pre.numberSource code
{ counter-reset: source-line 0; }
pre.numberSource code > span
{ position: relative; left: -4em; counter-increment: source-line; }
pre.numberSource code > span > a:first-child::before
{ content: counter(source-line);
position: relative; left: -1em; text-align: right; vertical-align: baseline;
border: none; display: inline-block;
-webkit-touch-callout: none; -webkit-user-select: none;
-khtml-user-select: none; -moz-user-select: none;
-ms-user-select: none; user-select: none;
padding: 0 4px; width: 4em;
}
pre.numberSource { margin-left: 3em; padding-left: 4px; }
div.sourceCode
{ }
@media screen {
pre > code.sourceCode > span > a:first-child::before { text-decoration: underline; }
}
/* CSS for citations */
div.csl-bib-body { }
div.csl-entry {
clear: both;
}
.hanging-indent div.csl-entry {
margin-left:2em;
text-indent:-2em;
}
div.csl-left-margin {
min-width:2em;
float:left;
}
div.csl-right-inline {
margin-left:2em;
padding-left:1em;
}
div.csl-indent {
margin-left: 2em;
}</style>
<script src="site_libs/quarto-nav/quarto-nav.js"></script>
<script src="site_libs/quarto-nav/headroom.min.js"></script>
<script src="site_libs/clipboard/clipboard.min.js"></script>
<script src="site_libs/quarto-search/autocomplete.umd.js"></script>
<script src="site_libs/quarto-search/fuse.min.js"></script>
<script src="site_libs/quarto-search/quarto-search.js"></script>
<meta name="quarto:offset" content="./">
<link href="./chapter_2.html" rel="next">
<link href="./intro.html" rel="prev">
<script src="site_libs/quarto-html/quarto.js"></script>
<script src="site_libs/quarto-html/popper.min.js"></script>
<script src="site_libs/quarto-html/tippy.umd.min.js"></script>
<script src="site_libs/quarto-html/anchor.min.js"></script>
<link href="site_libs/quarto-html/tippy.css" rel="stylesheet">
<link href="site_libs/quarto-html/quarto-syntax-highlighting.css" rel="stylesheet" id="quarto-text-highlighting-styles">
<script src="site_libs/bootstrap/bootstrap.min.js"></script>
<link href="site_libs/bootstrap/bootstrap-icons.css" rel="stylesheet">
<link href="site_libs/bootstrap/bootstrap.min.css" rel="stylesheet" id="quarto-bootstrap" data-mode="light">
<script id="quarto-search-options" type="application/json">{
"location": "sidebar",
"copy-button": false,
"collapse-after": 3,
"panel-placement": "start",
"type": "textbox",
"limit": 20,
"language": {
"search-no-results-text": "No results",
"search-matching-documents-text": "matching documents",
"search-copy-link-title": "Copy link to search",
"search-hide-matches-text": "Hide additional matches",
"search-more-match-text": "more match in this document",
"search-more-matches-text": "more matches in this document",
"search-clear-button-title": "Clear",
"search-detached-cancel-button-title": "Cancel",
"search-submit-button-title": "Submit",
"search-label": "Search"
}
}</script>
</head>
<body class="nav-sidebar floating slimcontent">
<div id="quarto-search-results"></div>
<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(); }">
<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_1.html"><span class="chapter-number">2</span>&nbsp; <span class="chapter-title">The 2021 UK Census</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="" onclick="window.quartoOpenSearch();">
<i class="bi bi-search"></i>
</button>
</div>
</nav>
</header>
<!-- 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">
<div class="pt-lg-2 mt-2 text-left sidebar-header">
<div class="sidebar-title mb-0 py-0">
<a href="./">Hacking Religion: TRS &amp; Data Science in Action</a>
</div>
</div>
<div class="mt-2 flex-shrink-0 align-items-center">
<div class="sidebar-search">
<div id="quarto-search" class="" title="Search"></div>
</div>
</div>
<div class="sidebar-menu-container">
<ul class="list-unstyled mt-1">
<li class="sidebar-item">
<div class="sidebar-item-container">
<a href="./index.html" class="sidebar-item-text sidebar-link">
<span class="menu-text">Preface</span></a>
</div>
</li>
<li class="sidebar-item">
<div class="sidebar-item-container">
<a href="./intro.html" class="sidebar-item-text sidebar-link">
<span class="menu-text"><span class="chapter-number">1</span>&nbsp; <span class="chapter-title">Introduction: Hacking Religion</span></span></a>
</div>
</li>
<li class="sidebar-item">
<div class="sidebar-item-container">
<a href="./chapter_1.html" class="sidebar-item-text sidebar-link active">
<span class="menu-text"><span class="chapter-number">2</span>&nbsp; <span class="chapter-title">The 2021 UK Census</span></span></a>
</div>
</li>
<li class="sidebar-item">
<div class="sidebar-item-container">
<a href="./chapter_2.html" class="sidebar-item-text sidebar-link">
<span class="menu-text"><span class="chapter-number">3</span>&nbsp; <span class="chapter-title">Survey Data: Spotlight Project</span></span></a>
</div>
</li>
<li class="sidebar-item">
<div class="sidebar-item-container">
<a href="./chapter_3.html" class="sidebar-item-text sidebar-link">
<span class="menu-text"><span class="chapter-number">4</span>&nbsp; <span class="chapter-title">Mapping churches: geospatial data science</span></span></a>
</div>
</li>
<li class="sidebar-item">
<div class="sidebar-item-container">
<a href="./chapter_4.html" class="sidebar-item-text sidebar-link">
<span class="menu-text"><span class="chapter-number">5</span>&nbsp; <span class="chapter-title">Data scraping, corpus analysis and wordclouds</span></span></a>
</div>
</li>
<li class="sidebar-item">
<div class="sidebar-item-container">
<a href="./summary.html" class="sidebar-item-text sidebar-link">
<span class="menu-text"><span class="chapter-number">6</span>&nbsp; <span class="chapter-title">Summary</span></span></a>
</div>
</li>
<li class="sidebar-item">
<div class="sidebar-item-container">
<a href="./references.html" class="sidebar-item-text sidebar-link">
<span class="menu-text">References</span></a>
</div>
</li>
</ul>
</div>
</nav>
<div id="quarto-sidebar-glass" data-bs-toggle="collapse" data-bs-target="#quarto-sidebar,#quarto-sidebar-glass"></div>
<!-- margin-sidebar -->
<div id="quarto-margin-sidebar" class="sidebar margin-sidebar">
<nav id="TOC" role="doc-toc" class="toc-active">
<h2 id="toc-title">Table of contents</h2>
<ul>
<li><a href="#your-first-project-building-a-pie-chart" id="toc-your-first-project-building-a-pie-chart" class="nav-link active" data-scroll-target="#your-first-project-building-a-pie-chart"><span class="header-section-number">2.1</span> Your first project: building a pie chart</a>
<ul class="collapse">
<li><a href="#examining-data" id="toc-examining-data" class="nav-link" data-scroll-target="#examining-data"><span class="header-section-number">2.1.1</span> Examining data:</a></li>
<li><a href="#parsing-and-exploring-your-data" id="toc-parsing-and-exploring-your-data" class="nav-link" data-scroll-target="#parsing-and-exploring-your-data"><span class="header-section-number">2.1.2</span> Parsing and Exploring your data</a></li>
</ul></li>
<li><a href="#making-your-first-chart" id="toc-making-your-first-chart" class="nav-link" data-scroll-target="#making-your-first-chart"><span class="header-section-number">2.2</span> Making your first chart</a></li>
<li><a href="#references" id="toc-references" class="nav-link" data-scroll-target="#references">References</a></li>
</ul>
</nav>
</div>
<!-- main -->
<main class="content page-columns page-full" id="quarto-document-content">
<header id="title-block-header" class="quarto-title-block default">
<div class="quarto-title">
<h1 class="title"><span class="chapter-number">2</span>&nbsp; <span class="chapter-title">The 2021 UK Census</span></h1>
</div>
<div class="quarto-title-meta">
</div>
</header>
<section id="your-first-project-building-a-pie-chart" class="level2 page-columns page-full" data-number="2.1">
<h2 data-number="2.1" class="anchored" data-anchor-id="your-first-project-building-a-pie-chart"><span class="header-section-number">2.1</span> Your first project: building a pie chart</h2>
<p>Let’s start by importing some data into R. Because R is what is called an object-oriented programming language, we’ll always take our information and give it a home inside a named object. There are many different kinds of objects, which you can specify, but usually R will assign a type that seems to fit best.</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 explore this all in a bit more depth, you can find a very helpful summary in R for Data Science, chapter 8, <a href="https://r4ds.hadley.nz/data-import#reading-data-from-a-file">“data import”</a>.</span></div></div>
<p>In the example below, we’re going to read in data from a comma separated value file (“csv”) which has rows of information on separate lines in a text file with each column separated by a comma. This is one of the standard plain text file formats. R has a function you can use to import this efficiently called “read.csv”. Each line of code in R usually starts with the object, and then follows with instructions on what we’re going to put inside it, where that comes from, and how to format it:</p>
<div class="cell">
<div class="sourceCode cell-code" id="cb1"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb1-1"><a href="#cb1-1" aria-hidden="true" tabindex="-1"></a><span class="fu">setwd</span>(<span class="st">"/Users/kidwellj/gits/hacking_religion_textbook/hacking_religion"</span>)</span>
<span id="cb1-2"><a href="#cb1-2" aria-hidden="true" tabindex="-1"></a><span class="fu">library</span>(here) <span class="co"># much better way to manage working paths in R across multiple instances</span></span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
<div class="cell-output cell-output-stderr">
<pre><code>here() starts at /Users/kidwellj/gits/hacking_religion_textbook</code></pre>
</div>
<div class="sourceCode cell-code" id="cb3"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb3-1"><a href="#cb3-1" aria-hidden="true" tabindex="-1"></a><span class="fu">library</span>(tidyverse)</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
<div class="cell-output cell-output-stderr">
<pre><code>-- Attaching core tidyverse packages ------------------------ tidyverse 2.0.0 --
v dplyr 1.1.3 v readr 2.1.4
v forcats 1.0.0 v stringr 1.5.0
v ggplot2 3.4.3 v tibble 3.2.1
v lubridate 1.9.3 v tidyr 1.3.0
v purrr 1.0.2 </code></pre>
</div>
<div class="cell-output cell-output-stderr">
<pre><code>-- Conflicts ------------------------------------------ tidyverse_conflicts() --
x dplyr::filter() masks stats::filter()
x dplyr::lag() masks stats::lag()
i Use the conflicted package (&lt;http://conflicted.r-lib.org/&gt;) to force all conflicts to become errors</code></pre>
</div>
<div class="sourceCode cell-code" id="cb6"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb6-1"><a href="#cb6-1" aria-hidden="true" tabindex="-1"></a>here<span class="sc">::</span><span class="fu">i_am</span>(<span class="st">"chapter_1.qmd"</span>)</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
<div class="cell-output cell-output-stderr">
<pre><code>here() starts at /Users/kidwellj/gits/hacking_religion_textbook/hacking_religion</code></pre>
</div>
<div class="sourceCode cell-code" id="cb8"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb8-1"><a href="#cb8-1" aria-hidden="true" tabindex="-1"></a>uk_census_2021_religion <span class="ot">&lt;-</span> <span class="fu">read.csv</span>(<span class="fu">here</span>(<span class="st">"example_data"</span>, <span class="st">"census2021-ts030-rgn.csv"</span>)) </span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
</div>
<section id="examining-data" class="level3" data-number="2.1.1">
<h3 data-number="2.1.1" class="anchored" data-anchor-id="examining-data"><span class="header-section-number">2.1.1</span> Examining data:</h3>
<p>What’s in the table? You can take a quick look at either the top of the data frame, or the bottom using one of the following commands:</p>
<div class="cell">
<div class="sourceCode cell-code" id="cb9"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb9-1"><a href="#cb9-1" aria-hidden="true" tabindex="-1"></a><span class="fu">head</span>(uk_census_2021_religion)</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> geography total no_religion christian buddhist hindu jewish
1 North East 2647012 1058122 1343948 7026 10924 4389
2 North West 7417397 2419624 3895779 23028 49749 33285
3 Yorkshire and The Humber 5480774 2161185 2461519 15803 29243 9355
4 East Midlands 4880054 1950354 2214151 14521 120345 4313
5 West Midlands 5950756 1955003 2770559 18804 88116 4394
6 East 6335072 2544509 2955071 26814 86631 42012
muslim sikh other no_response
1 72102 7206 9950 133345
2 563105 11862 28103 392862
3 442533 24034 23618 313484
4 210766 53950 24813 286841
5 569963 172398 31805 339714
6 234744 24284 36380 384627</code></pre>
</div>
</div>
<p>This is actually a fairly ugly table, so I’ll use an R tool called kable to give you prettier tables in the future, like this:</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>knitr<span class="sc">::</span><span class="fu">kable</span>(<span class="fu">head</span>(uk_census_2021_religion))</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
<div class="cell-output-display">
<table class="table table-sm table-striped small">
<colgroup>
<col style="width: 22%">
<col style="width: 7%">
<col style="width: 10%">
<col style="width: 9%">
<col style="width: 8%">
<col style="width: 6%">
<col style="width: 6%">
<col style="width: 6%">
<col style="width: 6%">
<col style="width: 5%">
<col style="width: 10%">
</colgroup>
<thead>
<tr class="header">
<th style="text-align: left;">geography</th>
<th style="text-align: right;">total</th>
<th style="text-align: right;">no_religion</th>
<th style="text-align: right;">christian</th>
<th style="text-align: right;">buddhist</th>
<th style="text-align: right;">hindu</th>
<th style="text-align: right;">jewish</th>
<th style="text-align: right;">muslim</th>
<th style="text-align: right;">sikh</th>
<th style="text-align: right;">other</th>
<th style="text-align: right;">no_response</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td style="text-align: left;">North East</td>
<td style="text-align: right;">2647012</td>
<td style="text-align: right;">1058122</td>
<td style="text-align: right;">1343948</td>
<td style="text-align: right;">7026</td>
<td style="text-align: right;">10924</td>
<td style="text-align: right;">4389</td>
<td style="text-align: right;">72102</td>
<td style="text-align: right;">7206</td>
<td style="text-align: right;">9950</td>
<td style="text-align: right;">133345</td>
</tr>
<tr class="even">
<td style="text-align: left;">North West</td>
<td style="text-align: right;">7417397</td>
<td style="text-align: right;">2419624</td>
<td style="text-align: right;">3895779</td>
<td style="text-align: right;">23028</td>
<td style="text-align: right;">49749</td>
<td style="text-align: right;">33285</td>
<td style="text-align: right;">563105</td>
<td style="text-align: right;">11862</td>
<td style="text-align: right;">28103</td>
<td style="text-align: right;">392862</td>
</tr>
<tr class="odd">
<td style="text-align: left;">Yorkshire and The Humber</td>
<td style="text-align: right;">5480774</td>
<td style="text-align: right;">2161185</td>
<td style="text-align: right;">2461519</td>
<td style="text-align: right;">15803</td>
<td style="text-align: right;">29243</td>
<td style="text-align: right;">9355</td>
<td style="text-align: right;">442533</td>
<td style="text-align: right;">24034</td>
<td style="text-align: right;">23618</td>
<td style="text-align: right;">313484</td>
</tr>
<tr class="even">
<td style="text-align: left;">East Midlands</td>
<td style="text-align: right;">4880054</td>
<td style="text-align: right;">1950354</td>
<td style="text-align: right;">2214151</td>
<td style="text-align: right;">14521</td>
<td style="text-align: right;">120345</td>
<td style="text-align: right;">4313</td>
<td style="text-align: right;">210766</td>
<td style="text-align: right;">53950</td>
<td style="text-align: right;">24813</td>
<td style="text-align: right;">286841</td>
</tr>
<tr class="odd">
<td style="text-align: left;">West Midlands</td>
<td style="text-align: right;">5950756</td>
<td style="text-align: right;">1955003</td>
<td style="text-align: right;">2770559</td>
<td style="text-align: right;">18804</td>
<td style="text-align: right;">88116</td>
<td style="text-align: right;">4394</td>
<td style="text-align: right;">569963</td>
<td style="text-align: right;">172398</td>
<td style="text-align: right;">31805</td>
<td style="text-align: right;">339714</td>
</tr>
<tr class="even">
<td style="text-align: left;">East</td>
<td style="text-align: right;">6335072</td>
<td style="text-align: right;">2544509</td>
<td style="text-align: right;">2955071</td>
<td style="text-align: right;">26814</td>
<td style="text-align: right;">86631</td>
<td style="text-align: right;">42012</td>
<td style="text-align: right;">234744</td>
<td style="text-align: right;">24284</td>
<td style="text-align: right;">36380</td>
<td style="text-align: right;">384627</td>
</tr>
</tbody>
</table>
</div>
</div>
<p>You can see how I’ve nested the previous command inside the <code>kable</code> command. For reference, in some cases when you’re working with really complex scripts with many different libraries and functions, they may end up with functions that have the same name. You can specify the library where the function is meant to come from by preceding it with :: as we’ve done <code>knitr::</code> above. The same kind of output can be gotten using <code>tail</code>:</p>
<div class="cell">
<div class="sourceCode cell-code" id="cb12"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb12-1"><a href="#cb12-1" aria-hidden="true" tabindex="-1"></a>knitr<span class="sc">::</span><span class="fu">kable</span>(<span class="fu">tail</span>(uk_census_2021_religion))</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
<div class="cell-output-display">
<table class="table table-sm table-striped small">
<colgroup>
<col style="width: 2%">
<col style="width: 13%">
<col style="width: 7%">
<col style="width: 11%">
<col style="width: 9%">
<col style="width: 8%">
<col style="width: 6%">
<col style="width: 6%">
<col style="width: 7%">
<col style="width: 6%">
<col style="width: 5%">
<col style="width: 11%">
</colgroup>
<thead>
<tr class="header">
<th style="text-align: left;"></th>
<th style="text-align: left;">geography</th>
<th style="text-align: right;">total</th>
<th style="text-align: right;">no_religion</th>
<th style="text-align: right;">christian</th>
<th style="text-align: right;">buddhist</th>
<th style="text-align: right;">hindu</th>
<th style="text-align: right;">jewish</th>
<th style="text-align: right;">muslim</th>
<th style="text-align: right;">sikh</th>
<th style="text-align: right;">other</th>
<th style="text-align: right;">no_response</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td style="text-align: left;">5</td>
<td style="text-align: left;">West Midlands</td>
<td style="text-align: right;">5950756</td>
<td style="text-align: right;">1955003</td>
<td style="text-align: right;">2770559</td>
<td style="text-align: right;">18804</td>
<td style="text-align: right;">88116</td>
<td style="text-align: right;">4394</td>
<td style="text-align: right;">569963</td>
<td style="text-align: right;">172398</td>
<td style="text-align: right;">31805</td>
<td style="text-align: right;">339714</td>
</tr>
<tr class="even">
<td style="text-align: left;">6</td>
<td style="text-align: left;">East</td>
<td style="text-align: right;">6335072</td>
<td style="text-align: right;">2544509</td>
<td style="text-align: right;">2955071</td>
<td style="text-align: right;">26814</td>
<td style="text-align: right;">86631</td>
<td style="text-align: right;">42012</td>
<td style="text-align: right;">234744</td>
<td style="text-align: right;">24284</td>
<td style="text-align: right;">36380</td>
<td style="text-align: right;">384627</td>
</tr>
<tr class="odd">
<td style="text-align: left;">7</td>
<td style="text-align: left;">London</td>
<td style="text-align: right;">8799728</td>
<td style="text-align: right;">2380404</td>
<td style="text-align: right;">3577681</td>
<td style="text-align: right;">77425</td>
<td style="text-align: right;">453034</td>
<td style="text-align: right;">145466</td>
<td style="text-align: right;">1318754</td>
<td style="text-align: right;">144543</td>
<td style="text-align: right;">86759</td>
<td style="text-align: right;">615662</td>
</tr>
<tr class="even">
<td style="text-align: left;">8</td>
<td style="text-align: left;">South East</td>
<td style="text-align: right;">9278068</td>
<td style="text-align: right;">3733094</td>
<td style="text-align: right;">4313319</td>
<td style="text-align: right;">54433</td>
<td style="text-align: right;">154748</td>
<td style="text-align: right;">18682</td>
<td style="text-align: right;">309067</td>
<td style="text-align: right;">74348</td>
<td style="text-align: right;">54098</td>
<td style="text-align: right;">566279</td>
</tr>
<tr class="odd">
<td style="text-align: left;">9</td>
<td style="text-align: left;">South West</td>
<td style="text-align: right;">5701186</td>
<td style="text-align: right;">2513369</td>
<td style="text-align: right;">2635872</td>
<td style="text-align: right;">24579</td>
<td style="text-align: right;">27746</td>
<td style="text-align: right;">7387</td>
<td style="text-align: right;">80152</td>
<td style="text-align: right;">7465</td>
<td style="text-align: right;">36884</td>
<td style="text-align: right;">367732</td>
</tr>
<tr class="even">
<td style="text-align: left;">10</td>
<td style="text-align: left;">Wales</td>
<td style="text-align: right;">3107494</td>
<td style="text-align: right;">1446398</td>
<td style="text-align: right;">1354773</td>
<td style="text-align: right;">10075</td>
<td style="text-align: right;">12242</td>
<td style="text-align: right;">2044</td>
<td style="text-align: right;">66947</td>
<td style="text-align: right;">4048</td>
<td style="text-align: right;">15926</td>
<td style="text-align: right;">195041</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<section id="parsing-and-exploring-your-data" class="level3 page-columns page-full" data-number="2.1.2">
<h3 data-number="2.1.2" class="anchored" data-anchor-id="parsing-and-exploring-your-data"><span class="header-section-number">2.1.2</span> Parsing and Exploring your data</h3>
<p>The first thing you’re going to want to do is to take a smaller subset of a large data set, either by filtering out certain columns or rows. Now let’s say we want to just work with the data from the West Midlands, and we’d like to omit some of the columns. We can choose a specific range of columns using <code>select</code>, like this:</p>
<p>You can use the <code>filter</code> command to do this. To give an example, <code>filter</code> can pick a single row in the following way:</p>
<div class="cell">
<div class="sourceCode cell-code" id="cb13"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb13-1"><a href="#cb13-1" aria-hidden="true" tabindex="-1"></a>uk_census_2021_religion_wmids <span class="ot">&lt;-</span> uk_census_2021_religion <span class="sc">%&gt;%</span> </span>
<span id="cb13-2"><a href="#cb13-2" aria-hidden="true" tabindex="-1"></a> <span class="fu">filter</span>(geography<span class="sc">==</span><span class="st">"West Midlands"</span>) </span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
</div>
<p>Now we’ll use select in a different way to narrow our data to specific columns that are needed (no totals!).</p>
<div class="page-columns page-full"><p></p><div class="no-row-height column-margin column-container"><span class="">Some readers will want to pause here and check out Hadley Wickham’s “R For Data Science” book, in the section, <a href="https://r4ds.hadley.nz/data-visualize#introduction">“Data visualisation”</a> to get a fuller explanation of how to explore your data.</span></div></div>
<p>In keeping with my goal to demonstrate data science through examples, we’re going to move on to producing some snappy looking charts for this data.</p>
</section>
</section>
<section id="making-your-first-chart" class="level2" data-number="2.2">
<h2 data-number="2.2" class="anchored" data-anchor-id="making-your-first-chart"><span class="header-section-number">2.2</span> Making your first chart</h2>
<p>We’ve got a nice lean set of data, so now it’s time to visualise this. We’ll start by making a pie chart:</p>
<div class="cell">
<div class="sourceCode cell-code" id="cb14"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb14-1"><a href="#cb14-1" aria-hidden="true" tabindex="-1"></a>uk_census_2021_religion_wmids <span class="ot">&lt;-</span> uk_census_2021_religion_wmids <span class="sc">%&gt;%</span> <span class="fu">select</span>(no_religion<span class="sc">:</span>no_response)</span>
<span id="cb14-2"><a href="#cb14-2" aria-hidden="true" tabindex="-1"></a>uk_census_2021_religion_wmids <span class="ot">&lt;-</span> <span class="fu">gather</span>(uk_census_2021_religion_wmids)</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
</div>
<p>There are two basic ways to do visualisations in R. You can work with basic functions in R, often called “base R” or you can work with an alternative library called ggplot:</p>
<section id="base-r" class="level4" data-number="2.2.0.1">
<h4 data-number="2.2.0.1" class="anchored" data-anchor-id="base-r"><span class="header-section-number">2.2.0.1</span> Base R</h4>
<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>df <span class="ot">&lt;-</span> uk_census_2021_religion_wmids[<span class="fu">order</span>(uk_census_2021_religion_wmids<span class="sc">$</span>value,<span class="at">decreasing =</span> <span class="cn">TRUE</span>),]</span>
<span id="cb15-2"><a href="#cb15-2" aria-hidden="true" tabindex="-1"></a><span class="fu">barplot</span>(<span class="at">height=</span>df<span class="sc">$</span>value, <span class="at">names=</span>df<span class="sc">$</span>key)</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_1_files/figure-html/unnamed-chunk-6-1.png" class="img-fluid" width="672"></p>
</div>
</div>
</section>
<section id="ggplot" class="level4" data-number="2.2.0.2">
<h4 data-number="2.2.0.2" class="anchored" data-anchor-id="ggplot"><span class="header-section-number">2.2.0.2</span> GGPlot</h4>
<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>(uk_census_2021_religion_wmids, <span class="fu">aes</span>(<span class="at">x =</span> key, <span class="at">y =</span> value)) <span class="sc">+</span></span>
<span id="annotated-cell-11-2"><a href="#annotated-cell-11-2" aria-hidden="true" tabindex="-1"></a> <span class="fu">geom_bar</span>(<span class="at">stat =</span> <span class="st">"identity"</span>)</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
<div class="cell-annotation">
<dl class="code-annotation-container-grid">
<dt data-target-cell="annotated-cell-12" data-target-annotation="2">2</dt>
<dd>
<span data-code-annotation="2" data-code-lines="1" data-code-cell="annotated-cell-12">We’ll re-order the column by size.</span>
</dd>
</dl>
</div>
<div class="cell-output-display">
<p><img src="chapter_1_files/figure-html/unnamed-chunk-7-1.png" class="img-fluid" width="672"></p>
</div>
<div class="sourceCode cell-code" id="annotated-cell-12"><pre class="sourceCode r code-annotation-code code-with-copy code-annotated"><code class="sourceCode r"><a class="code-annotation-anchor" data-target-cell="annotated-cell-12" data-target-annotation="2" onclick="event.preventDefault();">2</a><span id="annotated-cell-12-1" class="code-annotation-target"><a href="#annotated-cell-12-1" aria-hidden="true" tabindex="-1"></a><span class="fu">ggplot</span>(uk_census_2021_religion_wmids, <span class="fu">aes</span>(<span class="at">x=</span> <span class="fu">reorder</span>(key,<span class="sc">-</span>value),value)) <span class="sc">+</span> <span class="fu">geom_bar</span>(<span class="at">stat =</span><span class="st">"identity"</span>)</span><div class="code-annotation-gutter-bg"></div><div class="code-annotation-gutter"></div></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_1_files/figure-html/unnamed-chunk-7-2.png" class="img-fluid" width="672"></p>
</div>
</div>
<p>Let’s assume we’re working with a data set that doesn’t include a “totals” column and that we might want to get sums for each column. This is pretty easy to do in R:</p>
<div class="cell">
<div class="sourceCode cell-code" id="annotated-cell-13"><pre class="sourceCode r code-annotation-code code-with-copy code-annotated"><code class="sourceCode r"><a class="code-annotation-anchor" data-target-cell="annotated-cell-13" data-target-annotation="1" onclick="event.preventDefault();">1</a><span id="annotated-cell-13-1" class="code-annotation-target"><a href="#annotated-cell-13-1" aria-hidden="true" tabindex="-1"></a>uk_census_2021_religion_totals <span class="ot">&lt;-</span> uk_census_2021_religion <span class="sc">%&gt;%</span> <span class="fu">select</span>(no_religion<span class="sc">:</span>no_response)</span>
<span id="annotated-cell-13-2"><a href="#annotated-cell-13-2" aria-hidden="true" tabindex="-1"></a>uk_census_2021_religion_totals <span class="ot">&lt;-</span> uk_census_2021_religion_totals <span class="sc">%&gt;%</span></span>
<a class="code-annotation-anchor" data-target-cell="annotated-cell-13" data-target-annotation="2" onclick="event.preventDefault();">2</a><span id="annotated-cell-13-3" class="code-annotation-target"><a href="#annotated-cell-13-3" aria-hidden="true" tabindex="-1"></a> <span class="fu">summarise</span>(<span class="fu">across</span>(<span class="fu">everything</span>(), <span class="sc">~</span> <span class="fu">sum</span>(., <span class="at">na.rm =</span> <span class="cn">TRUE</span>)))</span>
<a class="code-annotation-anchor" data-target-cell="annotated-cell-13" data-target-annotation="3" onclick="event.preventDefault();">3</a><span id="annotated-cell-13-4" class="code-annotation-target"><a href="#annotated-cell-13-4" aria-hidden="true" tabindex="-1"></a>uk_census_2021_religion_totals <span class="ot">&lt;-</span> <span class="fu">gather</span>(uk_census_2021_religion_totals)</span>
<a class="code-annotation-anchor" data-target-cell="annotated-cell-13" data-target-annotation="4" onclick="event.preventDefault();">4</a><span id="annotated-cell-13-5" class="code-annotation-target"><a href="#annotated-cell-13-5" aria-hidden="true" tabindex="-1"></a><span class="fu">ggplot</span>(uk_census_2021_religion_totals, <span class="fu">aes</span>(<span class="at">x=</span> <span class="fu">reorder</span>(key,<span class="sc">-</span>value),value)) <span class="sc">+</span> <span class="fu">geom_bar</span>(<span class="at">stat =</span><span class="st">"identity"</span>)</span><div class="code-annotation-gutter-bg"></div><div class="code-annotation-gutter"></div></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
<div class="cell-annotation">
<dl class="code-annotation-container-grid">
<dt data-target-cell="annotated-cell-13" data-target-annotation="1">1</dt>
<dd>
<span data-code-annotation="1" data-code-lines="1" data-code-cell="annotated-cell-13">First, remove the column with region names and the totals for the regions as we want just integer data.</span>
</dd>
<dt data-target-cell="annotated-cell-13" data-target-annotation="2">2</dt>
<dd>
<span data-code-annotation="2" data-code-lines="3" data-code-cell="annotated-cell-13">Second calculate the totals. In this example we use the tidyverse library <code>dplyr()</code>, but you can also do this using base R with <code>colsums()</code> like this: <code>uk_census_2021_religion_totals &lt;- colSums(uk_census_2021_religion_totals, na.rm = TRUE)</code>. The downside with base R is that you’ll also need to convert the result into a dataframe for <code>ggplot</code> like this: <code>uk_census_2021_religion_totals &lt;- as.data.frame(uk_census_2021_religion_totals)</code></span>
</dd>
<dt data-target-cell="annotated-cell-13" data-target-annotation="3">3</dt>
<dd>
<span data-code-annotation="3" data-code-lines="4" data-code-cell="annotated-cell-13">In order to visualise this data using ggplot, we need to shift this data from wide to long format. This is a quick job using gather()</span>
</dd>
<dt data-target-cell="annotated-cell-13" data-target-annotation="4">4</dt>
<dd>
<span data-code-annotation="4" data-code-lines="5" data-code-cell="annotated-cell-13">Now plot it out and have a look!</span>
</dd>
</dl>
</div>
<div class="cell-output-display">
<p><img src="chapter_1_files/figure-html/unnamed-chunk-8-1.png" class="img-fluid" width="672"></p>
</div>
</div>
<p>You might have noticed that these two dataframes give us somewhat different results. But with data science, it’s much more interesting to compare these two side-by-side in a visualisation. We can join these two dataframes and plot the bars side by side using <code>bind()</code> - which can be done by columns with cbind() and rows using rbind():</p>
<div class="cell">
<div class="sourceCode cell-code" id="cb16"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb16-1"><a href="#cb16-1" aria-hidden="true" tabindex="-1"></a>uk_census_2021_religion_merged <span class="ot">&lt;-</span> <span class="fu">rbind</span>(uk_census_2021_religion_totals, uk_census_2021_religion_wmids)</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
</div>
<p>Do you notice there’s going to be a problem here? How can we tell one set from the other? We need to add in something idenfiable first! This isn’t too hard to do as we can simply create a new column for each with identifiable information before we bind them:</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>uk_census_2021_religion_totals<span class="sc">$</span>dataset <span class="ot">&lt;-</span> <span class="fu">c</span>(<span class="st">"totals"</span>)</span>
<span id="cb17-2"><a href="#cb17-2" aria-hidden="true" tabindex="-1"></a>uk_census_2021_religion_wmids<span class="sc">$</span>dataset <span class="ot">&lt;-</span> <span class="fu">c</span>(<span class="st">"wmids"</span>)</span>
<span id="cb17-3"><a href="#cb17-3" aria-hidden="true" tabindex="-1"></a>uk_census_2021_religion_merged <span class="ot">&lt;-</span> <span class="fu">rbind</span>(uk_census_2021_religion_totals, uk_census_2021_religion_wmids)</span></code><button title="Copy to Clipboard" class="code-copy-button"><i class="bi"></i></button></pre></div>
</div>
<p>Now we’re ready to plot out our data as a grouped barplot:</p>
<div class="cell">
<div class="sourceCode cell-code" id="cb18"><pre class="sourceCode r code-with-copy"><code class="sourceCode r"><span id="cb18-1"><a href="#cb18-1" aria-hidden="true" tabindex="-1"></a><span class="fu">ggplot</span>(uk_census_2021_religion_merged, <span class="fu">aes</span>(<span class="at">fill=</span>dataset, <span class="at">x=</span> <span class="fu">reorder</span>(key,<span class="sc">-</span>value), value)) <span class="sc">+</span> <span class="fu">geom_bar</span>(<span class="at">position=</span><span class="st">"dodge"</span>, <span class="at">stat =</span><span class="st">"identity"</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_1_files/figure-html/unnamed-chunk-11-1.png" class="img-fluid" width="672"></p>
</div>
</div>
<p>If you’re looking closely, you will notice that I’ve added two elements to our previous ggplot. I’ve asked ggplot to fill in the columns with reference to the <code>dataset</code> column we’ve just created. Then I’ve also asked ggplot to alter the <code>position="dodge"</code> which places bars side by side rather than stacked on top of one another. You can give it a try without this instruction to see how this works. We will use stacked bars in a later chapter, so remember this feature.</p>
<p>If you inspect our chart, you can see that we’re getting closer, but it’s not really that helpful to compare the totals. What we need to do is get percentages that can be compared side by side. This is easy to do using another <code>dplyr</code> feature <code>mutate</code>:</p>
<div class="cell">
<div class="sourceCode cell-code" id="annotated-cell-17"><pre class="sourceCode r code-annotation-code code-with-copy"><code class="sourceCode r"><span id="annotated-cell-17-1"><a href="#annotated-cell-17-1" aria-hidden="true" tabindex="-1"></a>uk_census_2021_religion_totals <span class="ot">&lt;-</span> uk_census_2021_religion_totals <span class="sc">%&gt;%</span> </span>
<span id="annotated-cell-17-2"><a href="#annotated-cell-17-2" aria-hidden="true" tabindex="-1"></a> dplyr<span class="sc">::</span><span class="fu">mutate</span>(<span class="at">perc =</span> scales<span class="sc">::</span><span class="fu">percent</span>(value <span class="sc">/</span> <span class="fu">sum</span>(value), <span class="at">accuracy =</span> <span class="fl">0.1</span>, <span class="at">trim =</span> <span class="cn">FALSE</span>))</span>
<span id="annotated-cell-17-3"><a href="#annotated-cell-17-3" aria-hidden="true" tabindex="-1"></a>uk_census_2021_religion_wmids <span class="ot">&lt;-</span> uk_census_2021_religion_wmids <span class="sc">%&gt;%</span> </span>
<span id="annotated-cell-17-4"><a href="#annotated-cell-17-4" aria-hidden="true" tabindex="-1"></a> dplyr<span class="sc">::</span><span class="fu">mutate</span>(<span class="at">perc =</span> scales<span class="sc">::</span><span class="fu">percent</span>(value <span class="sc">/</span> <span class="fu">sum</span>(value), <span class="at">accuracy =</span> <span class="fl">0.1</span>, <span class="at">trim =</span> <span class="cn">FALSE</span>))</span>
<span id="annotated-cell-17-5"><a href="#annotated-cell-17-5" aria-hidden="true" tabindex="-1"></a>uk_census_2021_religion_merged <span class="ot">&lt;-</span> <span class="fu">rbind</span>(uk_census_2021_religion_totals, uk_census_2021_religion_wmids)</span>
<span id="annotated-cell-17-6"><a href="#annotated-cell-17-6" aria-hidden="true" tabindex="-1"></a><span class="fu">ggplot</span>(uk_census_2021_religion_merged, <span class="fu">aes</span>(<span class="at">fill=</span>dataset, <span class="at">x=</span>key, <span class="at">y=</span>perc)) <span class="sc">+</span> <span class="fu">geom_bar</span>(<span class="at">position=</span><span class="st">"dodge"</span>, <span class="at">stat =</span><span class="st">"identity"</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_1_files/figure-html/unnamed-chunk-12-1.png" class="img-fluid" width="672"></p>
</div>
</div>
<p>Now you can see a very rough comparison</p>
<p>Add time series data for 2001 and 2011 census, change to grouped bar plot:</p>
<p>https://r-graphics.org/recipe-bar-graph-grouped-bar#discussion-8</p>
<!--
Reference on callout box syntax here: https://quarto.org/docs/authoring/callouts.html
-->
</section>
</section>
<section id="references" class="level1 unnumbered">
<h1 class="unnumbered">References</h1>
<div id="refs" role="list" style="display: none">
</div>
</section>
</main> <!-- /main -->
<script id="quarto-html-after-body" type="application/javascript">
window.document.addEventListener("DOMContentLoaded", function (event) {
const toggleBodyColorMode = (bsSheetEl) => {
const mode = bsSheetEl.getAttribute("data-mode");
const bodyEl = window.document.querySelector("body");
if (mode === "dark") {
bodyEl.classList.add("quarto-dark");
bodyEl.classList.remove("quarto-light");
} else {
bodyEl.classList.add("quarto-light");
bodyEl.classList.remove("quarto-dark");
}
}
const toggleBodyColorPrimary = () => {
const bsSheetEl = window.document.querySelector("link#quarto-bootstrap");
if (bsSheetEl) {
toggleBodyColorMode(bsSheetEl);
}
}
toggleBodyColorPrimary();
const icon = "";
const anchorJS = new window.AnchorJS();
anchorJS.options = {
placement: 'right',
icon: icon
};
anchorJS.add('.anchored');
const isCodeAnnotation = (el) => {
for (const clz of el.classList) {
if (clz.startsWith('code-annotation-')) {
return true;
}
}
return false;
}
const clipboard = new window.ClipboardJS('.code-copy-button', {
text: function(trigger) {
const codeEl = trigger.previousElementSibling.cloneNode(true);
for (const childEl of codeEl.children) {
if (isCodeAnnotation(childEl)) {
childEl.remove();
}
}
return codeEl.innerText;
}
});
clipboard.on('success', function(e) {
// button target
const button = e.trigger;
// don't keep focus
button.blur();
// flash "checked"
button.classList.add('code-copy-button-checked');
var currentTitle = button.getAttribute("title");
button.setAttribute("title", "Copied!");
let tooltip;
if (window.bootstrap) {
button.setAttribute("data-bs-toggle", "tooltip");
button.setAttribute("data-bs-placement", "left");
button.setAttribute("data-bs-title", "Copied!");
tooltip = new bootstrap.Tooltip(button,
{ trigger: "manual",
customClass: "code-copy-button-tooltip",
offset: [0, -8]});
tooltip.show();
}
setTimeout(function() {
if (tooltip) {
tooltip.hide();
button.removeAttribute("data-bs-title");
button.removeAttribute("data-bs-toggle");
button.removeAttribute("data-bs-placement");
}
button.setAttribute("title", currentTitle);
button.classList.remove('code-copy-button-checked');
}, 1000);
// clear code selection
e.clearSelection();
});
function tippyHover(el, contentFn) {
const config = {
allowHTML: true,
content: contentFn,
maxWidth: 500,
delay: 100,
arrow: false,
appendTo: function(el) {
return el.parentElement;
},
interactive: true,
interactiveBorder: 10,
theme: 'quarto',
placement: 'bottom-start'
};
window.tippy(el, config);
}
const noterefs = window.document.querySelectorAll('a[role="doc-noteref"]');
for (var i=0; i<noterefs.length; i++) {
const ref = noterefs[i];
tippyHover(ref, function() {
// use id or data attribute instead here
let href = ref.getAttribute('data-footnote-href') || ref.getAttribute('href');
try { href = new URL(href).hash; } catch {}
const id = href.replace(/^#\/?/, "");
const note = window.document.getElementById(id);
return note.innerHTML;
});
}
let selectedAnnoteEl;
const selectorForAnnotation = ( cell, annotation) => {
let cellAttr = 'data-code-cell="' + cell + '"';
let lineAttr = 'data-code-annotation="' + annotation + '"';
const selector = 'span[' + cellAttr + '][' + lineAttr + ']';
return selector;
}
const selectCodeLines = (annoteEl) => {
const doc = window.document;
const targetCell = annoteEl.getAttribute("data-target-cell");
const targetAnnotation = annoteEl.getAttribute("data-target-annotation");
const annoteSpan = window.document.querySelector(selectorForAnnotation(targetCell, targetAnnotation));
const lines = annoteSpan.getAttribute("data-code-lines").split(",");
const lineIds = lines.map((line) => {
return targetCell + "-" + line;
})
let top = null;
let height = null;
let parent = null;
if (lineIds.length > 0) {
//compute the position of the single el (top and bottom and make a div)
const el = window.document.getElementById(lineIds[0]);
top = el.offsetTop;
height = el.offsetHeight;
parent = el.parentElement.parentElement;
if (lineIds.length > 1) {
const lastEl = window.document.getElementById(lineIds[lineIds.length - 1]);
const bottom = lastEl.offsetTop + lastEl.offsetHeight;
height = bottom - top;
}
if (top !== null && height !== null && parent !== null) {
// cook up a div (if necessary) and position it
let div = window.document.getElementById("code-annotation-line-highlight");
if (div === null) {
div = window.document.createElement("div");
div.setAttribute("id", "code-annotation-line-highlight");
div.style.position = 'absolute';
parent.appendChild(div);
}
div.style.top = top - 2 + "px";
div.style.height = height + 4 + "px";
let gutterDiv = window.document.getElementById("code-annotation-line-highlight-gutter");
if (gutterDiv === null) {
gutterDiv = window.document.createElement("div");
gutterDiv.setAttribute("id", "code-annotation-line-highlight-gutter");
gutterDiv.style.position = 'absolute';
const codeCell = window.document.getElementById(targetCell);
const gutter = codeCell.querySelector('.code-annotation-gutter');
gutter.appendChild(gutterDiv);
}
gutterDiv.style.top = top - 2 + "px";
gutterDiv.style.height = height + 4 + "px";
}
selectedAnnoteEl = annoteEl;
}
};
const unselectCodeLines = () => {
const elementsIds = ["code-annotation-line-highlight", "code-annotation-line-highlight-gutter"];
elementsIds.forEach((elId) => {
const div = window.document.getElementById(elId);
if (div) {
div.remove();
}
});
selectedAnnoteEl = undefined;
};
// Attach click handler to the DT
const annoteDls = window.document.querySelectorAll('dt[data-target-cell]');
for (const annoteDlNode of annoteDls) {
annoteDlNode.addEventListener('click', (event) => {
const clickedEl = event.target;
if (clickedEl !== selectedAnnoteEl) {
unselectCodeLines();
const activeEl = window.document.querySelector('dt[data-target-cell].code-annotation-active');
if (activeEl) {
activeEl.classList.remove('code-annotation-active');
}
selectCodeLines(clickedEl);
clickedEl.classList.add('code-annotation-active');
} else {
// Unselect the line
unselectCodeLines();
clickedEl.classList.remove('code-annotation-active');
}
});
}
const findCites = (el) => {
const parentEl = el.parentElement;
if (parentEl) {
const cites = parentEl.dataset.cites;
if (cites) {
return {
el,
cites: cites.split(' ')
};
} else {
return findCites(el.parentElement)
}
} else {
return undefined;
}
};
var bibliorefs = window.document.querySelectorAll('a[role="doc-biblioref"]');
for (var i=0; i<bibliorefs.length; i++) {
const ref = bibliorefs[i];
const citeInfo = findCites(ref);
if (citeInfo) {
tippyHover(citeInfo.el, function() {
var popup = window.document.createElement('div');
citeInfo.cites.forEach(function(cite) {
var citeDiv = window.document.createElement('div');
citeDiv.classList.add('hanging-indent');
citeDiv.classList.add('csl-entry');
var biblioDiv = window.document.getElementById('ref-' + cite);
if (biblioDiv) {
citeDiv.innerHTML = biblioDiv.innerHTML;
}
popup.appendChild(citeDiv);
});
return popup.innerHTML;
});
}
}
});
</script>
<nav class="page-navigation">
<div class="nav-page nav-page-previous">
<a href="./intro.html" class="pagination-link">
<i class="bi bi-arrow-left-short"></i> <span class="nav-page-text"><span class="chapter-number">1</span>&nbsp; <span class="chapter-title">Introduction: Hacking Religion</span></span>
</a>
</div>
<div class="nav-page nav-page-next">
<a href="./chapter_2.html" class="pagination-link">
<span class="nav-page-text"><span class="chapter-number">3</span>&nbsp; <span class="chapter-title">Survey Data: Spotlight Project</span></span> <i class="bi bi-arrow-right-short"></i>
</a>
</div>
</nav>
</div> <!-- /content -->
</body></html>
Reference in a new issue View git blame Copy permalink