Split datawrapper showcase from the rest.

blw-ofag-ufag · Jun 3, 2024 · 09a537f · 09a537f
1 parent fdb4331
commit 09a537f
Show file tree

Hide file tree

Showing 16 changed files with 2,938 additions and 376 deletions.
diff --git a/docs/datawrapper.html b/docs/datawrapper.html
@@ -0,0 +1,203 @@
+<!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.2.269">
+
+<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
+
+
+<title>datawrapper</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 -1.6em;
+  vertical-align: middle;
+}
+</style>
+
+
+<script src="datawrapper_files/libs/clipboard/clipboard.min.js"></script>
+<script src="datawrapper_files/libs/quarto-html/quarto.js"></script>
+<script src="datawrapper_files/libs/quarto-html/popper.min.js"></script>
+<script src="datawrapper_files/libs/quarto-html/tippy.umd.min.js"></script>
+<script src="datawrapper_files/libs/quarto-html/anchor.min.js"></script>
+<link href="datawrapper_files/libs/quarto-html/tippy.css" rel="stylesheet">
+<link href="datawrapper_files/libs/quarto-html/quarto-syntax-highlighting.css" rel="stylesheet" id="quarto-text-highlighting-styles">
+<script src="datawrapper_files/libs/bootstrap/bootstrap.min.js"></script>
+<link href="datawrapper_files/libs/bootstrap/bootstrap-icons.css" rel="stylesheet">
+<link href="datawrapper_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 page-columns page-full" id="quarto-document-content">
+
+
+
+<section id="was-kann-datawrapper-sonst" class="level1 page-columns page-full">
+<h1>Was kann Datawrapper sonst?</h1>
+<p>Datawrapper kann einiges mehr als nur Zeitreihen als Linien zeichnen. Das folgende Beispiel ist aus einem <a href="https://www.atlas.bfs.admin.ch/maps/13/de/17965_5882_5872_4801/27738.html">Datensatz des Bundesamtes für Statistik BFS</a> generiert.</p>
+<div style="min-height:764px"><script type="text/javascript" defer="" src="https://datawrapper.dwcdn.net/rG8gr/embed.js?v=1" charset="utf-8"></script><noscript><img src="https://datawrapper.dwcdn.net/rG8gr/full.png" alt=""></noscript></div>
+<hr style="visibility:hidden;">
+<p>Die Daten zeigen die Verteilung der landwirtschaftlichen Nutzflächen pro Kanton als horizontales Säulendiagramm. Diese Art von Diagramm ähnelt stark einer Tabelle: Sie lässt sich gut lesen, darunter liegende Muster sind aber nur schwer feststellbar.</p>
+<p>Ein Streudiagramm ist dafür möglicherweise angebrachter. Mit Datawrapper lassen sich auch solche erstellen, inklusive generierter Trendlinie.</p>
+<div style="min-height:477px"><script type="text/javascript" defer="" src="https://datawrapper.dwcdn.net/QksOK/embed.js?v=1" charset="utf-8"></script><noscript><img src="https://datawrapper.dwcdn.net/QksOK/full.png" alt=""></noscript></div>
+<hr style="visibility:hidden;">
+<p>Allerdings ist möglicherweise auch diese Art von Diagramm nicht die beste für die Daten. Schliesslich handelt es sich um Daten von Kantonen, also geografischen Einheiten. Das schreit dannach, eine Karte zu erstellen. Glücklicherweise kann Datawrapper auch damit umgehen. Das Tool bietet tausende vorgefertigter Karten, welche man durch ein automatisches Matching schnell mit Daten füttern kann.</p>
+<p>Zu Demonstrationszwecken wird hier die durchschnittliche landwirtschaftlich Nutzfläche pro Bezirk (und nicht Kanton) eingespielt. Das ganze funktioniert auch gut, wenn die Grafik vergrössert wird.</p>
+<div class="column-page">
+<div style="min-height:836px"><script type="text/javascript" defer="" src="https://datawrapper.dwcdn.net/OHJZB/embed.js?v=9" charset="utf-8"></script><noscript><img src="https://datawrapper.dwcdn.net/OHJZB/full.png" alt=""></noscript></div>
+</div>
+</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 clipboard = new window.ClipboardJS('.code-copy-button', {
+    target: function(trigger) {
+      return trigger.previousElementSibling;
+    }
+  });
+  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;
+    });
+  }
+  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>
diff --git a/docs/datawrapper.qmd b/docs/datawrapper.qmd
@@ -0,0 +1,29 @@
+# Was kann Datawrapper sonst?
+
+Datawrapper kann einiges mehr als nur Zeitreihen als Linien zeichnen. Das folgende Beispiel ist aus einem [Datensatz des Bundesamtes für Statistik BFS](https://www.atlas.bfs.admin.ch/maps/13/de/17965_5882_5872_4801/27738.html) generiert.
+
+```{=html}
+<div style="min-height:764px"><script type="text/javascript" defer src="https://datawrapper.dwcdn.net/rG8gr/embed.js?v=1" charset="utf-8"></script><noscript><img src="https://datawrapper.dwcdn.net/rG8gr/full.png" alt="" /></noscript></div>
+```
+
+<hr style="visibility:hidden;" />
+
+Die Daten zeigen die Verteilung der landwirtschaftlichen Nutzflächen pro Kanton als horizontales Säulendiagramm. Diese Art von Diagramm ähnelt stark einer Tabelle: Sie lässt sich gut lesen, darunter liegende Muster sind aber nur schwer feststellbar.
+
+Ein Streudiagramm ist dafür möglicherweise angebrachter. Mit Datawrapper lassen sich auch solche erstellen, inklusive generierter Trendlinie.
+
+```{=html}
+<div style="min-height:477px"><script type="text/javascript" defer src="https://datawrapper.dwcdn.net/QksOK/embed.js?v=1" charset="utf-8"></script><noscript><img src="https://datawrapper.dwcdn.net/QksOK/full.png" alt="" /></noscript></div>
+```
+
+<hr style="visibility:hidden;" />
+
+Allerdings ist möglicherweise auch diese Art von Diagramm nicht die beste für die Daten. Schliesslich handelt es sich um Daten von Kantonen, also geografischen Einheiten. Das schreit dannach, eine Karte zu erstellen. Glücklicherweise kann Datawrapper auch damit umgehen. Das Tool bietet tausende vorgefertigter Karten, welche man durch ein automatisches Matching schnell mit Daten füttern kann.
+
+Zu Demonstrationszwecken wird hier die durchschnittliche landwirtschaftlich Nutzfläche pro Bezirk (und nicht Kanton) eingespielt. Das ganze funktioniert auch gut, wenn die Grafik vergrössert wird.
+
+:::{.column-page}
+```{=html}
+<div style="min-height:836px"><script type="text/javascript" defer src="https://datawrapper.dwcdn.net/OHJZB/embed.js?v=9" charset="utf-8"></script><noscript><img src="https://datawrapper.dwcdn.net/OHJZB/full.png" alt="" /></noscript></div>
+```
+:::