From 5116c12449c8fcc3aaf536f0e076ef95c68067f4 Mon Sep 17 00:00:00 2001 From: Jeremy Kidwell Date: Thu, 15 Feb 2024 12:30:17 +0000 Subject: [PATCH] updated render --- docs/chapter_1.html | 52 ++- docs/chapter_2.html | 340 +++++++++++++++--- .../figure-html/unnamed-chunk-11-1.png | Bin 32398 -> 32821 bytes .../figure-html/unnamed-chunk-16-1.png | Bin 235340 -> 237335 bytes .../figure-html/unnamed-chunk-17-1.png | Bin 158505 -> 292349 bytes .../figure-html/unnamed-chunk-19-1.png | Bin 308895 -> 310816 bytes .../figure-html/unnamed-chunk-22-1.png | Bin 405823 -> 404672 bytes .../figure-html/unnamed-chunk-6-1.png | Bin 195577 -> 195486 bytes docs/index.html | 4 +- 9 files changed, 327 insertions(+), 69 deletions(-) diff --git a/docs/chapter_1.html b/docs/chapter_1.html index eb1d3b6..81159e6 100644 --- a/docs/chapter_1.html +++ b/docs/chapter_1.html @@ -174,7 +174,7 @@ div.csl-indent {
  • - 2  Survey Data: Spotlight Project + 2  Getting into the nitty-gritty details
  • @@ -586,8 +586,7 @@ div.csl-indent {

    2.4.2 GGPlot

    -
    ggplot(uk_census_2021_religion_wmids, aes(x = key, y = value)) +
-  geom_bar(stat = "identity")
    +
    ggplot(uk_census_2021_religion_wmids, aes(x = key, y = value)) + geom_bar(stat = "identity")
    2
    @@ -670,6 +669,7 @@ div.csl-indent {

    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 dataset column we’ve just created. Then I’ve also asked ggplot to alter the position="dodge" 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.

    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 dplyr feature mutate:

    +

    You can find a helpful write-up about dplyr by Antoine Soetewey at, “Stats and R”.

    It’s worth noting that an alternative approach is to leave the numbers intact and simply label them differently so they render as percentages on your charts. You can do this with the `scales() library and the label_percent() function. The downside of this approach is that it won’t transfer to tables if you make them.
    uk_census_2021_religion_totals <- uk_census_2021_religion_totals %>% 
@@ -748,29 +748,32 @@ div.csl-indent {
    -
    +

    2.6 Multifactor Visualisation

    One element of R data analysis of census datasets that can get really interesting is working with multiple variables. Above we’ve looked at the breakdown of religious affiliation across the whole of England and Wales (Scotland operates an independent census), and by placing this data alongside a specific region, we’ve already made a basic entry into working with multiple variables but this can get much more interesting. Adding an additional quantitative variable (also known as bivariate data when you have two variables) into the mix, however can also generate a lot more information and we have to think about visualising it in different ways which can still communicate with visual clarity in spite of the additional visual noise which is inevitable with enhanced complexity. Let’s have a look at the way that religion in England and Wales breaks down by ethnicity.

    -
    + +

    For the UK, census data is made available for programmatic research like this via an organisation called NOMIS. Luckily for us, there is an R library you can use to access nomis directly which greatly simplifies the process of pulling data down from the platform. It’s worth noting that if you’re not in the UK, there are similar options for other countries. Nearly every R textbook I’ve ever seen works with USA census data, so you’ll find plenty of documentation available on the tools you can use for US Census data. Similarly for the EU, Canada, Austrailia etc.

    If you want to draw some data from the nomis platform yourself in R, have a look at the nomis script in our companion cookbook repository. For now, we’ll provide some data extracts for you to use.

    +

    Let’s start by loading in some of the enhanced tables from nomis with the 2021 religion / ethnicity tables:

    nomis_extract_census2021 <- readRDS(file = (here("example_data", "nomis_extract_census2021.rds")))

    I’m hoping that readers of this book will feel free to pause along the way and “hack” the code to explore questions of their own, perhaps in this case probing the NOMIS data for answers to their own questions. If I tidy things up too much, however, you’re likely to be surprised when you get to the real life data sets. So that you can use the code in this book in a reproducible way, I’ve started this exercise with what is a more or less raw dump from NOMIS. This means that the data is a bit messy and needs to be filtered down quite a bit so that it only includes the basic stuff that we’d like to examine for this particular question. The upside of this is that you can modify this code to draw in different columns etc.

    -
    +
    1uk_census_2021_religion_ethnicity <- select(nomis_extract_census2021, GEOGRAPHY_NAME, C2021_RELIGION_10_NAME, C2021_ETH_8_NAME, OBS_VALUE)
 2uk_census_2021_religion_ethnicity <- filter(uk_census_2021_religion_ethnicity, GEOGRAPHY_NAME=="England and Wales" & C2021_RELIGION_10_NAME != "Total" & C2021_ETH_8_NAME != "Total")
 3uk_census_2021_religion_ethnicity <- filter(uk_census_2021_religion_ethnicity, C2021_ETH_8_NAME != "White: English, Welsh, Scottish, Northern Irish or British" & C2021_ETH_8_NAME != "White: Irish" & C2021_ETH_8_NAME != "White: Gypsy or Irish Traveller, Roma or Other White")
@@ -795,16 +798,32 @@ What is Nomis?
    -
    + +

    -
    -
    +

    The trouble with using grouped bars here, as you can see, is that there are quite sharp disparities which make it hard to compare in meaningful ways. We could use logarithmic rather than linear scaling as an option, but this is hard for many general public audiences to appreciate without guidance. One alternative quick fix is to extract data from “white” respondents which can then be placed in a separate chart with a different scale.

    -
    +
    + +
    +
    +

    Content TBD.

    +
    +
    +
    +
    1uk_census_2021_religion_ethnicity_white <- filter(uk_census_2021_religion_ethnicity, C2021_ETH_8_NAME == "White")
 2uk_census_2021_religion_ethnicity_nonwhite <- filter(uk_census_2021_religion_ethnicity, C2021_ETH_8_NAME != "White")
 3ggplot(uk_census_2021_religion_ethnicity_nonwhite, aes(fill=C2021_ETH_8_NAME, x=C2021_RELIGION_10_NAME, y=OBS_VALUE)) + geom_bar(position="dodge", stat ="identity", colour = "black") + scale_fill_brewer(palette = "Set1") + ggtitle("Religious Affiliation in the 2021 Census of England and Wales") + xlab("") + ylab("") + theme(axis.text.x = element_text(angle = 90, vjust = 0.5, hjust=1))
    @@ -824,14 +843,14 @@ What is Nomis?
    -
    + +

    -
    -
    +

    As you’ll notice, this is a bit better, but this still doesn’t quite render with as much visual clarity and communication as I’d like. For a better look, we can use a technique in R called “faceting” to create a series of small charts which can be viewed alongside one another. This is just intended to whet you appetite for facetted plots, so I won’t break down all the separate elements in great detail as there are other guides which will walk you through the full details of how to use this technique if you want to do a deep dive. For now, you’ll want to observe that we’ve augmented the ggplot with a new element called facet_wrap which takes the ethnicity data column as the basis for rendering separate charts.

    ggplot(uk_census_2021_religion_ethnicity_nonwhite, aes(x=C2021_RELIGION_10_NAME, y=OBS_VALUE)) + geom_bar(position="dodge", stat ="identity", colour = "black") + facet_wrap(~C2021_ETH_8_NAME, ncol = 2) + scale_fill_brewer(palette = "Set1") + ggtitle("Religious Affiliation in the 2021 Census of England and Wales") + xlab("") + ylab("") + theme(axis.text.x = element_text(angle = 90, vjust = 0.5, hjust=1))
    @@ -993,6 +1012,7 @@ What is Nomis? ggsave("figures/chart.png", plot=uk_census_merged_religion_ethnicity_plot, width = 8, height = 10, units=c("in"))

    That’s a pretty good day’s work. We’ve covered bifactorial analysis of the census data, compared this across years, and checked in each case to be sure that we’re representing the data accurately in the various visual elements of our charts. For the next chapter, we’re going to explore a wider range of ways to measure and represent religion.

    +

    In the meantime, if you want to download the R code without all the commentary here so you can try running it in a browser, you can download that from the cookbook repository.

    @@ -1389,6 +1409,8 @@ window.document.addEventListener("DOMContentLoaded", function (event) { } }); + diff --git a/docs/chapter_2.html b/docs/chapter_2.html index 0250e63..d90eac2 100644 --- a/docs/chapter_2.html +++ b/docs/chapter_2.html @@ -2,7 +2,7 @@ - + @@ -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" } } @@ -104,13 +112,13 @@ pre > code.sourceCode > span > a:first-child::before { text-decoration: underlin
    +

    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.

    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.

    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.”

    @@ -329,15 +339,15 @@ So Who’s Religious?
    1
    -First we generate new a dataframe with sums per category and +First we generate new a dataframe with sums per category and
    2
    -…sort in descending order +…sort in descending order
    3
    -Then we add new column with percentages based on the sums you’ve just generated +Then we add new column with percentages based on the sums you’ve just generated
    @@ -367,7 +377,11 @@ So Who’s Religious? ## make labels left-aligned and white hjust = 1, nudge_x = -.5, colour = "white", size=3)
    -

    +
    +
    +

    +
    +

    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 geom_text.

    @@ -387,7 +401,11 @@ So Who’s Religious? religious_affiliation_ethnicity_plot
    -

    +
    +
    +

    +
    +
    ggsave("figures/spotlight_religious_affiliation_ethnicity.png", plot=religious_affiliation_ethnicity_plot, width = 8, height = 10, units=c("in"))
    @@ -411,7 +429,7 @@ So Who’s Religious?
    1
    -Note: we have removed sort = TRUE 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. +Note: we have removed sort = TRUE 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.
    @@ -429,22 +447,26 @@ So Who’s Religious?
    1
    -We’ve added colors, because colours are fun. +We’ve added colors, because colours are fun.
    2
    -Also new here is coord_flip to rotate the chart so we have bars going horizontally +Also new here is coord_flip to rotate the chart so we have bars going horizontally
    -

    +
    +
    +

    +
    +

    7.1 Quick excursus: making things pretty with themes

    Since we’re thinking about how things look just now, let’s play with themes for a minute. ggplot is a really powerful tool for visualising information, but it also has some quite nice features for making things look pretty.

    -

    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, “R-Charts on Themes”.
    +

    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, “R-Charts on Themes”.

    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 theme_light() in the following way:

    ggplot(religiosity_sums, aes(x = response, y = n, color=response)) +
@@ -455,7 +477,11 @@ So Who’s Religious?
   labs(caption = caption) +
   theme_light()
    -

    +
    +
    +

    +
    +

    You can also use additional packages like ggthemes() or hrbrthemes() so for example we might want to try the pander theme which has it’s own special (and very cheerful) colour palette.

    @@ -465,7 +491,11 @@ So Who’s Religious? theme_pander() + scale_fill_pander()
    -

    +
    +
    +

    +
    +

    Or, you might try the well-crafted typgraphy from hbrthemes in the theme_ipsum_pub theme:

    @@ -476,12 +506,16 @@ So Who’s Religious? theme_ipsum_pub() + scale_fill_pander()
    -

    +
    +
    +

    +
    +
    -
    +

    8 Spirituality

    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.

    @@ -515,16 +549,14 @@ Statistics 101: Statistical Mean
    -
    ### Spirituality scale  --------------------------------------------------------------
-# Calculate overall mean spirituality score based on six questions:
-climate_experience_data$spirituality_score <- rowMeans(select(climate_experience_data, Q52a_1:Q52f_1))
-# Calculate overall mean nature relatedness score based on six questions:
-climate_experience_data$Q51_score <- rowMeans(select(climate_experience_data, Q51_heritage:Q51_remote_vacation))
    +
    # Calculate overall mean spirituality score based on six questions:
+climate_experience_data$spirituality_score <- rowMeans(select(climate_experience_data, Q52a_1:Q52f_1))
+# Calculate overall mean nature relatedness score based on six questions:
+climate_experience_data$Q51_score <- rowMeans(select(climate_experience_data, Q51_heritage:Q51_remote_vacation))

    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:

    -
    ### Calculating mean  --------------------------------------------------------------
-mean(climate_experience_data$Q57_1)
    +
    mean(climate_experience_data$Q57_1)
    [1] 5.581349
    @@ -540,12 +572,15 @@ Statistics 101: Statistical Mean

    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.

    Now let’s try out some visualisations, staring with the religiosity data.

    -
    ### Plotting religiosity  --------------------------------------------------------------
-ggplot(climate_experience_data, aes(x = 1, y = Q57_1)) +
-  geom_point() +
-  labs(x = NULL, y = "Q57_1")
    +
    ggplot(climate_experience_data, aes(x = 1, y = Q57_1)) +
+  geom_point() +
+  labs(x = NULL, y = "Q57_1")
    -

    +
    +
    +

    +
    +

    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:

    @@ -554,17 +589,26 @@ Statistics 101: Statistical Mean geom_point(position = position_jitter(width = 0.1)) + labs(x = NULL, y = "Q57_1") + theme(axis.text.x = element_blank())
    -

    +
    +
    +

    +
    +

    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.

    +

    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.

    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.

    ggplot(climate_experience_data, aes(x = 1, y = Q57_1)) +
-  geom_point(position = position_jitter(width = 1), color="black", size=0.5, alpha=0.3) +
+  geom_point(position = position_jitter(width = 1), color="black", size=1.5, alpha=0.3) +
   labs(x = NULL, y = "Q57_1") + theme(axis.text.x = element_blank())
    -

    +
    +
    +

    +
    +

    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:

    @@ -573,7 +617,11 @@ Statistics 101: Statistical Mean geom_boxplot(color = "black", fill = "lightblue", alpha = 0.7) + labs(x = NULL, y = "Q57_1") + coord_flip() + theme(axis.text.y = element_blank())
    -

    +
    +
    +

    +
    +

    I’ve flipped this chart on its side using coord_flip() 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.

    @@ -602,7 +650,11 @@ Statistics 101: Range and getting into Quartiles, Quintiles, Deciles etc. labs(x = NULL, y = "Q57_1") + theme_ipsum() + theme(axis.text.y = element_blank()) + coord_flip()
    -

    +
    +
    +

    +
    +

    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:

    @@ -644,7 +696,11 @@ dropped ylab("Spirituality scales") + scale_x_discrete(labels = function(x) str_wrap(x, width = 45))
    -

    +
    +
    +

    +
    +
    @@ -663,10 +719,15 @@ dropped 
    `geom_smooth()` using method = 'gam' and formula = 'y ~ s(x, bs = "cs")'
    -

    +
    +
    +

    +
    +

    It may be helpful to add a few more visual elements to help someone understand this data. Let’s try adding a density plot:

    +

    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, “data import”.
    library(ggExtra)
 p <- ggplot(climate_experience_data, aes(x = spirituality_score, y = Q57_1)) +
@@ -677,7 +738,11 @@ dropped
    p_with_density <- ggMarginal(p, type = "histogram") p_with_density
    -

    +
    +
    +

    +
    +

    As an alternative we can view this as a heatmap:

    @@ -692,7 +757,11 @@ dropped ℹ Please use `after_stat(level)` instead.
    -

    +
    +
    +

    +
    +
    @@ -923,7 +992,11 @@ Statistics 101: Standard Deviation guides(fill = guide_legend(title = NULL)) + coord_flip() # [4]
    -

    +
    +
    +

    +
    +
      @@ -964,7 +1037,11 @@ Use mutate to put "prefer not to say" at the bottom guides(fill = guide_legend(title = NULL)) + coord_flip()
      -

      +
      +
      +

      +
      +
      @@ -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 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) { } }); +