Initial Commit

Parliament-in-Data · Apr 29, 2021 · 2dc6007 · 2dc6007
commit 2dc6007
Show file tree

Hide file tree

Showing 8 changed files with 459 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+.idea/*
diff --git a/README.md b/README.md
@@ -0,0 +1 @@
+# Datavisualisatie
diff --git a/datavis_main.js b/datavis_main.js
@@ -0,0 +1,42 @@
+// Load the Observable runtime and inspector.
+import { Runtime, Inspector } from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js";
+
+const notebook = window._datavis_notebook;
+
+// Load the notebook, observing its cells with a default Inspector that simply
+// renders the value of every cell into the provided DOM node.
+const runtime = new Runtime();
+
+const main = runtime.module(notebook, name => {
+    if(name === 'links') {
+        return {fulfilled(links) {
+            const container = document.getElementById('link-container');
+            container.innerHTML = '';
+            for(const link of links) {
+                const a = document.createElement('a');
+                a.className = "link dim white dib mr3 ttu";
+                a.innerText = link.title;
+                a.href = link.href;
+                //a.title = link.title; // Useless?
+                container.appendChild(a);
+            }
+        }};
+    }
+    return Inspector.into(document.getElementById("content"))();
+});
+
+// Note: no leading / to be able to host on subdir
+main.redefine("index_url", 'index.html');
+main.redefine("party_url", 'party.html');
+main.redefine("member_url", "member.html");
+main.redefine("meeting_url", "meeting.html");
+
+function resizeHandler(_e) {
+    function pxToNr(px) {
+        return +px.slice(0, -2);
+    }
+    const computedStyle = window.getComputedStyle(document.getElementById('content'));
+    main.redefine("width", pxToNr(computedStyle.width) - (pxToNr(computedStyle.paddingLeft) + pxToNr(computedStyle.paddingRight)));
+}
+resizeHandler(null);
+window.addEventListener('resize', resizeHandler);
diff --git a/index.html b/index.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<html>
+
+<head>
+    <title>Ons Parlement in Data</title>
+    <link rel="stylesheet" href="styles.css">
+    <script type="module">
+        import notebook from "https://api.observablehq.com/@laurensdeb/hoe-is-het-gesteld-met-ons-federale-parlement.js?collection=@laurensdeb/belgisch-federaal-parlement&session=55&v=3";
+        window._datavis_notebook = notebook;
+    </script>
+    <script type="module" src="datavis_main.js"></script>
+    <link rel="stylesheet" href="https://unpkg.com/[email protected]/css/tachyons.min.css" />
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <link href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@700&family=Merriweather:ital,wght@0,300;0,400;0,700;1,300;1,400&display=swap" rel="stylesheet"> </head>
+
+<body>
+    <header class="bg-black-90 fixed w-100 ph3 pv3 pv4-ns ph4-m ph5-l nav">
+        <nav class="f6 fw6 tracked">
+            <a class="link dim white dib mr3 classic" href="/"><i>Ons Parlement in <u>Data</u></i></a>
+            <div id="link-container"></div>
+        </nav>
+    </header>
+    <div class="spacer"></div>
+    <a name="top"></a>
+    <article id="content" class="center f5 pv5 lh-copy ph1">
+    </article>
+    <footer class="pv4 ph3 ph5-m ph6-l mid-gray">
+        <small class="f6 db tc"><b>Bronnen: </b> DeKamer.be, Wikipedia, Wikimedia Commons</small>
+        <small class="f6 db tc">De data gebruikt op deze website is vrij beschikbaar onder de <b><a
+                    href="https://choosealicense.com/licenses/mit/" class="ttu">MIT license</a></b></small>
+        <div class="tc mt3">
+            <a href="https://www.dekamer.be" title="Language" class="f6 dib ph2 link mid-gray dim">Website van de Kamer
+                van Volksvertegenwoordigers</a>
+            <a href="https://parlement.thundr.be" title="Terms" class="f6 dib ph2 link mid-gray dim">API</a>
+            <a href="https://github.com/laurensdeb/Federal-Parliament-Scraper" title="Privacy"
+                class="f6 dib ph2 link mid-gray dim">Github</a>
+        </div>
+    </footer>
+</body>
+</html>
diff --git a/meeting.html b/meeting.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<html>
+
+<head>
+    <title>Ons Parlement in Data</title>
+    <link rel="stylesheet" href="styles.css">
+    <script type="module">
+        import notebook from "https://api.observablehq.com/d/c1dbd922b5e365c7.js?collection=@laurensdeb/belgisch-federaal-parlement&v=3";
+        window._datavis_notebook = notebook;
+    </script>
+    <script type="module" src="datavis_main.js"></script>
+    <link rel="stylesheet" href="https://unpkg.com/[email protected]/css/tachyons.min.css" />
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <link href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@700&family=Merriweather:ital,wght@0,300;0,400;0,700;1,300;1,400&display=swap" rel="stylesheet"> </head>
+</head>
+
+<body>
+    <header class="bg-black-90 fixed w-100 ph3 pv3 pv4-ns ph4-m ph5-l nav">
+        <nav class="f6 fw6 tracked">
+            <a class="link dim white dib mr3 classic" href="/"><i>Ons Parlement in <u>Data</u></i></a>
+            <div id="link-container"></div>
+        </nav>
+    </header>
+    <div class="spacer"></div>
+    <a name="top"></a>
+    <article id="content" class="center f5 pv5 lh-copy ph1">
+    </article>
+    <footer class="pv4 ph3 ph5-m ph6-l mid-gray">
+        <small class="f6 db tc"><b>Bronnen: </b> DeKamer.be, Wikipedia, Wikimedia Commons</small>
+        <small class="f6 db tc">De data gebruikt op deze website is vrij beschikbaar onder de <b><a
+                    href="https://choosealicense.com/licenses/mit/" class="ttu">MIT license</a></b></small>
+        <div class="tc mt3">
+            <a href="https://www.dekamer.be" title="Language" class="f6 dib ph2 link mid-gray dim">Website van de Kamer
+                van Volksvertegenwoordigers</a>
+            <a href="https://parlement.thundr.be" title="Terms" class="f6 dib ph2 link mid-gray dim">API</a>
+            <a href="https://github.com/laurensdeb/Federal-Parliament-Scraper" title="Privacy"
+                class="f6 dib ph2 link mid-gray dim">Github</a>
+        </div>
+    </footer>
+</body>
+</html>
diff --git a/member.html b/member.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<html>
+
+<head>
+    <title>Ons Parlement in Data</title>
+    <link rel="stylesheet" href="styles.css">
+    <script type="module">
+        import notebook from "https://api.observablehq.com/d/b5c404104ff8f712.js?collection=@laurensdeb/belgisch-federaal-parlement&v=3";
+        window._datavis_notebook = notebook;
+    </script>
+    <script type="module" src="datavis_main.js"></script>
+    <link rel="stylesheet" href="https://unpkg.com/[email protected]/css/tachyons.min.css" />
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <link href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@700&family=Merriweather:ital,wght@0,300;0,400;0,700;1,300;1,400&display=swap" rel="stylesheet"> </head>
+</head>
+
+<body>
+    <header class="bg-black-90 fixed w-100 ph3 pv3 pv4-ns ph4-m ph5-l nav">
+        <nav class="f6 fw6 tracked">
+            <a class="link dim white dib mr3 classic" href="/"><i>Ons Parlement in <u>Data</u></i></a>
+            <div id="link-container"></div>
+        </nav>
+    </header>
+    <div class="spacer"></div>
+    <a name="top"></a>
+    <article id="content" class="center f5 pv5 lh-copy ph1">
+    </article>
+    <footer class="pv4 ph3 ph5-m ph6-l mid-gray">
+        <small class="f6 db tc"><b>Bronnen: </b> DeKamer.be, Wikipedia, Wikimedia Commons</small>
+        <small class="f6 db tc">De data gebruikt op deze website is vrij beschikbaar onder de <b><a
+                    href="https://choosealicense.com/licenses/mit/" class="ttu">MIT license</a></b></small>
+        <div class="tc mt3">
+            <a href="https://www.dekamer.be" title="Language" class="f6 dib ph2 link mid-gray dim">Website van de Kamer
+                van Volksvertegenwoordigers</a>
+            <a href="https://parlement.thundr.be" title="Terms" class="f6 dib ph2 link mid-gray dim">API</a>
+            <a href="https://github.com/laurensdeb/Federal-Parliament-Scraper" title="Privacy"
+                class="f6 dib ph2 link mid-gray dim">Github</a>
+        </div>
+    </footer>
+</body>
+</html>
diff --git a/party.html b/party.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<html>
+
+<head>
+    <title>Ons Parlement in Data</title>
+    <link rel="stylesheet" href="styles.css">
+    <script type="module">
+        import notebook from "https://api.observablehq.com/d/3ce22ff83ac53c4e.js?collection=@laurensdeb/belgisch-federaal-parlement&v=3";
+        window._datavis_notebook = notebook;
+    </script>
+    <script type="module" src="datavis_main.js"></script>
+    <link rel="stylesheet" href="https://unpkg.com/[email protected]/css/tachyons.min.css" />
+    <link rel="preconnect" href="https://fonts.gstatic.com">
+    <link href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@700&family=Merriweather:ital,wght@0,300;0,400;0,700;1,300;1,400&display=swap" rel="stylesheet"> </head>
+</head>
+
+<body>
+    <header class="bg-black-90 fixed w-100 ph3 pv3 pv4-ns ph4-m ph5-l nav">
+        <nav class="f6 fw6 tracked">
+            <a class="link dim white dib mr3 classic" href="/"><i>Ons Parlement in <u>Data</u></i></a>
+            <div id="link-container"></div>
+        </nav>
+    </header>
+    <div class="spacer"></div>
+    <a name="top"></a>
+    <article id="content" class="center f5 pv5 lh-copy ph1">
+    </article>
+    <footer class="pv4 ph3 ph5-m ph6-l mid-gray">
+        <small class="f6 db tc"><b>Bronnen: </b> DeKamer.be, Wikipedia, Wikimedia Commons</small>
+        <small class="f6 db tc">De data gebruikt op deze website is vrij beschikbaar onder de <b><a
+                    href="https://choosealicense.com/licenses/mit/" class="ttu">MIT license</a></b></small>
+        <div class="tc mt3">
+            <a href="https://www.dekamer.be" title="Language" class="f6 dib ph2 link mid-gray dim">Website van de Kamer
+                van Volksvertegenwoordigers</a>
+            <a href="https://parlement.thundr.be" title="Terms" class="f6 dib ph2 link mid-gray dim">API</a>
+            <a href="https://github.com/laurensdeb/Federal-Parliament-Scraper" title="Privacy"
+                class="f6 dib ph2 link mid-gray dim">Github</a>
+        </div>
+    </footer>
+</body>
+</html>