Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add new slides to vector part #55

Merged
merged 2 commits into from
Jul 30, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
296 changes: 151 additions & 145 deletions instructors/2-vector-slides.html

Large diffs are not rendered by default.

16 changes: 16 additions & 0 deletions instructors/2-vector-slides.qmd
Original file line number Diff line number Diff line change
Expand Up @@ -54,9 +54,9 @@

## Geographical latitude and longitude

:::: {.columns}

Check warning on line 57 in instructors/2-vector-slides.qmd

View workflow job for this annotation

GitHub Actions / Build markdown source files if valid

[unknown div] columns

::: {.column width="50%" .nonincremental}

Check warning on line 59 in instructors/2-vector-slides.qmd

View workflow job for this annotation

GitHub Actions / Build markdown source files if valid

[unknown div] column

- **Meridians** – vertical circles with constant longitude, **_great circles_**

Expand All @@ -64,7 +64,7 @@

:::

::: {.column width="50%"}

Check warning on line 67 in instructors/2-vector-slides.qmd

View workflow job for this annotation

GitHub Actions / Build markdown source files if valid

[unknown div] column

![Source: van der Marel (2014)](fig/latlon.png)

Expand All @@ -74,15 +74,15 @@

## Map projection: From the 3D Earth to a 2D map

:::: {.columns}

Check warning on line 77 in instructors/2-vector-slides.qmd

View workflow job for this annotation

GitHub Actions / Build markdown source files if valid

[unknown div] columns

::: {.column width="50%" .nonincremental}

Check warning on line 79 in instructors/2-vector-slides.qmd

View workflow job for this annotation

GitHub Actions / Build markdown source files if valid

[unknown div] column

**Map projection** is a systematic transformation of the latitudes and longitudes of locations on the surface of an ellipsoid into locations on a plane.

:::

::: {.column width="50%"}

Check warning on line 85 in instructors/2-vector-slides.qmd

View workflow job for this annotation

GitHub Actions / Build markdown source files if valid

[unknown div] column

![Source: Data Carpentry (2023)](https://datacarpentry.org/organization-geospatial/fig/orange-peel-earth.jpg)

Expand All @@ -93,13 +93,13 @@

## Different map projections for different purposes

:::::: {.rows}

Check warning on line 96 in instructors/2-vector-slides.qmd

View workflow job for this annotation

GitHub Actions / Build markdown source files if valid

[unknown div] rows

::::: {.row}

Check warning on line 98 in instructors/2-vector-slides.qmd

View workflow job for this annotation

GitHub Actions / Build markdown source files if valid

[unknown div] row

:::: {.columns}

Check warning on line 100 in instructors/2-vector-slides.qmd

View workflow job for this annotation

GitHub Actions / Build markdown source files if valid

[unknown div] columns

::: {.column width="50%"}

Check warning on line 102 in instructors/2-vector-slides.qmd

View workflow job for this annotation

GitHub Actions / Build markdown source files if valid

[unknown div] column

![Source: Knippers (2009)](https://kartoweb.itc.nl/geometrics/Bitmaps/Intro%201.9a.gif){width=100%}

Expand Down Expand Up @@ -202,6 +202,14 @@

:::

## Types of geospatial data

![](fig/raster-vector.jpg)

## Raster and vector representations

![Source: Saab, 2003](fig/raster-vector-data-types.png)

# Geospatial Vector Data in R

## The `sf` package
Expand All @@ -214,6 +222,14 @@
- represents simple features as records in a data frame with a `geometry` column
- function names start with a prefix `st_` ("st" stands for spatial type), which is also handy for auto-completion in RStudio

## Geometry in QGIS

![](fig/geometry-qgis.png)

## Geometry in R

![](fig/geometry-r.png)

# Open and Plot Shapefiles

## Challenge 1: **5 mins**
Expand Down

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Large diffs are not rendered by default.

Binary file added instructors/fig/geometry-qgis.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added instructors/fig/geometry-r.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added instructors/fig/raster-vector-data-types.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added instructors/fig/raster-vector.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
307 changes: 307 additions & 0 deletions instructors/local-data-guidelines.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,307 @@
<!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>Guidelines for local workshop data</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;
}
</style>


<script src="local-data-guidelines_files/libs/clipboard/clipboard.min.js"></script>
<script src="local-data-guidelines_files/libs/quarto-html/quarto.js"></script>
<script src="local-data-guidelines_files/libs/quarto-html/popper.min.js"></script>
<script src="local-data-guidelines_files/libs/quarto-html/tippy.umd.min.js"></script>
<script src="local-data-guidelines_files/libs/quarto-html/anchor.min.js"></script>
<link href="local-data-guidelines_files/libs/quarto-html/tippy.css" rel="stylesheet">
<link href="local-data-guidelines_files/libs/quarto-html/quarto-syntax-highlighting.css" rel="stylesheet" id="quarto-text-highlighting-styles">
<script src="local-data-guidelines_files/libs/bootstrap/bootstrap.min.js"></script>
<link href="local-data-guidelines_files/libs/bootstrap/bootstrap-icons.css" rel="stylesheet">
<link href="local-data-guidelines_files/libs/bootstrap/bootstrap.min.css" rel="stylesheet" id="quarto-bootstrap" data-mode="light">


</head>

<body class="fullcontent">

<div id="quarto-content" class="page-columns page-rows-contents page-layout-article">

<main class="content" id="quarto-document-content">

<header id="title-block-header" class="quarto-title-block default">
<div class="quarto-title">
<h1 class="title">Guidelines for local workshop data</h1>
</div>



<div class="quarto-title-meta">




</div>


</header>

<section id="heading-1" class="level1">
<h1>Heading 1</h1>
<p>text</p>
</section>

</main>
<!-- /main column -->
<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>
</div> <!-- /content -->



</body></html>
10 changes: 10 additions & 0 deletions instructors/local-data-guidelines.qmd
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
---
title: Guidelines for local workshop data
output: html
---

## Heading 1

text

### Heading 2
Loading
Loading