From 2dc6007464a0c136cd5efb93ab2fe1a41feef90a Mon Sep 17 00:00:00 2001 From: Laurens Debackere Date: Thu, 29 Apr 2021 08:51:51 +0200 Subject: [PATCH] Initial Commit --- .gitignore | 1 + README.md | 1 + datavis_main.js | 42 ++++++++ index.html | 41 ++++++++ meeting.html | 42 ++++++++ member.html | 42 ++++++++ party.html | 42 ++++++++ styles.css | 248 ++++++++++++++++++++++++++++++++++++++++++++++++ 8 files changed, 459 insertions(+) create mode 100644 .gitignore create mode 100644 README.md create mode 100644 datavis_main.js create mode 100644 index.html create mode 100644 meeting.html create mode 100644 member.html create mode 100644 party.html create mode 100644 styles.css diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..1c2d52b --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +.idea/* diff --git a/README.md b/README.md new file mode 100644 index 0000000..6cee599 --- /dev/null +++ b/README.md @@ -0,0 +1 @@ +# Datavisualisatie \ No newline at end of file diff --git a/datavis_main.js b/datavis_main.js new file mode 100644 index 0000000..039728c --- /dev/null +++ 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 new file mode 100644 index 0000000..f922d6d --- /dev/null +++ b/index.html @@ -0,0 +1,41 @@ + + + + + + Ons Parlement in Data + + + + + + + + +
+ +
+
+ +
+
+ + + diff --git a/meeting.html b/meeting.html new file mode 100644 index 0000000..57a962f --- /dev/null +++ b/meeting.html @@ -0,0 +1,42 @@ + + + + + + Ons Parlement in Data + + + + + + + + + +
+ +
+
+ +
+
+ + + diff --git a/member.html b/member.html new file mode 100644 index 0000000..f8b9e56 --- /dev/null +++ b/member.html @@ -0,0 +1,42 @@ + + + + + + Ons Parlement in Data + + + + + + + + + +
+ +
+
+ +
+
+ + + diff --git a/party.html b/party.html new file mode 100644 index 0000000..e17501d --- /dev/null +++ b/party.html @@ -0,0 +1,42 @@ + + + + + + Ons Parlement in Data + + + + + + + + + +
+ +
+
+ +
+
+ + + diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..d6af082 --- /dev/null +++ b/styles.css @@ -0,0 +1,248 @@ +body { + font-family: sans-serif; +} + +a { + color: #3182bd; +} + +.observablehq { + position: relative; +} + +.observablehq--inspect { + display: none; +} + +a:link:not(:hover) { + text-decoration: none; +} + +.dib { + display: inline-block; +} + +.fw6 { + font-weight: 600; +} + +.tracked { + letter-spacing: 0.1em; +} + +.link { + text-decoration: none; + transition: color 0.15s ease-in; +} + +.link:link, +.link:visited { + transition: color 0.15s ease-in; +} + +.link:hover { + transition: color 0.15s ease-in; +} + +.link:active { + transition: color 0.15s ease-in; +} + +.link:focus { + transition: color 0.15s ease-in; + outline: 1px dotted currentColor; +} + +.w-100 { + width: 100%; +} + +.fixed { + position: fixed; +} + +.white { + color: #fff; +} + +.bg-black-90 { + background-color: rgba(0, 0, 0, 0.9); +} + +.pv3 { + padding-top: 1rem; + padding-bottom: 1rem; +} + +.ph3 { + padding-left: 1rem; + padding-right: 1rem; +} + +.mr3 { + margin-right: 1rem; +} + +.ttu { + text-transform: uppercase; +} + +.f6 { + font-size: 0.875rem; +} + +.dim { + opacity: 1; + transition: opacity 0.15s ease-in; +} + +.dim:hover, +.dim:focus { + opacity: 0.5; + transition: opacity 0.15s ease-in; +} + +.dim:active { + opacity: 0.8; + transition: opacity 0.15s ease-out; +} + +#content { + width: 60vw; +} + +@media screen and (min-width: 30em) { + .pv4-ns { + padding-top: 2rem; + padding-bottom: 2rem; + } +} + +@media screen and (min-width: 30em) and (max-width: 60em) { + .ph4-m { + padding-left: 2rem; + padding-right: 2rem; + } +} + +@media screen and (min-width: 60em) { + .ph5-l { + padding-left: 4rem; + padding-right: 4rem; + } +} + +a.classic { + font-family: "Merriweather", serif; + font-style: italic; +} + +h1, +h2, +h3, +h4 { + color: #222325; + font-family: "Fira Sans", sans-serif; +} + +body { + color: #3c4858; + font-family: "Merriweather", serif; +} + +nav { + font-family: "Fira Sans", sans-serif; +} + +header { + z-index: 99999; +} + +#link-container { + display: inline-block; +} + +.spacer { + height: 80px; /* header */ +} + +table { + width: 100%; +} +table td { + font-size: 10pt; + text-align: center; +} +table tr { + border-bottom: solid; + border-width: 1px; + border-color: #f1f1f1; +} +.light { + font-weight: 300; +} +div[role="graphics-document"] { + text-align: center; +} + +input[type="search"] { + border-radius: 25px; + border: none; + background: #eeeeee; + width: 400px !important; + height: 45px; + padding: 20px; + padding-left: 30px; +} +select { + display: block; + font-size: 16px; + color: #444; + line-height: 1.3; + padding: .6em 1.4em .5em .8em; + box-sizing: border-box; + margin: 0; + border: 1px solid #aaa; + box-shadow: 0 1px 0 1px rgba(0,0,0,.04); + border-radius: .5em; + -moz-appearance: none; + -webkit-appearance: none; + appearance: none; + background-color: #fff; + /* note: bg image below uses 2 urls. The first is an svg data uri for the arrow icon, and the second is the gradient. + for the icon, if you want to change the color, be sure to use `%23` instead of `#`, since it's a url. You can also swap in a different svg icon or an external image reference + + */ + background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'), + linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%); + background-repeat: no-repeat, repeat; + /* arrow icon position (1em from the right, 50% vertical) , then gradient position*/ + background-position: right .7em top 50%, 0 0; + /* icon size, then gradient */ + background-size: .65em auto, 100%; +} +label { + font-weight: bold; +} +button { + transition: all ease 0.15s; + color: #333 !important; + background-color: transparent; + border: solid black; + padding: 5px 20px; + padding: 5px 20px; + font-family: Fira Sans, serif !important; + margin: 0px 10px !important; + text-align: center; + text-decoration: none; + display: inline-block; + cursor: pointer; + border-radius: 3px; +} +button:hover { + background-color: #eee; +} +.fira{ + font-family: 'Fira Sans', sans-serif; + color: #222325; +} \ No newline at end of file