Skip to content

Commit 09a537f

Browse files
Damian-OswaldDamian-Oswald
committed
Split datawrapper showcase from the rest.
1 parent fdb4331 commit 09a537f

File tree

16 files changed

+2938
-376
lines changed

16 files changed

+2938
-376
lines changed

‎docs/datawrapper.html

Lines changed: 203 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,203 @@
1+
<!DOCTYPE html>
2+
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head>
3+
4+
<meta charset="utf-8">
5+
<meta name="generator" content="quarto-1.2.269">
6+
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
8+
9+
10+
<title>datawrapper</title>
11+
<style>
12+
code{white-space: pre-wrap;}
13+
span.smallcaps{font-variant: small-caps;}
14+
div.columns{display: flex; gap: min(4vw, 1.5em);}
15+
div.column{flex: auto; overflow-x: auto;}
16+
div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;}
17+
ul.task-list{list-style: none;}
18+
ul.task-list li input[type="checkbox"] {
19+
width: 0.8em;
20+
margin: 0 0.8em 0.2em -1.6em;
21+
vertical-align: middle;
22+
}
23+
</style>
24+
25+
26+
<script src="datawrapper_files/libs/clipboard/clipboard.min.js"></script>
27+
<script src="datawrapper_files/libs/quarto-html/quarto.js"></script>
28+
<script src="datawrapper_files/libs/quarto-html/popper.min.js"></script>
29+
<script src="datawrapper_files/libs/quarto-html/tippy.umd.min.js"></script>
30+
<script src="datawrapper_files/libs/quarto-html/anchor.min.js"></script>
31+
<link href="datawrapper_files/libs/quarto-html/tippy.css" rel="stylesheet">
32+
<link href="datawrapper_files/libs/quarto-html/quarto-syntax-highlighting.css" rel="stylesheet" id="quarto-text-highlighting-styles">
33+
<script src="datawrapper_files/libs/bootstrap/bootstrap.min.js"></script>
34+
<link href="datawrapper_files/libs/bootstrap/bootstrap-icons.css" rel="stylesheet">
35+
<link href="datawrapper_files/libs/bootstrap/bootstrap.min.css" rel="stylesheet" id="quarto-bootstrap" data-mode="light">
36+
37+
38+
</head>
39+
40+
<body class="fullcontent">
41+
42+
<div id="quarto-content" class="page-columns page-rows-contents page-layout-article">
43+
44+
<main class="content page-columns page-full" id="quarto-document-content">
45+
46+
47+
48+
<section id="was-kann-datawrapper-sonst" class="level1 page-columns page-full">
49+
<h1>Was kann Datawrapper sonst?</h1>
50+
<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>
51+
<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>
52+
<hr style="visibility:hidden;">
53+
<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>
54+
<p>Ein Streudiagramm ist dafür möglicherweise angebrachter. Mit Datawrapper lassen sich auch solche erstellen, inklusive generierter Trendlinie.</p>
55+
<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>
56+
<hr style="visibility:hidden;">
57+
<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>
58+
<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>
59+
<div class="column-page">
60+
<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>
61+
</div>
62+
</section>
63+
64+
</main>
65+
<!-- /main column -->
66+
<script id="quarto-html-after-body" type="application/javascript">
67+
window.document.addEventListener("DOMContentLoaded", function (event) {
68+
const toggleBodyColorMode = (bsSheetEl) => {
69+
const mode = bsSheetEl.getAttribute("data-mode");
70+
const bodyEl = window.document.querySelector("body");
71+
if (mode === "dark") {
72+
bodyEl.classList.add("quarto-dark");
73+
bodyEl.classList.remove("quarto-light");
74+
} else {
75+
bodyEl.classList.add("quarto-light");
76+
bodyEl.classList.remove("quarto-dark");
77+
}
78+
}
79+
const toggleBodyColorPrimary = () => {
80+
const bsSheetEl = window.document.querySelector("link#quarto-bootstrap");
81+
if (bsSheetEl) {
82+
toggleBodyColorMode(bsSheetEl);
83+
}
84+
}
85+
toggleBodyColorPrimary();
86+
const icon = "";
87+
const anchorJS = new window.AnchorJS();
88+
anchorJS.options = {
89+
placement: 'right',
90+
icon: icon
91+
};
92+
anchorJS.add('.anchored');
93+
const clipboard = new window.ClipboardJS('.code-copy-button', {
94+
target: function(trigger) {
95+
return trigger.previousElementSibling;
96+
}
97+
});
98+
clipboard.on('success', function(e) {
99+
// button target
100+
const button = e.trigger;
101+
// don't keep focus
102+
button.blur();
103+
// flash "checked"
104+
button.classList.add('code-copy-button-checked');
105+
var currentTitle = button.getAttribute("title");
106+
button.setAttribute("title", "Copied!");
107+
let tooltip;
108+
if (window.bootstrap) {
109+
button.setAttribute("data-bs-toggle", "tooltip");
110+
button.setAttribute("data-bs-placement", "left");
111+
button.setAttribute("data-bs-title", "Copied!");
112+
tooltip = new bootstrap.Tooltip(button,
113+
{ trigger: "manual",
114+
customClass: "code-copy-button-tooltip",
115+
offset: [0, -8]});
116+
tooltip.show();
117+
}
118+
setTimeout(function() {
119+
if (tooltip) {
120+
tooltip.hide();
121+
button.removeAttribute("data-bs-title");
122+
button.removeAttribute("data-bs-toggle");
123+
button.removeAttribute("data-bs-placement");
124+
}
125+
button.setAttribute("title", currentTitle);
126+
button.classList.remove('code-copy-button-checked');
127+
}, 1000);
128+
// clear code selection
129+
e.clearSelection();
130+
});
131+
function tippyHover(el, contentFn) {
132+
const config = {
133+
allowHTML: true,
134+
content: contentFn,
135+
maxWidth: 500,
136+
delay: 100,
137+
arrow: false,
138+
appendTo: function(el) {
139+
return el.parentElement;
140+
},
141+
interactive: true,
142+
interactiveBorder: 10,
143+
theme: 'quarto',
144+
placement: 'bottom-start'
145+
};
146+
window.tippy(el, config);
147+
}
148+
const noterefs = window.document.querySelectorAll('a[role="doc-noteref"]');
149+
for (var i=0; i<noterefs.length; i++) {
150+
const ref = noterefs[i];
151+
tippyHover(ref, function() {
152+
// use id or data attribute instead here
153+
let href = ref.getAttribute('data-footnote-href') || ref.getAttribute('href');
154+
try { href = new URL(href).hash; } catch {}
155+
const id = href.replace(/^#\/?/, "");
156+
const note = window.document.getElementById(id);
157+
return note.innerHTML;
158+
});
159+
}
160+
const findCites = (el) => {
161+
const parentEl = el.parentElement;
162+
if (parentEl) {
163+
const cites = parentEl.dataset.cites;
164+
if (cites) {
165+
return {
166+
el,
167+
cites: cites.split(' ')
168+
};
169+
} else {
170+
return findCites(el.parentElement)
171+
}
172+
} else {
173+
return undefined;
174+
}
175+
};
176+
var bibliorefs = window.document.querySelectorAll('a[role="doc-biblioref"]');
177+
for (var i=0; i<bibliorefs.length; i++) {
178+
const ref = bibliorefs[i];
179+
const citeInfo = findCites(ref);
180+
if (citeInfo) {
181+
tippyHover(citeInfo.el, function() {
182+
var popup = window.document.createElement('div');
183+
citeInfo.cites.forEach(function(cite) {
184+
var citeDiv = window.document.createElement('div');
185+
citeDiv.classList.add('hanging-indent');
186+
citeDiv.classList.add('csl-entry');
187+
var biblioDiv = window.document.getElementById('ref-' + cite);
188+
if (biblioDiv) {
189+
citeDiv.innerHTML = biblioDiv.innerHTML;
190+
}
191+
popup.appendChild(citeDiv);
192+
});
193+
return popup.innerHTML;
194+
});
195+
}
196+
}
197+
});
198+
</script>
199+
</div> <!-- /content -->
200+
201+
202+
203+
</body></html>

‎docs/datawrapper.qmd

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
# Was kann Datawrapper sonst?
2+
3+
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.
4+
5+
```{=html}
6+
<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>
7+
```
8+
9+
<hr style="visibility:hidden;" />
10+
11+
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.
12+
13+
Ein Streudiagramm ist dafür möglicherweise angebrachter. Mit Datawrapper lassen sich auch solche erstellen, inklusive generierter Trendlinie.
14+
15+
```{=html}
16+
<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>
17+
```
18+
19+
<hr style="visibility:hidden;" />
20+
21+
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.
22+
23+
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.
24+
25+
:::{.column-page}
26+
```{=html}
27+
<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>
28+
```
29+
:::

0 commit comments

Comments
 (0)