From 4f257e2612bf2888d03004c1031c9d83174aecd5 Mon Sep 17 00:00:00 2001 From: Kai Waldrant Date: Tue, 15 Oct 2024 15:27:46 +0200 Subject: [PATCH 01/44] update submodules --- _core | 2 +- _openproblems | 2 +- _task_template | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/_core b/_core index 3ada7662..a938a529 160000 --- a/_core +++ b/_core @@ -1 +1 @@ -Subproject commit 3ada76624ec63cd1e751041f186605e9de600456 +Subproject commit a938a52915b3b4af67e04c92f3dfd13a31963413 diff --git a/_openproblems b/_openproblems index bf274d82..559f9776 160000 --- a/_openproblems +++ b/_openproblems @@ -1 +1 @@ -Subproject commit bf274d8279e2686df64b75a799c08aa9bf311101 +Subproject commit 559f97768212dfe9e3b427c36b8223ee5d4b9651 diff --git a/_task_template b/_task_template index 8461f1fb..29d5e529 160000 --- a/_task_template +++ b/_task_template @@ -1 +1 @@ -Subproject commit 8461f1fb05336fd1f9f93f883679193a7a260ecc +Subproject commit 29d5e529c83dcd23ab211be4b3c8c534462d0066 From bcbfca99f3aac1aea1a82ccd2b5e4aa6a3160cd9 Mon Sep 17 00:00:00 2001 From: Kai Waldrant Date: Tue, 15 Oct 2024 15:28:07 +0200 Subject: [PATCH 02/44] update github actions --- .github/workflows/quarto_netlify.yml | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.github/workflows/quarto_netlify.yml b/.github/workflows/quarto_netlify.yml index afd9bb44..6892c00f 100644 --- a/.github/workflows/quarto_netlify.yml +++ b/.github/workflows/quarto_netlify.yml @@ -21,6 +21,8 @@ jobs: env: BRANCH_NAME: ${{ github.head_ref || github.ref_name }} NETLIFY_SITE_ID: 397b6416-708f-4133-afe9-9a07ed2e03bf + supabase_url: https://bleficzaoyltozjjndha.supabase.co + SUPABASE_KEY: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImJsZWZpY3phb3lsdG96ampuZGhhIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MjQyNDI2ODMsImV4cCI6MjAzOTgxODY4M30.fHtpJTveDUF1z07_k7FZX3wLy7bXpkYl5KyA5o_EuQY # ${{ secrets.SUPABASE_KEY }} steps: - uses: actions/checkout@v4 From f2155d74f9531432affe50bacc644cf0425c2ec6 Mon Sep 17 00:00:00 2001 From: Kai Waldrant Date: Tue, 15 Oct 2024 15:28:17 +0200 Subject: [PATCH 03/44] Add timeline --- results/index.qmd | 43 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 43 insertions(+) diff --git a/results/index.qmd b/results/index.qmd index d351b7bd..33b54bd4 100644 --- a/results/index.qmd +++ b/results/index.qmd @@ -22,3 +22,46 @@ css: [../style/style-hero.css, tasks.css] ## Additional information * [Task quality control](quality_control.qmd) + + + + +:::{#timeline} +::: + +```{python env-variables} +import os + +supabase_url = os.environ.get("SUPABASE_URL") +supabase_key = os.environ.get("SUPABASE_KEY") + +ojs_define(supabase_url=supabase_url, supabase_key=supabase_key) + +``` + +```{ojs requires} +ms = require('d3-milestones'); +sb = require('@supabase/supabase-js'); +``` + + +```{ojs supabase_data} +supabase = sb.createClient(supabase_url, supabase_key); +data = await supabase + .from('timeline') + .select(); +``` + + +```{ojs timeline} + +ms('#timeline') + .mapping({ + 'timestamp': 'first_run', + 'text': 'task' + }) + .optimize(true) + .parseTime('%Y-%m-%d') + .aggregateBy('month') + .render(data.data); +``` \ No newline at end of file From 8888a16e6201fc6bdc14250695c97daefa1a4b7b Mon Sep 17 00:00:00 2001 From: Kai Waldrant Date: Tue, 15 Oct 2024 16:52:14 +0200 Subject: [PATCH 04/44] add css --- results/index.qmd | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/results/index.qmd b/results/index.qmd index 33b54bd4..b6ead5ea 100644 --- a/results/index.qmd +++ b/results/index.qmd @@ -13,7 +13,9 @@ listing: page-size: 100 filter-ui: true toc: false -css: [../style/style-hero.css, tasks.css] +execute: + echo: false +css: [../style/style-hero.css, tasks.css, https://unpkg.com/d3-milestones/build/d3-milestones.css] --- :::{#tasks} @@ -55,7 +57,7 @@ data = await supabase ```{ojs timeline} -ms('#timeline') +timeline = ms('#timeline') .mapping({ 'timestamp': 'first_run', 'text': 'task' From 12d929f1161ffea3bfe62c04e2510096a5a2c0db Mon Sep 17 00:00:00 2001 From: Kai Waldrant Date: Tue, 15 Oct 2024 18:09:08 +0200 Subject: [PATCH 05/44] WIP --- results/index.qmd | 26 ++++++++-- results/milestones.css | 111 +++++++++++++++++++++++++++++++++++++++++ 2 files changed, 133 insertions(+), 4 deletions(-) create mode 100644 results/milestones.css diff --git a/results/index.qmd b/results/index.qmd index b6ead5ea..c861bd88 100644 --- a/results/index.qmd +++ b/results/index.qmd @@ -15,9 +15,16 @@ listing: toc: false execute: echo: false -css: [../style/style-hero.css, tasks.css, https://unpkg.com/d3-milestones/build/d3-milestones.css] +css: [../style/style-hero.css, tasks.css, milestones.css] --- +:::{#timeline} + +## Timeline + +::: + + :::{#tasks} ::: @@ -28,8 +35,7 @@ css: [../style/style-hero.css, tasks.css, https://unpkg.com/d3-milestones/build/ -:::{#timeline} -::: + ```{python env-variables} import os @@ -55,6 +61,18 @@ data = await supabase ``` +```{ojs} +timelineArray = []; +{ + for (let year = 2020; year <= 2025; year++) { + timelineArray.push({ first_run: `${year}-01-01`, task: ''}); + } +} + +combined =data.data.concat(timelineArray); +``` + + ```{ojs timeline} timeline = ms('#timeline') @@ -65,5 +83,5 @@ timeline = ms('#timeline') .optimize(true) .parseTime('%Y-%m-%d') .aggregateBy('month') - .render(data.data); + .render(combined); ``` \ No newline at end of file diff --git a/results/milestones.css b/results/milestones.css new file mode 100644 index 00000000..43ab83c6 --- /dev/null +++ b/results/milestones.css @@ -0,0 +1,111 @@ +.milestones__category_label { + display: inline-block; + text-align: right; + font-size: 14px; + margin-top: -4px; +} +.milestones__horizontal_line { + position: absolute; + background-color: #000; + height: 3px; + margin-top: 4px; + margin-left: 5.5px; + border-radius: 1.5px; +} +.milestones__vertical_line { + position: absolute; + background-color: #000; + width: 3px; + margin-left: 4px; + margin-bottom: 5.5px; + border-radius: 1.5px; +} +.milestones__group { + position: absolute; + font-family: sans-serif; + font-size: 10px; +} +.milestones__group__bullet { + background-color: #fff; + border: 3px solid #333; + border-radius: 50%; + width: 0px; + height: 0px; + padding: 2.5px; +} +.milestones__group__label-horizontal, +.milestones__group__label-vertical { + position: absolute; + padding: 0; + color: #666; +} +.milestones__group__label-horizontal { + border-left: 1px solid #000; + margin-left: 5px; +} +.milestones__group__label-horizontal div { + position: relative; + margin-left: 3px; + display: inline-block; +} +.milestones__group__label-vertical { + padding-left: 10px; + padding-bottom: 0px; + border-bottom: 1px solid #000; + margin-bottom: -5.5px; + margin-left: 10px; + bottom: 100%; + overflow: visible; +} +.milestones__group__label-vertical .wrapper { + min-width: 100px; + max-width: 300px; + border-left: 1px solid black; + border-bottom: 1px solid white; + margin-bottom: -1px; + padding-left: 5px; +} +.milestones__group__label-above-horizontal { + bottom: 100%; +} +.milestones__group__label-above-vertical { + padding-left: 0px; + padding-right: 10px; + right: 100%; + text-align: right; +} +.milestones__group__label-above-vertical .wrapper { + border-left: 0; + border-right: 1px solid black; + padding-left: 0px; + padding-right: 5px; +} +.milestones__group__label-last { + right: 100%; + border-left: 0; + border-right: 1px solid #000; + margin-left: 0; + margin-right: -6px; + text-align: right; +} +.milestones__group__label-last div { + margin-left: 0px; + margin-right: 3px; +} +.milestones__group__label__text-vertical { + display: table-cell; + vertical-align: bottom; +} +.milestones__group__label__text__title { + color: #000; + font-weight: bold; + font-size: 11px; + white-space: nowrap; +} +.milestones__group__label__text__event { + cursor: pointer; +} +.milestones__group__label__text__event--hover { + background: #efefef; + color: #313131; +} \ No newline at end of file From 6b50bbee8fda68e72c5bed306738afee9ce9fd03 Mon Sep 17 00:00:00 2001 From: Kai Waldrant Date: Thu, 17 Oct 2024 08:55:38 +0200 Subject: [PATCH 06/44] fix actions --- .github/workflows/quarto_netlify.yml | 3 +++ 1 file changed, 3 insertions(+) diff --git a/.github/workflows/quarto_netlify.yml b/.github/workflows/quarto_netlify.yml index 6892c00f..50ed6fe4 100644 --- a/.github/workflows/quarto_netlify.yml +++ b/.github/workflows/quarto_netlify.yml @@ -25,6 +25,9 @@ jobs: SUPABASE_KEY: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImJsZWZpY3phb3lsdG96ampuZGhhIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MjQyNDI2ODMsImV4cCI6MjAzOTgxODY4M30.fHtpJTveDUF1z07_k7FZX3wLy7bXpkYl5KyA5o_EuQY # ${{ secrets.SUPABASE_KEY }} steps: + - name: install libfontconfig1-dev + run: sudo apt-get intall libfontconfig1-dev + - uses: actions/checkout@v4 with: submodules: recursive From 30a8934422a22a535d99ca13eac1ab3e8267ca23 Mon Sep 17 00:00:00 2001 From: Kai Waldrant Date: Thu, 17 Oct 2024 08:56:28 +0200 Subject: [PATCH 07/44] fix typo --- .github/workflows/quarto_netlify.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/quarto_netlify.yml b/.github/workflows/quarto_netlify.yml index 50ed6fe4..60ace120 100644 --- a/.github/workflows/quarto_netlify.yml +++ b/.github/workflows/quarto_netlify.yml @@ -26,7 +26,7 @@ jobs: steps: - name: install libfontconfig1-dev - run: sudo apt-get intall libfontconfig1-dev + run: sudo apt-get install libfontconfig1-dev - uses: actions/checkout@v4 with: From 30ce83aac7262d6cf3b1c86d44b3f7c14b24aa68 Mon Sep 17 00:00:00 2001 From: Kai Waldrant Date: Thu, 17 Oct 2024 09:19:09 +0200 Subject: [PATCH 08/44] Use R instead of python --- results/index.qmd | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/results/index.qmd b/results/index.qmd index c861bd88..3d1b65de 100644 --- a/results/index.qmd +++ b/results/index.qmd @@ -37,11 +37,9 @@ css: [../style/style-hero.css, tasks.css, milestones.css] -```{python env-variables} -import os - -supabase_url = os.environ.get("SUPABASE_URL") -supabase_key = os.environ.get("SUPABASE_KEY") +```{R env-variables} +supabase_url <- Sys.getenv("SUPABASE_URL") +supabase_key <- Sys.getenv("SUPABASE_KEY") ojs_define(supabase_url=supabase_url, supabase_key=supabase_key) From 1aff679145b6f9ff006973ef8a887fea7224261e Mon Sep 17 00:00:00 2001 From: Kai Waldrant Date: Thu, 17 Oct 2024 11:34:10 +0200 Subject: [PATCH 09/44] fix supabase_url --- .github/workflows/quarto_netlify.yml | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/.github/workflows/quarto_netlify.yml b/.github/workflows/quarto_netlify.yml index 60ace120..e8e59c0e 100644 --- a/.github/workflows/quarto_netlify.yml +++ b/.github/workflows/quarto_netlify.yml @@ -21,13 +21,10 @@ jobs: env: BRANCH_NAME: ${{ github.head_ref || github.ref_name }} NETLIFY_SITE_ID: 397b6416-708f-4133-afe9-9a07ed2e03bf - supabase_url: https://bleficzaoyltozjjndha.supabase.co + UPABASE_URL: https://bleficzaoyltozjjndha.supabase.co SUPABASE_KEY: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImJsZWZpY3phb3lsdG96ampuZGhhIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MjQyNDI2ODMsImV4cCI6MjAzOTgxODY4M30.fHtpJTveDUF1z07_k7FZX3wLy7bXpkYl5KyA5o_EuQY # ${{ secrets.SUPABASE_KEY }} steps: - - name: install libfontconfig1-dev - run: sudo apt-get install libfontconfig1-dev - - uses: actions/checkout@v4 with: submodules: recursive From dc068f4f82adfcda31c103394581c5a11cf7009e Mon Sep 17 00:00:00 2001 From: Kai Waldrant Date: Thu, 17 Oct 2024 14:40:19 +0200 Subject: [PATCH 10/44] ci force From 29ff0cd5dbbe0345dc92f0f44eedf1c1ababd4ac Mon Sep 17 00:00:00 2001 From: Kai Waldrant Date: Thu, 17 Oct 2024 14:42:18 +0200 Subject: [PATCH 11/44] fix typo --- .github/workflows/quarto_netlify.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/quarto_netlify.yml b/.github/workflows/quarto_netlify.yml index e8e59c0e..8132fdec 100644 --- a/.github/workflows/quarto_netlify.yml +++ b/.github/workflows/quarto_netlify.yml @@ -21,7 +21,7 @@ jobs: env: BRANCH_NAME: ${{ github.head_ref || github.ref_name }} NETLIFY_SITE_ID: 397b6416-708f-4133-afe9-9a07ed2e03bf - UPABASE_URL: https://bleficzaoyltozjjndha.supabase.co + SUPABASE_URL: https://bleficzaoyltozjjndha.supabase.co SUPABASE_KEY: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImJsZWZpY3phb3lsdG96ampuZGhhIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MjQyNDI2ODMsImV4cCI6MjAzOTgxODY4M30.fHtpJTveDUF1z07_k7FZX3wLy7bXpkYl5KyA5o_EuQY # ${{ secrets.SUPABASE_KEY }} steps: From 7656eed458b610c017d2bc56e2d56d5b19e27fd9 Mon Sep 17 00:00:00 2001 From: Kai Waldrant Date: Thu, 17 Oct 2024 14:54:37 +0200 Subject: [PATCH 12/44] add os env --- .github/workflows/quarto_netlify.yml | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/.github/workflows/quarto_netlify.yml b/.github/workflows/quarto_netlify.yml index 8132fdec..813675f3 100644 --- a/.github/workflows/quarto_netlify.yml +++ b/.github/workflows/quarto_netlify.yml @@ -25,6 +25,11 @@ jobs: SUPABASE_KEY: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImJsZWZpY3phb3lsdG96ampuZGhhIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MjQyNDI2ODMsImV4cCI6MjAzOTgxODY4M30.fHtpJTveDUF1z07_k7FZX3wLy7bXpkYl5KyA5o_EuQY # ${{ secrets.SUPABASE_KEY }} steps: + - name: setup os env + run: | + export SUPABASE_URL=${{ env.SUPABASE_URL }} && \ + export SUPABASE_KEY=${{ env.SUPABASE_KEY }} + - uses: actions/checkout@v4 with: submodules: recursive From 72bfe9bb4facbfeb57e2485142bb99c5e40afce5 Mon Sep 17 00:00:00 2001 From: Robrecht Cannoodt Date: Thu, 17 Oct 2024 15:38:17 +0200 Subject: [PATCH 13/44] Update .github/workflows/quarto_netlify.yml --- .github/workflows/quarto_netlify.yml | 5 ----- 1 file changed, 5 deletions(-) diff --git a/.github/workflows/quarto_netlify.yml b/.github/workflows/quarto_netlify.yml index 813675f3..8132fdec 100644 --- a/.github/workflows/quarto_netlify.yml +++ b/.github/workflows/quarto_netlify.yml @@ -25,11 +25,6 @@ jobs: SUPABASE_KEY: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImJsZWZpY3phb3lsdG96ampuZGhhIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MjQyNDI2ODMsImV4cCI6MjAzOTgxODY4M30.fHtpJTveDUF1z07_k7FZX3wLy7bXpkYl5KyA5o_EuQY # ${{ secrets.SUPABASE_KEY }} steps: - - name: setup os env - run: | - export SUPABASE_URL=${{ env.SUPABASE_URL }} && \ - export SUPABASE_KEY=${{ env.SUPABASE_KEY }} - - uses: actions/checkout@v4 with: submodules: recursive From a58dd989be7e87c91bf0cf977161c77c89a4ec62 Mon Sep 17 00:00:00 2001 From: Kai Waldrant Date: Thu, 17 Oct 2024 16:40:24 +0200 Subject: [PATCH 14/44] WIP --- .github/workflows/quarto_netlify.yml | 2 - documentation/index.qmd | 54 +++++++++++++++++++ {results => documentation}/milestones.css | 10 ++-- results/index.qmd | 63 +---------------------- 4 files changed, 60 insertions(+), 69 deletions(-) rename {results => documentation}/milestones.css (97%) diff --git a/.github/workflows/quarto_netlify.yml b/.github/workflows/quarto_netlify.yml index 8132fdec..afd9bb44 100644 --- a/.github/workflows/quarto_netlify.yml +++ b/.github/workflows/quarto_netlify.yml @@ -21,8 +21,6 @@ jobs: env: BRANCH_NAME: ${{ github.head_ref || github.ref_name }} NETLIFY_SITE_ID: 397b6416-708f-4133-afe9-9a07ed2e03bf - SUPABASE_URL: https://bleficzaoyltozjjndha.supabase.co - SUPABASE_KEY: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImJsZWZpY3phb3lsdG96ampuZGhhIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MjQyNDI2ODMsImV4cCI6MjAzOTgxODY4M30.fHtpJTveDUF1z07_k7FZX3wLy7bXpkYl5KyA5o_EuQY # ${{ secrets.SUPABASE_KEY }} steps: - uses: actions/checkout@v4 diff --git a/documentation/index.qmd b/documentation/index.qmd index 26c34369..9088b6b0 100644 --- a/documentation/index.qmd +++ b/documentation/index.qmd @@ -6,6 +6,9 @@ listing: template: ../style/listing.ejs type: default contents: "./*/index.qmd" +execute: + echo: false +css: "milestones.css" --- Welcome to the OpenProblems documentation! @@ -25,3 +28,54 @@ One simple but important way to contribute is to spread the word about the libra Finally, we want to emphasize that OpenProblems is an inclusive community and we expect all members to adhere to our [code of conduct](fundamentals/philosophy.qmd#inclusiveness). We hope that this documentation helps you get started with OpenProblems and we look forward to your contributions. + + +:::{#timeline} + +## Timeline + + +::: + +```{ojs requires} +ms = require('d3-milestones'); +sb = require('@supabase/supabase-js'); +``` + + +```{ojs supabase_data} +supabase_url="https://bleficzaoyltozjjndha.supabase.co" +supabase_key="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImJsZWZpY3phb3lsdG96ampuZGhhIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MjQyNDI2ODMsImV4cCI6MjAzOTgxODY4M30.fHtpJTveDUF1z07_k7FZX3wLy7bXpkYl5KyA5o_EuQY" +supabase = sb.createClient(supabase_url, supabase_key); +data = await supabase + .from('tasks') + .select(); +``` + + +```{ojs} +timelineArray = []; + +{ + for (let year = 2020; year <= 2025; year++) { + timelineArray.push({ first_run: `${year}-01-01`, task: ''}); + } +} + + +combined=data.data.concat(timelineArray); +``` + + +```{ojs timeline} + +timeline = ms('#timeline') + .mapping({ + 'timestamp': 'first_run', + 'text': 'task' + }) + .optimize(true) + .parseTime('%Y-%m-%d') + .aggregateBy('month') + .render(combined); +``` \ No newline at end of file diff --git a/results/milestones.css b/documentation/milestones.css similarity index 97% rename from results/milestones.css rename to documentation/milestones.css index 43ab83c6..fa8c3cf7 100644 --- a/results/milestones.css +++ b/documentation/milestones.css @@ -1,7 +1,7 @@ .milestones__category_label { display: inline-block; text-align: right; - font-size: 14px; + font-size: 1.5rem; margin-top: -4px; } .milestones__horizontal_line { @@ -23,7 +23,7 @@ .milestones__group { position: absolute; font-family: sans-serif; - font-size: 10px; + font-size: 0.75rem; } .milestones__group__bullet { background-color: #fff; @@ -37,7 +37,7 @@ .milestones__group__label-vertical { position: absolute; padding: 0; - color: #666; + color: #000; } .milestones__group__label-horizontal { border-left: 1px solid #000; @@ -97,9 +97,9 @@ vertical-align: bottom; } .milestones__group__label__text__title { - color: #000; + color: #666; font-weight: bold; - font-size: 11px; + font-size: 0.8rem; white-space: nowrap; } .milestones__group__label__text__event { diff --git a/results/index.qmd b/results/index.qmd index 3d1b65de..d351b7bd 100644 --- a/results/index.qmd +++ b/results/index.qmd @@ -13,73 +13,12 @@ listing: page-size: 100 filter-ui: true toc: false -execute: - echo: false -css: [../style/style-hero.css, tasks.css, milestones.css] +css: [../style/style-hero.css, tasks.css] --- -:::{#timeline} - -## Timeline - -::: - - :::{#tasks} ::: ## Additional information * [Task quality control](quality_control.qmd) - - - - - - -```{R env-variables} -supabase_url <- Sys.getenv("SUPABASE_URL") -supabase_key <- Sys.getenv("SUPABASE_KEY") - -ojs_define(supabase_url=supabase_url, supabase_key=supabase_key) - -``` - -```{ojs requires} -ms = require('d3-milestones'); -sb = require('@supabase/supabase-js'); -``` - - -```{ojs supabase_data} -supabase = sb.createClient(supabase_url, supabase_key); -data = await supabase - .from('timeline') - .select(); -``` - - -```{ojs} -timelineArray = []; -{ - for (let year = 2020; year <= 2025; year++) { - timelineArray.push({ first_run: `${year}-01-01`, task: ''}); - } -} - -combined =data.data.concat(timelineArray); -``` - - -```{ojs timeline} - -timeline = ms('#timeline') - .mapping({ - 'timestamp': 'first_run', - 'text': 'task' - }) - .optimize(true) - .parseTime('%Y-%m-%d') - .aggregateBy('month') - .render(combined); -``` \ No newline at end of file From 89c59f879c7a3a7b70fba32e42146386acf2c1b6 Mon Sep 17 00:00:00 2001 From: Kai Waldrant Date: Fri, 18 Oct 2024 07:46:53 +0200 Subject: [PATCH 15/44] WIP --- documentation/index.qmd | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/documentation/index.qmd b/documentation/index.qmd index 9088b6b0..15325e8b 100644 --- a/documentation/index.qmd +++ b/documentation/index.qmd @@ -48,11 +48,13 @@ supabase_url="https://bleficzaoyltozjjndha.supabase.co" supabase_key="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImJsZWZpY3phb3lsdG96ampuZGhhIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MjQyNDI2ODMsImV4cCI6MjAzOTgxODY4M30.fHtpJTveDUF1z07_k7FZX3wLy7bXpkYl5KyA5o_EuQY" supabase = sb.createClient(supabase_url, supabase_key); data = await supabase - .from('tasks') - .select(); + .from('timeline') + .select('first_run, task, tasks ( task_name)' ); +data; ``` + ```{ojs} timelineArray = []; From 509d5deffe058a7967b2feafb0acb9b9c7756a11 Mon Sep 17 00:00:00 2001 From: Kai Waldrant Date: Fri, 18 Oct 2024 10:11:45 +0200 Subject: [PATCH 16/44] Update timeline and add url --- documentation/index.qmd | 47 +++++++++++++++++++++++++---------------- 1 file changed, 29 insertions(+), 18 deletions(-) diff --git a/documentation/index.qmd b/documentation/index.qmd index 15325e8b..817a847f 100644 --- a/documentation/index.qmd +++ b/documentation/index.qmd @@ -8,6 +8,7 @@ listing: contents: "./*/index.qmd" execute: echo: false + output: false css: "milestones.css" --- @@ -50,22 +51,18 @@ supabase = sb.createClient(supabase_url, supabase_key); data = await supabase .from('timeline') .select('first_run, task, tasks ( task_name)' ); -data; -``` - - - -```{ojs} -timelineArray = []; - -{ - for (let year = 2020; year <= 2025; year++) { - timelineArray.push({ first_run: `${year}-01-01`, task: ''}); - } -} - +// flatten data array +transformedData = data.data.map(item => ({ + ...item, + ...item.tasks +})).map(({ tasks, ...rest }) => rest) + +// Add result links +UpdatedData = transformedData.map(item => ({ + ...item, + 'url': '../results/' + item.task_name.replace(/^task_/, '') +})) -combined=data.data.concat(timelineArray); ``` @@ -74,10 +71,24 @@ combined=data.data.concat(timelineArray); timeline = ms('#timeline') .mapping({ 'timestamp': 'first_run', - 'text': 'task' + 'text': 'task', + 'url': 'url' }) .optimize(true) .parseTime('%Y-%m-%d') .aggregateBy('month') - .render(combined); -``` \ No newline at end of file + .render(UpdatedData); +``` + + \ No newline at end of file From 03062785e524c58ba8c6d045a9544bad050dc5fb Mon Sep 17 00:00:00 2001 From: Kai Waldrant Date: Fri, 18 Oct 2024 11:42:24 +0200 Subject: [PATCH 17/44] use first_release --- documentation/index.qmd | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/documentation/index.qmd b/documentation/index.qmd index 817a847f..3b45fc4d 100644 --- a/documentation/index.qmd +++ b/documentation/index.qmd @@ -50,7 +50,7 @@ supabase_key="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZ supabase = sb.createClient(supabase_url, supabase_key); data = await supabase .from('timeline') - .select('first_run, task, tasks ( task_name)' ); + .select('first_release, task, tasks ( task_name)' ); // flatten data array transformedData = data.data.map(item => ({ ...item, @@ -70,7 +70,7 @@ UpdatedData = transformedData.map(item => ({ timeline = ms('#timeline') .mapping({ - 'timestamp': 'first_run', + 'timestamp': 'first_release', 'text': 'task', 'url': 'url' }) From 0969c438ebb52edb9404622ebc0aeb97aef19592 Mon Sep 17 00:00:00 2001 From: Kai Waldrant Date: Fri, 18 Oct 2024 13:29:26 +0200 Subject: [PATCH 18/44] WIP --- documentation/index.qmd | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/documentation/index.qmd b/documentation/index.qmd index 3b45fc4d..0373775b 100644 --- a/documentation/index.qmd +++ b/documentation/index.qmd @@ -31,10 +31,8 @@ Finally, we want to emphasize that OpenProblems is an inclusive community and we -:::{#timeline} - ## Timeline - +:::{#timeline} ::: @@ -65,7 +63,6 @@ UpdatedData = transformedData.map(item => ({ ``` - ```{ojs timeline} timeline = ms('#timeline') From 24d5a7c11b9a307a928462aef48005e9b6c76d49 Mon Sep 17 00:00:00 2001 From: Kai Waldrant Date: Wed, 23 Oct 2024 15:56:48 +0200 Subject: [PATCH 19/44] WIP --- documentation/index.qmd | 62 ++++++++++++++++++++++------------------- 1 file changed, 33 insertions(+), 29 deletions(-) diff --git a/documentation/index.qmd b/documentation/index.qmd index 0373775b..5ac8930b 100644 --- a/documentation/index.qmd +++ b/documentation/index.qmd @@ -8,7 +8,6 @@ listing: contents: "./*/index.qmd" execute: echo: false - output: false css: "milestones.css" --- @@ -46,46 +45,51 @@ sb = require('@supabase/supabase-js'); supabase_url="https://bleficzaoyltozjjndha.supabase.co" supabase_key="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImJsZWZpY3phb3lsdG96ampuZGhhIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MjQyNDI2ODMsImV4cCI6MjAzOTgxODY4M30.fHtpJTveDUF1z07_k7FZX3wLy7bXpkYl5KyA5o_EuQY" supabase = sb.createClient(supabase_url, supabase_key); -data = await supabase - .from('timeline') - .select('first_release, task, tasks ( task_name)' ); -// flatten data array -transformedData = data.data.map(item => ({ - ...item, - ...item.tasks -})).map(({ tasks, ...rest }) => rest) + +benchmarks = (await supabase + .from('tasks') + .select('first_release, name, task_name')) + .data + .filter(item => item.first_release !== null) + .map(item => ({ + date: item.first_release, + name: item.name, + task_name: item.task_name.replace(/^task_/, ''), + character: "benchmark", + type: "benchmark" + })); // Add result links -UpdatedData = transformedData.map(item => ({ +updatedBenchmarks = benchmarks.map(item => ({ ...item, - 'url': '../results/' + item.task_name.replace(/^task_/, '') + 'url': '../results/' + item.task_name })) +timeline = (await supabase + .from('timeline') + .select('name, date, type')) + .data + .map(item => ({ + name: item.name, + date: item.date, + type: item.type, + character: "timeline" + })); + +combinedData = updatedBenchmarks.concat(timeline); + ``` ```{ojs timeline} -timeline = ms('#timeline') +timelineChart = ms('#timeline') .mapping({ - 'timestamp': 'first_release', - 'text': 'task', - 'url': 'url' + 'timestamp': 'date', + 'text': 'name', + 'character': 'character' }) .optimize(true) .parseTime('%Y-%m-%d') .aggregateBy('month') - .render(UpdatedData); + .render(combinedData); ``` - - \ No newline at end of file From 6a92955a1ed3197bc693085dc1d3dc7ffde0b550 Mon Sep 17 00:00:00 2001 From: Kai Waldrant Date: Wed, 23 Oct 2024 16:12:51 +0200 Subject: [PATCH 20/44] WIP render first version --- documentation/index.qmd | 100 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 100 insertions(+) diff --git a/documentation/index.qmd b/documentation/index.qmd index 5ac8930b..174de32a 100644 --- a/documentation/index.qmd +++ b/documentation/index.qmd @@ -41,6 +41,79 @@ sb = require('@supabase/supabase-js'); ``` +```{ojs} +createMilestones = ( + title, + description, + { + aggregateBy, + data, + distribution, + mapping, + optimize, + onEventClick, + onEventMouseOver, + onEventMouseLeave, + orientation, + parseTime, + autoResize, + urlTarget, + }, + DIV_ID = 'timeline', + style = '' +) => { + iteration++; + + const divId = `${DIV_ID}-${iteration}`; + + function render() { + const m = milestones(`#${divId}`); + + mapping && m.mapping(mapping); + aggregateBy && m.aggregateBy(aggregateBy); + distribution && m.distribution(distribution); + optimize && m.optimize(optimize); + onEventClick && m.onEventClick(onEventClick); + onEventMouseOver && m.onEventMouseOver(onEventMouseOver); + onEventMouseLeave && m.onEventMouseLeave(onEventMouseLeave); + orientation && m.orientation(orientation); + parseTime && m.parseTime(parseTime); + autoResize && m.autoResize(autoResize); + urlTarget && m.urlTarget(urlTarget); + + m.render(data); + } + + // Wait until the wrapping DIV exists, only then render. + function checkElement() { + const wrapper = document.getElementById(divId); + if (!wrapper) { + window.setTimeout(checkElement, 100); + } else { + render(); + } + } + + checkElement(); + + const timeline = `
`; + + if (!title && !description) { + return timeline; + } + + return ` +
+ ${title ? `

${title}

` : ''} + ${description ? `

${description}

` : ''} + ${timeline} +
+ `; +}; +``` + + + ```{ojs supabase_data} supabase_url="https://bleficzaoyltozjjndha.supabase.co" supabase_key="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImJsZWZpY3phb3lsdG96ampuZGhhIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MjQyNDI2ODMsImV4cCI6MjAzOTgxODY4M30.fHtpJTveDUF1z07_k7FZX3wLy7bXpkYl5KyA5o_EuQY" @@ -80,6 +153,31 @@ combinedData = updatedBenchmarks.concat(timeline); ``` + + + ```{ojs timeline} timelineChart = ms('#timeline') @@ -92,4 +190,6 @@ timelineChart = ms('#timeline') .parseTime('%Y-%m-%d') .aggregateBy('month') .render(combinedData); + + ``` From a3a8b31299b76c2650f5fa8cee7ffb7e07d74dda Mon Sep 17 00:00:00 2001 From: Kai Waldrant Date: Wed, 23 Oct 2024 16:28:06 +0200 Subject: [PATCH 21/44] remove js --- documentation/index.qmd | 97 ----------------------------------------- 1 file changed, 97 deletions(-) diff --git a/documentation/index.qmd b/documentation/index.qmd index 174de32a..258b3766 100644 --- a/documentation/index.qmd +++ b/documentation/index.qmd @@ -41,79 +41,6 @@ sb = require('@supabase/supabase-js'); ``` -```{ojs} -createMilestones = ( - title, - description, - { - aggregateBy, - data, - distribution, - mapping, - optimize, - onEventClick, - onEventMouseOver, - onEventMouseLeave, - orientation, - parseTime, - autoResize, - urlTarget, - }, - DIV_ID = 'timeline', - style = '' -) => { - iteration++; - - const divId = `${DIV_ID}-${iteration}`; - - function render() { - const m = milestones(`#${divId}`); - - mapping && m.mapping(mapping); - aggregateBy && m.aggregateBy(aggregateBy); - distribution && m.distribution(distribution); - optimize && m.optimize(optimize); - onEventClick && m.onEventClick(onEventClick); - onEventMouseOver && m.onEventMouseOver(onEventMouseOver); - onEventMouseLeave && m.onEventMouseLeave(onEventMouseLeave); - orientation && m.orientation(orientation); - parseTime && m.parseTime(parseTime); - autoResize && m.autoResize(autoResize); - urlTarget && m.urlTarget(urlTarget); - - m.render(data); - } - - // Wait until the wrapping DIV exists, only then render. - function checkElement() { - const wrapper = document.getElementById(divId); - if (!wrapper) { - window.setTimeout(checkElement, 100); - } else { - render(); - } - } - - checkElement(); - - const timeline = `
`; - - if (!title && !description) { - return timeline; - } - - return ` -
- ${title ? `

${title}

` : ''} - ${description ? `

${description}

` : ''} - ${timeline} -
- `; -}; -``` - - - ```{ojs supabase_data} supabase_url="https://bleficzaoyltozjjndha.supabase.co" supabase_key="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImJsZWZpY3phb3lsdG96ampuZGhhIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MjQyNDI2ODMsImV4cCI6MjAzOTgxODY4M30.fHtpJTveDUF1z07_k7FZX3wLy7bXpkYl5KyA5o_EuQY" @@ -153,30 +80,6 @@ combinedData = updatedBenchmarks.concat(timeline); ``` - - ```{ojs timeline} From bd1de510faee99f67ba987573ed9e55afb7b3c62 Mon Sep 17 00:00:00 2001 From: Kai Waldrant Date: Wed, 23 Oct 2024 17:11:10 +0200 Subject: [PATCH 22/44] WIP add color --- documentation/index.qmd | 58 +++++++++++++++++++++++++++-------------- 1 file changed, 39 insertions(+), 19 deletions(-) diff --git a/documentation/index.qmd b/documentation/index.qmd index 258b3766..d8c1e158 100644 --- a/documentation/index.qmd +++ b/documentation/index.qmd @@ -35,6 +35,10 @@ Finally, we want to emphasize that OpenProblems is an inclusive community and we ::: +:::{#benchmark} +::: + + ```{ojs requires} ms = require('d3-milestones'); sb = require('@supabase/supabase-js'); @@ -55,15 +59,12 @@ benchmarks = (await supabase date: item.first_release, name: item.name, task_name: item.task_name.replace(/^task_/, ''), - character: "benchmark", - type: "benchmark" + type: "benchmark", + url: '../results/' + item.task_name.replace(/^task_/, ''), + category: "benchmark" })); -// Add result links -updatedBenchmarks = benchmarks.map(item => ({ - ...item, - 'url': '../results/' + item.task_name -})) +// Add result link timeline = (await supabase .from('timeline') @@ -73,26 +74,45 @@ timeline = (await supabase name: item.name, date: item.date, type: item.type, - character: "timeline" + category: "timeline", + textStyle: { + color: item.type === 'event' ? '#d95f02' : + item.type === 'milestone' ? '#1b9e77' : + item.type === 'competition' ? '#e7298a' : 'default' + } })); + -combinedData = updatedBenchmarks.concat(timeline); +combinedData = benchmarks.concat(timeline); ``` ```{ojs timeline} -timelineChart = ms('#timeline') - .mapping({ - 'timestamp': 'date', - 'text': 'name', - 'character': 'character' - }) - .optimize(true) - .parseTime('%Y-%m-%d') - .aggregateBy('month') - .render(combinedData); +setTimeout(() => { + const benchmarkChart = ms('#benchmark') + .mapping({ + 'timestamp': 'date', + 'text': 'name', + }) + .optimize(true) + .parseTime('%Y-%m-%d') + .aggregateBy('day') + .render(combinedData); +}, 0); + + +// timelineChart = ms('#timeline') +// .mapping({ +// 'timestamp': 'date', +// 'text': 'name' +// }) +// .optimize(true) +// .parseTime('%Y-%m-%d') +// .aggregateBy('day') +// .render(timeline); + ``` From c461fa779d0ed38a31e495990d0807fc6190b6d6 Mon Sep 17 00:00:00 2001 From: Kai Waldrant Date: Thu, 24 Oct 2024 06:56:00 +0200 Subject: [PATCH 23/44] WIP legend --- documentation/index.qmd | 33 +++++++++++++++++---------------- documentation/milestones.css | 5 +++++ 2 files changed, 22 insertions(+), 16 deletions(-) diff --git a/documentation/index.qmd b/documentation/index.qmd index d8c1e158..e8e9a2b4 100644 --- a/documentation/index.qmd +++ b/documentation/index.qmd @@ -8,6 +8,7 @@ listing: contents: "./*/index.qmd" execute: echo: false + output: false css: "milestones.css" --- @@ -32,14 +33,13 @@ Finally, we want to emphasize that OpenProblems is an inclusive community and we ## Timeline :::{#timeline} - ::: -:::{#benchmark} +:::{#legend} ::: - ```{ojs requires} +require('d3'); ms = require('d3-milestones'); sb = require('@supabase/supabase-js'); ``` @@ -91,28 +91,29 @@ combinedData = benchmarks.concat(timeline); ```{ojs timeline} setTimeout(() => { - const benchmarkChart = ms('#benchmark') + const benchmarkChart = ms('#timeline') .mapping({ 'timestamp': 'date', 'text': 'name', }) .optimize(true) .parseTime('%Y-%m-%d') - .aggregateBy('day') + .aggregateBy('month') .render(combinedData); }, 0); +``` -// timelineChart = ms('#timeline') -// .mapping({ -// 'timestamp': 'date', -// 'text': 'name' -// }) -// .optimize(true) -// .parseTime('%Y-%m-%d') -// .aggregateBy('day') -// .render(timeline); - - +```{ojs legend} +// select the svg area +svg = d3.select("#legend") + +// Handmade legend +svg.append("circle").attr("cx",200).attr("cy",130).attr("r", 6).style("fill", "#d95f02") +svg.append("circle").attr("cx",200).attr("cy",160).attr("r", 6).style("fill", "#1b9e77") +svg.append("circle").attr("cx",200).attr("cy",190).attr("r", 6).style("fill", "#e7298a") +svg.append("text").attr("x", 220).attr("y", 100).text("event").style("font-size", "15px").attr("alignment-baseline","middle") +svg.append("text").attr("x", 220).attr("y", 130).text("milestone").style("font-size", "15px").attr("alignment-baseline","middle") +svg.append("text").attr("x", 220).attr("y", 160).text("competition").style("font-size", "15px").attr("alignment-baseline","middle") ``` diff --git a/documentation/milestones.css b/documentation/milestones.css index fa8c3cf7..a20b0a92 100644 --- a/documentation/milestones.css +++ b/documentation/milestones.css @@ -108,4 +108,9 @@ .milestones__group__label__text__event--hover { background: #efefef; color: #313131; +} + +#legend { + height: 300px; + width: 450px; } \ No newline at end of file From 408ec9460a1d041eef22a63145aeea2304af7110 Mon Sep 17 00:00:00 2001 From: Kai Waldrant Date: Thu, 24 Oct 2024 06:56:35 +0200 Subject: [PATCH 24/44] update submobule --- _core | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_core b/_core index a938a529..405c288a 160000 --- a/_core +++ b/_core @@ -1 +1 @@ -Subproject commit a938a52915b3b4af67e04c92f3dfd13a31963413 +Subproject commit 405c288a53c9a011b41688a47a84c249aa7ba586 From 487f369ef5a1191cd0d5d903c26862599152e1a8 Mon Sep 17 00:00:00 2001 From: Kai Waldrant Date: Thu, 24 Oct 2024 07:02:53 +0200 Subject: [PATCH 25/44] fix legend output --- documentation/index.qmd | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/documentation/index.qmd b/documentation/index.qmd index e8e9a2b4..f7df7d8d 100644 --- a/documentation/index.qmd +++ b/documentation/index.qmd @@ -35,8 +35,11 @@ Finally, we want to emphasize that OpenProblems is an inclusive community and we :::{#timeline} ::: -:::{#legend} -::: + +```{=html} + +``` + ```{ojs requires} require('d3'); @@ -112,8 +115,9 @@ svg = d3.select("#legend") svg.append("circle").attr("cx",200).attr("cy",130).attr("r", 6).style("fill", "#d95f02") svg.append("circle").attr("cx",200).attr("cy",160).attr("r", 6).style("fill", "#1b9e77") svg.append("circle").attr("cx",200).attr("cy",190).attr("r", 6).style("fill", "#e7298a") -svg.append("text").attr("x", 220).attr("y", 100).text("event").style("font-size", "15px").attr("alignment-baseline","middle") -svg.append("text").attr("x", 220).attr("y", 130).text("milestone").style("font-size", "15px").attr("alignment-baseline","middle") -svg.append("text").attr("x", 220).attr("y", 160).text("competition").style("font-size", "15px").attr("alignment-baseline","middle") +svg.append("text").attr("x", 220).attr("y", 130).text("event").style("font-size", "15px").attr("alignment-baseline","middle") +svg.append("text").attr("x", 220).attr("y", 160).text("milestone").style("font-size", "15px").attr("alignment-baseline","middle") +svg.append("text").attr("x", 220).attr("y", 190).text("competition").style("font-size", "15px").attr("alignment-baseline","middle") + ``` From e116d4ac871233da5245503d7a19f54cd69396ae Mon Sep 17 00:00:00 2001 From: Kai Waldrant Date: Thu, 24 Oct 2024 07:55:34 +0200 Subject: [PATCH 26/44] WIP legend --- documentation/index.qmd | 11 +++++------ documentation/milestones.css | 2 +- 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/documentation/index.qmd b/documentation/index.qmd index f7df7d8d..dcc3931c 100644 --- a/documentation/index.qmd +++ b/documentation/index.qmd @@ -113,11 +113,10 @@ svg = d3.select("#legend") // Handmade legend svg.append("circle").attr("cx",200).attr("cy",130).attr("r", 6).style("fill", "#d95f02") -svg.append("circle").attr("cx",200).attr("cy",160).attr("r", 6).style("fill", "#1b9e77") -svg.append("circle").attr("cx",200).attr("cy",190).attr("r", 6).style("fill", "#e7298a") -svg.append("text").attr("x", 220).attr("y", 130).text("event").style("font-size", "15px").attr("alignment-baseline","middle") -svg.append("text").attr("x", 220).attr("y", 160).text("milestone").style("font-size", "15px").attr("alignment-baseline","middle") -svg.append("text").attr("x", 220).attr("y", 190).text("competition").style("font-size", "15px").attr("alignment-baseline","middle") - +svg.append("circle").attr("cx",280).attr("cy",130).attr("r", 6).style("fill", "#1b9e77") +svg.append("circle").attr("cx",370).attr("cy",130).attr("r", 6).style("fill", "#e7298a") +svg.append("text").attr("x", 210).attr("y", 130).text("event").style("font-size", "15px").attr("alignment-baseline","middle") +svg.append("text").attr("x", 290).attr("y", 130).text("milestone").style("font-size", "15px").attr("alignment-baseline","middle") +svg.append("text").attr("x", 380).attr("y", 130).text("competition").style("font-size", "15px").attr("alignment-baseline","middle") ``` diff --git a/documentation/milestones.css b/documentation/milestones.css index a20b0a92..29848b3c 100644 --- a/documentation/milestones.css +++ b/documentation/milestones.css @@ -111,6 +111,6 @@ } #legend { - height: 300px; + max-height: 300px; width: 450px; } \ No newline at end of file From 71436dcc0a5456167dc14cbf76132c0de88b2b2c Mon Sep 17 00:00:00 2001 From: Kai Waldrant Date: Thu, 24 Oct 2024 10:45:12 +0200 Subject: [PATCH 27/44] WIP new legend --- documentation/index.qmd | 95 +++++++++++++++++++++++++++++------- documentation/milestones.css | 5 -- 2 files changed, 78 insertions(+), 22 deletions(-) diff --git a/documentation/index.qmd b/documentation/index.qmd index dcc3931c..1030c90f 100644 --- a/documentation/index.qmd +++ b/documentation/index.qmd @@ -8,7 +8,6 @@ listing: contents: "./*/index.qmd" execute: echo: false - output: false css: "milestones.css" --- @@ -36,11 +35,6 @@ Finally, we want to emphasize that OpenProblems is an inclusive community and we ::: -```{=html} - -``` - - ```{ojs requires} require('d3'); ms = require('d3-milestones'); @@ -107,16 +101,83 @@ setTimeout(() => { ``` -```{ojs legend} -// select the svg area -svg = d3.select("#legend") - -// Handmade legend -svg.append("circle").attr("cx",200).attr("cy",130).attr("r", 6).style("fill", "#d95f02") -svg.append("circle").attr("cx",280).attr("cy",130).attr("r", 6).style("fill", "#1b9e77") -svg.append("circle").attr("cx",370).attr("cy",130).attr("r", 6).style("fill", "#e7298a") -svg.append("text").attr("x", 210).attr("y", 130).text("event").style("font-size", "15px").attr("alignment-baseline","middle") -svg.append("text").attr("x", 290).attr("y", 130).text("milestone").style("font-size", "15px").attr("alignment-baseline","middle") -svg.append("text").attr("x", 380).attr("y", 130).text("competition").style("font-size", "15px").attr("alignment-baseline","middle") +```{ojs} +//| output: false +function Swatches(color, { + columns = null, + format, + unknown: formatUnknown, + swatchSize = 15, + swatchWidth = swatchSize, + swatchHeight = swatchSize, + marginLeft = 0 +} = {}) { + const id = `-swatches-${Math.random().toString(16).slice(2)}`; + const unknown = formatUnknown == null ? undefined : color.unknown(); + const unknowns = unknown == null || unknown === d3.scaleImplicit ? [] : [unknown]; + const domain = color.domain().concat(unknowns); + if (format === undefined) format = x => x === unknown ? formatUnknown : x; + + function entity(character) { + return `&#${character.charCodeAt(0).toString()};`; + } + + if (columns !== null) return htl.html`
+ +
${domain.map(value => { + const label = `${format(value)}`; + return htl.html`
+
+
${label}
+
`; + })} +
+
`; + + return htl.html`
+ +
${domain.map(value => htl.html`${format(value)}`)}
`; +} +``` +```{ojs} +Swatches(d3.scaleOrdinal(["event", "milestone", "competition"], ["#d95f02", "#1b9e77", "#e7298a"])) ``` diff --git a/documentation/milestones.css b/documentation/milestones.css index 29848b3c..a4276d8a 100644 --- a/documentation/milestones.css +++ b/documentation/milestones.css @@ -109,8 +109,3 @@ background: #efefef; color: #313131; } - -#legend { - max-height: 300px; - width: 450px; -} \ No newline at end of file From 6cf6dffbfa7cb9eedc02a9fddf3951049f3b4bef Mon Sep 17 00:00:00 2001 From: Kai Waldrant Date: Thu, 24 Oct 2024 11:21:43 +0200 Subject: [PATCH 28/44] wip working legend --- documentation/index.qmd | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/documentation/index.qmd b/documentation/index.qmd index 1030c90f..0e359ad2 100644 --- a/documentation/index.qmd +++ b/documentation/index.qmd @@ -36,6 +36,8 @@ Finally, we want to emphasize that OpenProblems is an inclusive community and we ```{ojs requires} +//| output: false + require('d3'); ms = require('d3-milestones'); sb = require('@supabase/supabase-js'); @@ -43,6 +45,8 @@ sb = require('@supabase/supabase-js'); ```{ojs supabase_data} +//| output: false + supabase_url="https://bleficzaoyltozjjndha.supabase.co" supabase_key="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImJsZWZpY3phb3lsdG96ampuZGhhIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MjQyNDI2ODMsImV4cCI6MjAzOTgxODY4M30.fHtpJTveDUF1z07_k7FZX3wLy7bXpkYl5KyA5o_EuQY" supabase = sb.createClient(supabase_url, supabase_key); @@ -86,6 +90,7 @@ combinedData = benchmarks.concat(timeline); ```{ojs timeline} +//| output: false setTimeout(() => { const benchmarkChart = ms('#timeline') @@ -107,12 +112,12 @@ function Swatches(color, { columns = null, format, unknown: formatUnknown, - swatchSize = 15, + swatchSize = 20, swatchWidth = swatchSize, swatchHeight = swatchSize, - marginLeft = 0 + marginLeft = "auto" } = {}) { - const id = `-swatches-${Math.random().toString(16).slice(2)}`; + const id = `legend-swatches`; const unknown = formatUnknown == null ? undefined : color.unknown(); const unknowns = unknown == null || unknown === d3.scaleImplicit ? [] : [unknown]; const domain = color.domain().concat(unknowns); @@ -122,7 +127,7 @@ function Swatches(color, { return `&#${character.charCodeAt(0).toString()};`; } - if (columns !== null) return htl.html`
+ if (columns !== null) return htl.html`
-
${domain.map(value => { +
${domain.map(value => { const label = `${format(value)}`; return htl.html`
@@ -162,23 +139,6 @@ function Swatches(color, {
`; return htl.html`
-
${domain.map(value => htl.html`${format(value)}`)}
`; } ``` diff --git a/documentation/milestones.css b/documentation/milestones.css index a4276d8a..1be26900 100644 --- a/documentation/milestones.css +++ b/documentation/milestones.css @@ -109,3 +109,42 @@ background: #efefef; color: #313131; } + +/* legend */ +.legend-swatches { + + display: inline-flex; + align-items: center; + margin-right: 1em; +} + +.legend-swatches::before { + content: ""; + width: 18px; + height: 18px; + margin-right: 0.5em; + background: var(--color); +} + + +.legend-swatches-item { + break-inside: avoid; + display: flex; + align-items: center; + padding-bottom: 1px; +} + +.legend-swatches-label { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: calc(100% - 18px - 0.5em); +} + +.legend-swatches-swatch { + width: 18px; + height: 18px; + margin: 0 0.5em 0 0; +} + + \ No newline at end of file From 87caed86aec41044d58cfffa9602d8de58c9dbbf Mon Sep 17 00:00:00 2001 From: Kai Waldrant Date: Fri, 25 Oct 2024 09:59:01 +0200 Subject: [PATCH 30/44] Try vertical timeline --- .../{ => fundamentals}/milestones.css | 5 + documentation/fundamentals/timeline.qmd | 129 ++++++++++++++++++ documentation/index.qmd | 122 ----------------- 3 files changed, 134 insertions(+), 122 deletions(-) rename documentation/{ => fundamentals}/milestones.css (98%) create mode 100644 documentation/fundamentals/timeline.qmd diff --git a/documentation/milestones.css b/documentation/fundamentals/milestones.css similarity index 98% rename from documentation/milestones.css rename to documentation/fundamentals/milestones.css index 1be26900..d6b5cd91 100644 --- a/documentation/milestones.css +++ b/documentation/fundamentals/milestones.css @@ -1,3 +1,8 @@ +#timeline { + height: 100%; +} + + .milestones__category_label { display: inline-block; text-align: right; diff --git a/documentation/fundamentals/timeline.qmd b/documentation/fundamentals/timeline.qmd new file mode 100644 index 00000000..d84ae16e --- /dev/null +++ b/documentation/fundamentals/timeline.qmd @@ -0,0 +1,129 @@ +--- +title: Timeline +execute: + echo: false +css: "milestones.css" +--- + +```{ojs} +//| output: false + +// Based on https://observablehq.com/@d3/color-legend +function Swatches(color, { + columns = null, + format, + unknown: formatUnknown, + swatchSize = 20, + swatchWidth = swatchSize, + swatchHeight = swatchSize, + marginLeft = "auto" +} = {}) { + const id = `legend-swatches`; + const unknown = formatUnknown == null ? undefined : color.unknown(); + const unknowns = unknown == null || unknown === d3.scaleImplicit ? [] : [unknown]; + const domain = color.domain().concat(unknowns); + if (format === undefined) format = x => x === unknown ? formatUnknown : x; + + function entity(character) { + return `&#${character.charCodeAt(0).toString()};`; + } + + if (columns !== null) return htl.html`
+
${domain.map(value => { + const label = `${format(value)}`; + return htl.html`
+
+
${label}
+
`; + })} +
+
`; + + return htl.html`
+
${domain.map(value => htl.html`${format(value)}`)}
`; +} +``` + +```{ojs} +Swatches(d3.scaleOrdinal(["event", "milestone", "competition", "benchmark"], ["#d95f02", "#1b9e77", "#e7298a", "#FF414B"])) +``` +:::{#timeline} +::: + + +```{ojs requires} +//| output: false + +require('d3'); +ms = require('d3-milestones'); +sb = require('@supabase/supabase-js'); +``` + + + +```{ojs supabase_data} +//| output: false + +supabase_url="https://bleficzaoyltozjjndha.supabase.co" +supabase_key="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImJsZWZpY3phb3lsdG96ampuZGhhIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MjQyNDI2ODMsImV4cCI6MjAzOTgxODY4M30.fHtpJTveDUF1z07_k7FZX3wLy7bXpkYl5KyA5o_EuQY" +supabase = sb.createClient(supabase_url, supabase_key); + +benchmarks = (await supabase + .from('tasks') + .select('first_release, name, task_name')) + .data + .filter(item => item.first_release !== null) + .map(item => ({ + date: item.first_release, + name: item.name, + task_name: item.task_name.replace(/^task_/, ''), + type: "benchmark", + url: '../results/' + item.task_name.replace(/^task_/, ''), + category: "benchmark" + })); + +// Add result link + +timeline = (await supabase + .from('timeline') + .select('name, date, type')) + .data + .map(item => ({ + name: item.name, + date: item.date, + type: item.type, + category: "timeline", + textStyle: { + color: item.type === 'event' ? '#d95f02' : + item.type === 'milestone' ? '#1b9e77' : + item.type === 'competition' ? '#e7298a' : 'default' + } + })); + + +combinedData = benchmarks.concat(timeline); + +``` + + +```{ojs timeline} +//| output: false + +setTimeout(() => { + const benchmarkChart = ms('#timeline') + .mapping({ + 'timestamp': 'date', + 'text': 'name', + }) + .optimize(true) + .parseTime('%Y-%m-%d') + .aggregateBy('day') + .orientation('vertical') + .render(combinedData); +}, 0); + +``` + + + + \ No newline at end of file diff --git a/documentation/index.qmd b/documentation/index.qmd index 6d799137..d4409431 100644 --- a/documentation/index.qmd +++ b/documentation/index.qmd @@ -6,9 +6,6 @@ listing: template: ../style/listing.ejs type: default contents: "./*/index.qmd" -execute: - echo: false -css: "milestones.css" --- Welcome to the OpenProblems documentation! @@ -27,122 +24,3 @@ One simple but important way to contribute is to spread the word about the libra [![](images/stargazers.png){width=500px}](https://github.com/openproblems-bio/openproblems/stargazers) Finally, we want to emphasize that OpenProblems is an inclusive community and we expect all members to adhere to our [code of conduct](fundamentals/philosophy.qmd#inclusiveness). We hope that this documentation helps you get started with OpenProblems and we look forward to your contributions. - - - -## Timeline -:::{#timeline} -::: - - -```{ojs requires} -//| output: false - -require('d3'); -ms = require('d3-milestones'); -sb = require('@supabase/supabase-js'); -``` - - -```{ojs supabase_data} -//| output: false - -supabase_url="https://bleficzaoyltozjjndha.supabase.co" -supabase_key="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImJsZWZpY3phb3lsdG96ampuZGhhIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MjQyNDI2ODMsImV4cCI6MjAzOTgxODY4M30.fHtpJTveDUF1z07_k7FZX3wLy7bXpkYl5KyA5o_EuQY" -supabase = sb.createClient(supabase_url, supabase_key); - -benchmarks = (await supabase - .from('tasks') - .select('first_release, name, task_name')) - .data - .filter(item => item.first_release !== null) - .map(item => ({ - date: item.first_release, - name: item.name, - task_name: item.task_name.replace(/^task_/, ''), - type: "benchmark", - url: '../results/' + item.task_name.replace(/^task_/, ''), - category: "benchmark" - })); - -// Add result link - -timeline = (await supabase - .from('timeline') - .select('name, date, type')) - .data - .map(item => ({ - name: item.name, - date: item.date, - type: item.type, - category: "timeline", - textStyle: { - color: item.type === 'event' ? '#d95f02' : - item.type === 'milestone' ? '#1b9e77' : - item.type === 'competition' ? '#e7298a' : 'default' - } - })); - - -combinedData = benchmarks.concat(timeline); - -``` - - -```{ojs timeline} -//| output: false - -setTimeout(() => { - const benchmarkChart = ms('#timeline') - .mapping({ - 'timestamp': 'date', - 'text': 'name', - }) - .optimize(true) - .parseTime('%Y-%m-%d') - .aggregateBy('month') - .render(combinedData); -}, 0); - -``` - -```{ojs} -//| output: false -function Swatches(color, { - columns = null, - format, - unknown: formatUnknown, - swatchSize = 20, - swatchWidth = swatchSize, - swatchHeight = swatchSize, - marginLeft = "auto" -} = {}) { - const id = `legend-swatches`; - const unknown = formatUnknown == null ? undefined : color.unknown(); - const unknowns = unknown == null || unknown === d3.scaleImplicit ? [] : [unknown]; - const domain = color.domain().concat(unknowns); - if (format === undefined) format = x => x === unknown ? formatUnknown : x; - - function entity(character) { - return `&#${character.charCodeAt(0).toString()};`; - } - - if (columns !== null) return htl.html`
-
${domain.map(value => { - const label = `${format(value)}`; - return htl.html`
-
-
${label}
-
`; - })} -
-
`; - - return htl.html`
-
${domain.map(value => htl.html`${format(value)}`)}
`; -} -``` - -```{ojs} -Swatches(d3.scaleOrdinal(["event", "milestone", "competition", "benchmark"], ["#d95f02", "#1b9e77", "#e7298a", "#FF414B"])) -``` From 3265de3af327e8e5f36d02cbbfedb3232524e200 Mon Sep 17 00:00:00 2001 From: Kai Waldrant Date: Fri, 25 Oct 2024 11:06:50 +0200 Subject: [PATCH 31/44] WIP add alternate timeline --- documentation/fundamentals/2020-timeline.qmd | 630 +++++++++++++++++++ 1 file changed, 630 insertions(+) create mode 100644 documentation/fundamentals/2020-timeline.qmd diff --git a/documentation/fundamentals/2020-timeline.qmd b/documentation/fundamentals/2020-timeline.qmd new file mode 100644 index 00000000..9b356302 --- /dev/null +++ b/documentation/fundamentals/2020-timeline.qmd @@ -0,0 +1,630 @@ +--- +title: alternate timeline +execute: + echo: false +css: "milestones.css" +--- + +```{ojs} +require('d3'); +``` + + +```{ojs} +DiDoesDigital2020Timeline = { + const markerDefaultColor = "#9880C2"; + const markerSelectedColor = "#9880C2"; + const markerFadedColor = "#E4DDEE"; + const markerPersonalColor = "#5598E2"; + + const labelDefaultColor = "#331A5B"; + const labelSelectedColor = "#331A5B"; + const labelFadedColor = "#E4DDEE"; + const labelPersonalColor = "#093B72"; + + const annotationDefaultColor = "#E4DDEE"; + const annotationPersonalColor = "#CADFF7"; + + const svg = d3.select(DOM.svg(params.svg.width, params.svg.height)) + .attr("title", "Timeline of Melbourne in 2020") + .attr("id", "timeline"); + + const chartBackground = svg.append("rect") + .attr("id", "chart-background") + .attr("fill", "#fff") // fallback for CSS + .attr("x", 0) + .attr("y", 0) + .attr("width", params.svg.width) + .attr("height", params.svg.height); + + const chartTitle = svg.append("g") + .attr("class", "chart-title") + .append("text") + .attr("id", "title-text") + .attr("text-anchor", "start") + .attr("x", width >= params.smallScreenSize ? 96 : params.event.offset) + .attr("y", 24) + .attr("dy", "2em") + .style("font-weight", "700") + .style("font-size", "clamp(1.2rem, 4vw, 2.5rem)") // minimum, preferred, maximum + .text("Melbourne in 2020"); + + const chartSubtitle = svg.append("g") + .attr("class", "chart-subtitle") + .append("text") + .attr("text-anchor", "start") + .attr("x", width >= params.smallScreenSize ? 96 : params.event.offset) + .attr("y", 24) + .attr("dy", "5.5em") + .style("font-weight", "400") + .style("font-size", "clamp(1rem, 2.5vw, 1.25rem)") // minimum, preferred, maximum + .text("One Aussie’s effort to make sense of it"); + + const byline = svg.append("g") + .attr("transform", `translate(${width >= params.smallScreenSize ? params.plot.x * 0.4 : params.event.offset}, ${params.svg.height - (params.margin.bottom / 2)})`) + .append("text") + .attr("id", "byline") + .attr("x", 0) + .attr("y", 0) + .attr("dy", "0.5em") + .text('Graphic by @DiDoesDigital'); + + const plot = svg.append("g") + .attr("id", "plot") + .attr("transform", `translate(${width >= params.smallScreenSize ? params.plot.x : params.smallScreenMargin.left}, ${params.plot.y})`); + + const gy = plot.append("g") + .attr("id", "y-axis") + .attr("class", "axis") + .call(axis.y) + .attr("aria-hidden", "true") + .call(g => g.selectAll(".tick text").call(halo)); + + const annotations = plot.append("g") + .attr("class", "annotations") + .selectAll("g") + .data(lockdownData) + .join("g"); + + const annotationsLeftMargin = params.plot.x + 240 + 24; + + annotations.append("line") + .attr("aria-hidden", "true") + .attr("stroke", annotationDefaultColor) + .attr("stroke-width", 3) + .attr("x1", annotationsLeftMargin) + .attr("x2", annotationsLeftMargin) + .attr("y1", d => y(d.startDate)) + .attr("y2", d => y(d.endDate)); + + annotations.append("text") + .attr("x", annotationsLeftMargin + 24) + .attr("y", d => y(d.startDate)) + .attr("dy", "0.7em") + .style("font-size", 16) + .style("font-weight", 600) + .text(d => width >= params.mediumScreenSize ? d.name : '') + + annotations.append("text") + .attr("x", annotationsLeftMargin + 24) + .attr("y", d => y(d.startDate)) + .attr("dy", "2.0em") + .style("font-size", 16) + .style("font-weight", 400) + .text(d => width >= params.mediumScreenSize ? d3.timeFormat("%e %b")(d.startDate) + " – " + d3.timeFormat("%e %b")(d.endDate) : '') + // .text(d => d3.format("d")((d.endDate - d.startDate) / (1000*60*60*24)) + " days") + + const markers = plot.append("g") + .attr("class", "markers") + .selectAll("circle") + .data(data) + .join("circle") + .attr("transform", d => `translate(0, ${y(d.date)})`) + .attr("aria-hidden", "true") + .attr("fill", d => d.sharedOrPersonal === "Shared" ? markerDefaultColor : markerPersonalColor) + .attr("stroke", d => d.sharedOrPersonal === "Shared" ? markerDefaultColor : markerPersonalColor) + // .attr("stroke-width", 1) + .attr("cx", 0.5) + .attr("cy", (params.marker.radius / 2) + 0.5) + .attr("r", params.marker.radius); + + const dodgedYValues = dodge(data.map(d => y(d.date)), 24); + // const dodgedYValues = data.map(d => y(d.date)); // for debugging alignment + + const eventLabels = plot.append("g") + .attr("class", "eventLabels") + .selectAll("text") + .data(d => d3.zip( + data, + dodgedYValues, + )) + .join("text") + .attr("class", "event-title") + .style("font-weight", "400") + .style("fill", ([d]) => d.sharedOrPersonal === "Shared" ? labelDefaultColor : labelPersonalColor) + .attr("x", width >= params.smallScreenSize ? params.event.offset : params.smallScreenEvent.offset) + .attr("y", ([, y]) => y) + .attr("dy", "0.35em"); + + eventLabels.append("tspan") + .text(([d]) => d.eventName); + eventLabels.append("tspan") + .text(([d]) => ` ${d.eventDescription} ${d3.timeFormat("%A, %e %B")(d.date)}`) + .attr("x", width); + // .text(([d]) => d.eventName); + + const tooltip = d3.create("div") + .attr("class", "tooltip") + .attr("aria-hidden", "true") + .html(` +
+ +
+
+ +
+
+ +
+ `); + + const rangeY = dodgedYValues.map(x => x + params.plot.y); + const rangeY0 = rangeY[0]; + const fuzzyTextHeightAdjustment = 16 + + svg.on("touchend mouseout", function(event) { + markers + .attr("fill", d => d.sharedOrPersonal === "Shared" ? markerDefaultColor : markerPersonalColor) + .attr("stroke", d => d.sharedOrPersonal === "Shared" ? markerDefaultColor : markerPersonalColor); + + eventLabels + .style("opacity", 1); + }); + + svg.on("touchmove mousemove", function(event) { + const mouseY = d3.pointer(event,this)[1]; + const nearestEventY = rangeY.reduce((a, b) => Math.abs(b - mouseY) < Math.abs(a - mouseY) ? b : a); + const dodgedIndex = rangeY.indexOf(nearestEventY); + const dataEvent = data[dodgedIndex]; + + if (mouseY >= rangeY0 - fuzzyTextHeightAdjustment) { + + eventLabels + .filter((d, i) => i !== dodgedIndex) + .style("opacity", 0.3); + + eventLabels + .filter((d, i) => i === dodgedIndex) + .style("opacity", 1); + + markers + .filter((d, i) => i !== dodgedIndex) + .attr("fill", markerFadedColor) + .attr("stroke", markerFadedColor); + + markers + .filter((d, i) => i === dodgedIndex) + .attr("fill", d => d.sharedOrPersonal === "Shared" ? markerDefaultColor : markerPersonalColor) + .attr("stroke", d => d.sharedOrPersonal === "Shared" ? markerDefaultColor : markerPersonalColor) + .raise(); + + tooltip.style("opacity", 1); + tooltip.style("transform", `translate(${(width >= params.smallScreenSize ? params.plot.x + 8 : 0)}px, calc(-100% + ${nearestEventY}px))`); + tooltip.select("#date") + .text(d3.timeFormat("%A, %e %B")(dataEvent.date)); + tooltip.select("#name") + .text(dataEvent.eventName); + tooltip.select("#description") + .text(dataEvent.eventDescription); + } + }); + + svg.on("touchend mouseleave", () => tooltip.style("opacity", 0)); + + return html` +
+
+ ${tooltip.node()} + ${svg.node()} +
+
+
`; + + // return svg.node(); + // yield svg.node(); + // d3.selectAll(".event-name div").attr('class', 'teft'); +} +``` + +```{ojs} +csv = `Date,Event,Description,SharedOrPersonal +31 Dec 2019,Bushfires over New Years,"The fire in Mogo cut all communication in the region. I heard nothing from my family there for 25 hours.","Shared" +1 Jan 2020,Sundown 2020 festival,"I danced while waiting to hear from my family.","Personal" +3 Jan 2020,State of Disaster in Victoria,"State of Disaster declared in Victoria with bushfire conditions expected to deteriorate.","Shared" +6 Jan 2020,Cambridge masks,"We ordered Cambridge masks to protect against bushfire smoke.","Personal" +8 Jan 2020,Offsite work activity,"I was nervous about smoke inhalation and paid for Ubers to the offsite to avoid asthma problems.","Personal" +16 Jan 2020,Air quality deteriorates,"We are monitoring air quality before leaving the house.","Shared" +20 Jan 2020,"Hailstorms, flash flooding, and thunderstorms","Canberra and NSW cop massive hailstorms. Victoria suffers hailstorms, thunderstorms, and flash flooding.","Shared" +25 Jan 2020,First COVID-19 case reported in Australia,"It's here!","Shared" +2 Feb 2020,Went to the zoo,"This was lovely.","Personal" +6 Feb 2020,Performance sync,"This was kinda brutal.","Personal" +8 Feb 2020,Started Animation course,"SVG Essentials & Animation, v2 by Sarah Drasner.","Personal" +20 Feb 2020,Train derailment in Victoria,"A train derailed in Wallan, killing 2 people.","Shared" +21 Feb 2020,Cancelled my train ticket,"The train derailment on the line I was supposed to take that weekend to Sydney meant I needed to replace my train ticket with a last-minute plane ticket.","Personal" +27 Feb 2020,ReactConf AU in Sydney,"2-day conference interstate. People were flying in with cases at this time.","Personal" +1 Mar 2020,First Covid death reported in Australia,"A 78-year-old Perth man, who was one of the passengers from the Diamond Princess.","Shared" +3 Mar 2020,Supermarkets begin rationing toilet paper,"Panic buying led to shortages in stores.","Shared" +4 Mar 2020,We all learn how to wash our hands,"See also: TikTok hand washing dance. See also: hand washing meme.","Shared" +10 Mar 2020,Culture Amp starts working from home,"A level playing field.","Personal" +12 Mar 2020,WHO officially declares COVID-19 a pandemic,"We stop talking about the novel coronavirus and start talking about the pandemic.","Shared" +12 Mar 2020,Tom Hanks and his wife Rita Wilson test positive,"Isolated in Gold Coast hospital.","Shared" +15 Mar 2020,Visited family in Melbourne,"Who knew there'd be so few trips after this?","Personal" +15 Mar 2020,Coles imposes 2-item limit on panic shoppers,"The purchase of mince, pasta, flour, dry rice, paper towels, paper tissues and hand sanitisers is limited to 2 items per customer. Toilet paper remains limited to 1 pack per customer.","Shared" +16 Mar 2020,State of Emergency,"Victoria declares state of emergency.","Shared" +16 Mar 2020,Ordered food online from CERES,"I felt so much relief at the ability to order food online again.","Personal" +19 Mar 2020,Australia closes its borders,"Closed the borders to all non-residents.","Shared" +19 Mar 2020,Ruby Princess cruise ship docked in Sydney,"Celebrity Solstice contributed 11 cases. Eventually 440 passengers on Ruby Princess tested positive.","Shared" +21 Mar 2020,Social distancing rules imposed,"Nation-wide social distancing. Indoor gatherings of fewer than 100 people are still allowed.","Shared" +22 Mar 2020,Dan Andrews says we shouldn't get on the beers,"“You won’t be able to go to the pub because the pub is shut,” said Premier Dan Andrews. “That doesn’t mean you can have all your mates around to [your] home and get on the beers, that’s not appropriate.”","Shared" +23 Mar 2020,Nation-wide lockdown begins,"From midday, 23 March, all pubs, clubs, restaurants, cinemas and indoor sporting venues across the country shut down.","Shared" +24 Mar 2020,Non-essential businesses closed,"For Victoria. Limit your day to day activities outside your home. If you don’t need to do it, don’t do it. If you have to go outside, keep a full arm-span (about 1.5 metres) between yourself and other people.","Shared" +28 Mar 2020,Finished one of Shirley Wu's D3 courses,"","Personal" +31 Mar 2020,JobKeeper wage subsidy program announced,"$70 billion to pay employers up to $1500 a fortnight per employee.","Shared" +31 Mar 2020,South Australia closes its borders,"Border towns have exceptions.","Shared" +2 May 2020,Outbreak reported at Victorian meatworks,"8 cases reported, later linked to 90 cases.","Shared" +15 May 2020,NSW eases restrictions on public gatherings,"","Shared" +18 May 2020,Flu shot,"I took a trip to the Chemist to get a flu shot so I couldn't catch Covid and the flu at the same time.","Personal" +19 May 2020,Virtual rent inspection,"This was such a fail.","Personal" +24 May 2020,"Rio Tinto destroys historic Aboriginal site","46,000-year-old Juukan Gorge cave in the Hammersley Ranges, WA, was destroyed.","Shared" +25 May 2020,The killing of George Floyd,"Black Lives Matter. Several protests followed in Australia around social issues faced by Indigenous Australians, including Aboriginal deaths in custody.","Shared" +25 May 2020,Published “Learning data viz with D3”,"This Medium article captured my first 30 days of a 100-day project.","Personal" +26 May 2020,Melbourne quarantine hotel cases escape,"A night duty manager and 5 security guards at Melbourne quarantine hotels tested positive leading to second wave in Melbourne.","Shared" +27 May 2020,Culture Amp lets go 36 people,"~8% of our global team.","Personal" +30 May 2020,Began two-week staycation,"I couldn't go anywhere, but it was lovely.","Personal" +6 Apr 2020,Ordered more sweatpants,"Working From Home this much requires more pants.","Personal" +7 Apr 2020,"High Court quashes George Pell convictions","“… the evidence did not establish guilt to the requisite standard of proof”","Shared" +12 Apr 2020,Finished second of Shirley Wu's D3 courses,"This is a great course.","Personal" +17 Apr 2020,Finished third of Shirley Wu's D3 courses,"I want to visualise things!","Personal" +25 Apr 2020,Started 100 days of data viz,"I published Observable notebooks daily.","Personal" +28 Apr 2020,Toilet paper panic buying,"People literally fighting over toilet paper.","Shared" +1 Jun 2020,Victorians allowed up to 20 visitors,"Up to 20 people in your home or in a public place. Restaurants, cafes and pubs can have up to 20 customers dine in, and businesses such as beauty therapists can see clients again.","Shared" +7 Jun 2020,Birthday celebration,"Visited family in Melbourne for birthday celebrations.","Personal" +12 Jun 2020,Friend's birthday,"I had dinner at a friend's house. It was strange figuring out how to interact and social distance indoors.","Personal" +22 Jun 2020,Victorians allowed only 5 visitors,"Households can only have five visitors.","Shared" +24 Jun 2020,Ended my physio streak,"I had managed 84 days of consistent physio.","Personal" +27 Jun 2020,WA relaxes its restrictions,"Normal life resumes over there.","Shared" +1 Jul 2020,Lockdown in Melbourne hotspots,"Not my area. 10 different Melbourne postcodes.","Shared" +2 Jul 2020,Judicial Inquiry Into Hotel Quarantine Program,"","Shared" +4 Jul 2020,Visited in-laws,"Further birthday celebrations.","Personal" +4 Jul 2020,2 more hotspot post codes locked down,"Friends are back in lockdown.","Shared" +7 Jul 2020,Upcoming Stage 3 restrictions announced,"Only allowed to leave the house for four reasons: shopping for food and essential items, care and caregiving, daily exercise, and work. This is when we should have fled to the country.","Shared" +8 Jul 2020,Victorian and NSW interstate border closed,"The border closed for the first time since the 1918–19 Spanish flu pandemic.","Shared" +8 Jul 2020,SA imposes hard border closure to Victorians,"Throws border towns into chaos. My family can't do their grocery shopping.","Personal" +21 Jul 2020,I officially resigned from my role,"This is one of the bigger risks I've ever taken.","Personal" +22 Jul 2020,Melbourne compulsory masks,"At 11.59pm, masks became mandatory. A fine of A$200 will apply to those not complying. 3 days notice was given for people to buy masks.","Shared" +25 Jul 2020,Covid-19 test,"I had a minor cough. Did drive through test.","Personal" +28 Jul 2020,Covid-19 test result was negative,"That was a good SMS to read.","Personal" +2 Aug 2020,Finished 100 days of data viz,"Oof. That was hard work!","Personal" +2 Aug 2020,Melbourne Stage 4 restrictions,"Curfew between 8pm and 5am. 5km travel restriction. Reduced business. Only one hour of exercise.","Shared" +2 Aug 2020,State of disaster,"Victoria declares state of disaster.","Shared" +8 Aug 2020,Six year anniversary with my partner,"We did nothing special.","Personal" +17 Aug 2020,Loved one's 40th birthday,"Iso birthdays involve lots of delivered food.","Personal" +4 Sep 2020,My final day at Culture Amp,"People were so nice.","Personal" +13 Sep 2020,Social bubbles in First Step for reopening,"Those living alone or single parents allowed to have one other person in their home. Playgrounds reopened. A reduction of the curfew by an hour.","Shared" +21 Sep 2020,Whales beached in Tasmania,"Within 3 days, upwards of 450 whales were beached.","Shared" +24 Sep 2020,Released significant changes to Typey Type,"I redesigned Typey Type for Stenographers, added new lessons, added a metronome, and made a bunch of fixes.","Personal" +27 Sep 2020,Restrictions starting to ease and curfew ended,"Public gathering limits increased up to 5 people from 2 households outdoors for social interaction.","Shared" +28 Sep 2020,Saw a friend at the park,"First non-stranger I've seen outside my house in 12 weeks.","Personal" +28 Sep 2020,Childcare reopened,"This was a big deal for many people.","Shared" +16 Oct 2020,Trip to hospital emergency department (not related to Covid),"We're ok. 4 hours 51 minutes was the longest I'd been outside my apartment in 14 weeks.","Personal" +18 Oct 2020,“Get on the Beers (featuring Dan Andrews)” remix goes viral,"Played at the Wine Machine festival in Swan Valley, WA, the viral remix by Mashd N Kutcher was officially release 26 Oct 2020." +19 Oct 2020,Restrictions further eased to 25km radius,"Two-hour time limit for exercise and socialising was lifted. Hairdressers allowed to open. Many allied health services allowed to have face-to-face services.","Shared" +19 Oct 2020,Visited the beach,"First time leaving my 5km bubble in 15 weeks (except for the hospital trip).","Personal" +20 Oct 2020,Offered a new role,"Prospect of employment!","Personal" +20 Oct 2020,Postal voted in local election,"Postal voting was so easy.","Personal" +26 Oct 2020,News of lockdown ending in 2 days,"I cried.","Shared" +26 Oct 2020,Donut Day shows 0 cases and 0 deaths in Vic,"Victorians celebrate by buying donuts in droves.","Shared" +27 Oct 2020,Dan Andrews confirms we can get on the beers,"“Can I confirm you are saying we can finally get on the beers?” a reporter asked at the presser. “I don’t know that I’ll be drinking a beer tonight,” replies Premier Dan Andrews. “I might go a little higher up the shelf.”","Shared" +28 Oct 2020,People no longer require a reason to leave home,"All retail, restaurants, hotels, cafes and bars allowed to open with capacity limits. Beauty, personal services and tattooing reopened, outdoor community and non-contact sport recommences. A maximum of 10 people allowed to attend weddings. A maximum of 20 mourners allowed to attend funerals. Faith and religious gatherings allowed to resume.","Shared" +1 Nov 2020,Saw Melbourne family,"First time since June.","Personal" +9 Nov 2020,Allowed to travel more than 25km,"Gyms and fitness studios opened, capacity limits for restaurants, hotels, cafes and bars increased, gathering limits for faith and religious gatherings increased, and indoor pools opened.","Shared" +9 Nov 2020,Ring of Steel around Melbourne opened,"Finally allowed to leave the city.","Shared" +9 Nov 2020,Saw out of Melbourne family for the first time in six months,"Left the city! It was glorious.","Personal" +10 Nov 2020,"Traditional Place names addressing guidelines","Australia Post's public endorsement of Traditional Place name addressing came during NAIDOC week.","Shared" +11 Nov 2020,Warnings of thunderstorm asthma,"I didn't need a puffer at this time.","Shared" +14 Nov 2020,Breakfast with a friend at a favourite cafe,"Potentially the last time we'll be here for years!","Personal" +15 Nov 2020,Brunch with friends,"What a concept! Finally met our friends' new twins.","Personal" +16 Nov 2020,South Australia locks down after outbreak,"","Shared" +19 Nov 2020,Ate out at a restaurant for dinner,"First time since… I can remember.","Personal" +20 Nov 2020,Saw Mum for the first time since January,"Such a moment.","Personal" +21 Nov 2020,South Australia ends its lockdown,"Successful tracing.","Shared" +23 Nov 2020,NSW opens its borders to Victoria,"Progress!","Shared" +23 Nov 2020,We moved out of Melbourne to regional Victoria,"Fleeeeeeeee!","Personal" +1 Dec 2020,Queensland opens its borders to Victoria,"Sunshine awaits!","Shared" +10 Dec 2020,Interest rates went negative,"The interest rate on Treasury notes went negative for the first time. The Australian government was paid to borrow money.","Shared" +13 Dec 2020,Early Christmas celebration,"Spent time with one part of the family in outback Victoria.","Personal" +18 Dec 2020,Sydney's Northern Beaches declared hotspot,"The national COVID-19 hotspot was declared because of the outbreak linked to 28 cases, later linked to 83 cases.","Shared" +19 Dec 2020,WA closes its border to NSW again,"The hard border closure prohibits travel from anywhere in NSW to WA without an exemption.","Shared" +20 Dec 2020,Christmas lunch,"Spent time with another part of the family in regional Victoria.","Personal" +21 Dec 2020,Applied for and received Queensland Border Pass,"Phew! There was not a lot of wriggle room for this.","Personal" +25 Dec 2020,Christmas day,"A small Christmas celebration.","Personal" +26 Dec 2020,Began road trip to Queensland,"We started a 4-day drive to move to Queensland.","Personal" +28 Dec 2020,Crossed border into Queensland,"We made it!","Personal" +30 Dec 2020,Victoria ended 61-day streak of no cases,"There were 3 community cases.","Shared" +` + +lockdownData = [ + {name: "Lockdown 1.0", startDate: new Date("2020", "2", "24", "6"), endDate: new Date("2020", "5", "1", "6"), description: "When social distancing began, we didn’t know much about the virus, such as how it spread or what precautions to take.\nIt was a difficult time."}, // zero-indexed month means "3" is March and "5" is June + {name: "Lockdown 2.0", startDate: new Date("2020", "6", "9", "6"), endDate: new Date("2020", "9", "28", "6"), description: "The second time around was easier and harder. We knew the drill, routines were easier, but we’d burnt through a lot more of our reserves.\nIt was 110 days."}, // zero-indexed month means "6" is Jul and "9" is October + {name: "Ring of Steel", startDate: new Date("2020", "9", "28", "6"), endDate: new Date("2020", "10", "8", "6"), description: "We continued to be trapped in Melbourne for another two weeks after lockdown “ended”."}, // zero-indexed month means "9" is October and "10" is November +] + + +sourceData = { + const timeParser = d3.timeParse("%d %b %Y %I:%M%p"); + const csvString = csv; + const rowConversionFunction = ({ + "Date": date, + "Event": eventName, + "Description": eventDescription, + "SharedOrPersonal": sharedOrPersonal + }) => ({ + date: timeParser(date + " 06:00AM"), // adjusting to 6AM instead of midnight aligns first of month circles with axis tick markers + eventName, + eventDescription, + sharedOrPersonal + }); + return d3.csvParse(csvString, rowConversionFunction); + + // const extraPropertiesSource = { + // title: "My 2020 timeline", + // subtitle: "One Aussie's story" + // }; + // return Object.assign(dataObjectTarget, extraPropertiesSource); +} + +data = sourceData + +chartStyles = html` +` + +tooltipStyles = html` + +` + +function halo(text) { + text.clone(true) + .each(function() { this.parentNode.insertBefore(this, this.previousSibling); }) + .attr("aria-hidden", "true") + .attr("fill", "none") + .attr("stroke", backgroundColor) + .attr("stroke-width", 24) + .attr("stroke-linecap", "round") + .attr("stroke-linejoin", "round") + .style("text-shadow", `-1px -1px 2px ${backgroundColor}, 1px 1px 2px ${backgroundColor}, -1px 1px 2px ${backgroundColor}, 1px -1px 2px ${backgroundColor}`); +} + + +params = { + let output = {}; + + output["smallScreenSize"] = 768; + output["mediumScreenSize"] = 940; + + output["svg"] = { + "width": width, + "height": data.length * 48 // Roughly relative to number of data points but doesn't factor in the full timeline scale such as clustering or spread out data + }; + + output["margin"] = { + "top": 104, + "right": 96, + "bottom": 192, + "left": 240, + "axisLeft": 144, + }; + + output["plot"] = { + "x": output["margin"]["left"], + "y": output["margin"]["top"], + "width": output["svg"]["width"] - output["margin"]["left"] - output["margin"]["right"], + "height": output["svg"]["height"] - output["margin"]["top"] - output["margin"]["bottom"] + }; + + output["smallScreenMargin"] = { + "top": 60, + "right": 8, + "bottom": 192, + "left": 8, + "axisLeft": 144, + }; + + output["smallScreenPlot"] = { + "x": output["margin"]["left"], + "y": output["margin"]["top"], + "width": output["svg"]["width"] - output["margin"]["left"] - output["margin"]["right"], + "height": output["svg"]["height"] - output["margin"]["top"] - output["margin"]["bottom"] + }; + + output["marker"] = { + "radius": 4 + } + + output["date"] = { + "offset": output["marker"]["radius"] * 2 + } + + output["event"] = { + "offset": output["marker"]["radius"] * 6 + } + + output["smallScreenEvent"] = { + "offset": output["marker"]["radius"] * 4 + } + + return output; +} + +axis = { + const yAxis = width >= params.smallScreenSize ? + d3.axisRight(y) + .tickPadding(-(params.margin.axisLeft)) + .tickSizeOuter(0) + .tickSizeInner(-(params.margin.axisLeft)) + : + d3.axisRight(y) + .tickPadding(-(params.smallScreenMargin.axisLeft)) + .tickSizeOuter(0) + .tickSizeInner(-(params.smallScreenMargin.axisLeft)) + .tickFormat(d3.timeFormat('%b')); + + return {y: yAxis}; +} + +y = d3.scaleUtc() + .domain(d3.extent(data, d => d.date))//.nice() + .range([params.plot.y, params.plot.height]); + // .range([params.margin.top, height - params.margin.bottom]); + +// The dodge function takes an array of positions (e.g. X values along an X Axis) in floating point numbers +// The dodge function optionally takes customisable separation, iteration, and error values. +// The dodge function returns a similar array of positions, but slightly dodged from where they were in an attempt to separate them out. It restrains the result a little bit so that the elements don't explode all over the place and so they don't go out of bounds. + +function dodge(positions, separation = 10, maxiter = 10, maxerror = 1e-1) { + positions = Array.from(positions); + let n = positions.length; + if (!positions.every(isFinite)) throw new Error("invalid position"); + if (!(n > 1)) return positions; + let index = d3.range(positions.length); + for (let iter = 0; iter < maxiter; ++iter) { + index.sort((i, j) => d3.ascending(positions[i], positions[j])); + let error = 0; + for (let i = 1; i < n; ++i) { + let delta = positions[index[i]] - positions[index[i - 1]]; + if (delta < separation) { + delta = (separation - delta) / 2; + error = Math.max(error, delta); + positions[index[i - 1]] -= delta; + positions[index[i]] += delta; + } + } + if (error < maxerror) break; + } + return positions; +} + +backgroundColor = "#FAF9FB"; +``` \ No newline at end of file From 2724de5aed879dcf782eb1a3498c6f36c4c575f1 Mon Sep 17 00:00:00 2001 From: Kai Waldrant Date: Fri, 25 Oct 2024 11:21:27 +0200 Subject: [PATCH 32/44] Add timeline variations --- documentation/fundamentals/2020-timeline.qmd | 2 + documentation/fundamentals/timeline.qmd | 5 +- documentation/fundamentals/timeline_2.qmd | 130 +++++++++++++++++++ 3 files changed, 136 insertions(+), 1 deletion(-) create mode 100644 documentation/fundamentals/timeline_2.qmd diff --git a/documentation/fundamentals/2020-timeline.qmd b/documentation/fundamentals/2020-timeline.qmd index 9b356302..4a90a0cc 100644 --- a/documentation/fundamentals/2020-timeline.qmd +++ b/documentation/fundamentals/2020-timeline.qmd @@ -2,6 +2,7 @@ title: alternate timeline execute: echo: false + output: false css: "milestones.css" --- @@ -11,6 +12,7 @@ require('d3'); ```{ojs} +//| output: true DiDoesDigital2020Timeline = { const markerDefaultColor = "#9880C2"; const markerSelectedColor = "#9880C2"; diff --git a/documentation/fundamentals/timeline.qmd b/documentation/fundamentals/timeline.qmd index d84ae16e..3c90a3ef 100644 --- a/documentation/fundamentals/timeline.qmd +++ b/documentation/fundamentals/timeline.qmd @@ -1,7 +1,8 @@ --- -title: Timeline +title: Timeline variation 1 execute: echo: false + output: false css: "milestones.css" --- @@ -45,6 +46,8 @@ function Swatches(color, { ``` ```{ojs} +//| output: true + Swatches(d3.scaleOrdinal(["event", "milestone", "competition", "benchmark"], ["#d95f02", "#1b9e77", "#e7298a", "#FF414B"])) ``` :::{#timeline} diff --git a/documentation/fundamentals/timeline_2.qmd b/documentation/fundamentals/timeline_2.qmd new file mode 100644 index 00000000..b0841fec --- /dev/null +++ b/documentation/fundamentals/timeline_2.qmd @@ -0,0 +1,130 @@ +--- +title: Timeline variation 2 +execute: + echo: false + output: false +css: "milestones.css" +--- + +```{ojs} +//| output: false + +// Based on https://observablehq.com/@d3/color-legend +function Swatches(color, { + columns = null, + format, + unknown: formatUnknown, + swatchSize = 20, + swatchWidth = swatchSize, + swatchHeight = swatchSize, + marginLeft = "auto" +} = {}) { + const id = `legend-swatches`; + const unknown = formatUnknown == null ? undefined : color.unknown(); + const unknowns = unknown == null || unknown === d3.scaleImplicit ? [] : [unknown]; + const domain = color.domain().concat(unknowns); + if (format === undefined) format = x => x === unknown ? formatUnknown : x; + + function entity(character) { + return `&#${character.charCodeAt(0).toString()};`; + } + + if (columns !== null) return htl.html`
+
${domain.map(value => { + const label = `${format(value)}`; + return htl.html`
+
+
${label}
+
`; + })} +
+
`; + + return htl.html`
+
${domain.map(value => htl.html`${format(value)}`)}
`; +} +``` + +```{ojs} +//| output: true +Swatches(d3.scaleOrdinal(["event", "milestone", "competition", "benchmark"], ["#d95f02", "#1b9e77", "#e7298a", "#FF414B"])) +``` +:::{#timeline} +::: + + +```{ojs requires} +//| output: false + +require('d3'); +ms = require('d3-milestones'); +sb = require('@supabase/supabase-js'); +``` + + + +```{ojs supabase_data} +//| output: false + +supabase_url="https://bleficzaoyltozjjndha.supabase.co" +supabase_key="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImJsZWZpY3phb3lsdG96ampuZGhhIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MjQyNDI2ODMsImV4cCI6MjAzOTgxODY4M30.fHtpJTveDUF1z07_k7FZX3wLy7bXpkYl5KyA5o_EuQY" +supabase = sb.createClient(supabase_url, supabase_key); + +benchmarks = (await supabase + .from('tasks') + .select('first_release, name, task_name')) + .data + .filter(item => item.first_release !== null) + .map(item => ({ + date: item.first_release, + name: item.name, + task_name: item.task_name.replace(/^task_/, ''), + type: "benchmark", + url: '../results/' + item.task_name.replace(/^task_/, ''), + category: "benchmark" + })); + +// Add result link + +timeline = (await supabase + .from('timeline') + .select('name, date, type')) + .data + .map(item => ({ + name: item.name, + date: item.date, + type: item.type, + category: "timeline", + textStyle: { + color: item.type === 'event' ? '#d95f02' : + item.type === 'milestone' ? '#1b9e77' : + item.type === 'competition' ? '#e7298a' : 'default' + } + })); + + +combinedData = benchmarks.concat(timeline); + +``` + + +```{ojs timeline} +//| output: false + +setTimeout(() => { + const benchmarkChart = ms('#timeline') + .mapping({ + 'timestamp': 'date', + 'text': 'name', + }) + .optimize(true) + .parseTime('%Y-%m-%d') + .aggregateBy('day') + .render(combinedData); +}, 0); + +``` + + + + \ No newline at end of file From 6d81a1ab3690e7f0d77272a82a71862eaa1d06d6 Mon Sep 17 00:00:00 2001 From: Kai Waldrant Date: Fri, 25 Oct 2024 12:32:58 +0200 Subject: [PATCH 33/44] set aggregate to month --- documentation/fundamentals/timeline.qmd | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/documentation/fundamentals/timeline.qmd b/documentation/fundamentals/timeline.qmd index 3c90a3ef..f006d431 100644 --- a/documentation/fundamentals/timeline.qmd +++ b/documentation/fundamentals/timeline.qmd @@ -120,7 +120,7 @@ setTimeout(() => { }) .optimize(true) .parseTime('%Y-%m-%d') - .aggregateBy('day') + .aggregateBy('month') .orientation('vertical') .render(combinedData); }, 0); From 8a4dbf968c169d862d074c66af0b0a35e1820984 Mon Sep 17 00:00:00 2001 From: Kai Waldrant Date: Fri, 25 Oct 2024 12:56:47 +0200 Subject: [PATCH 34/44] fix timeline --- documentation/fundamentals/timeline.qmd | 2 +- documentation/fundamentals/timeline_2.qmd | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/documentation/fundamentals/timeline.qmd b/documentation/fundamentals/timeline.qmd index f006d431..679e7442 100644 --- a/documentation/fundamentals/timeline.qmd +++ b/documentation/fundamentals/timeline.qmd @@ -121,7 +121,7 @@ setTimeout(() => { .optimize(true) .parseTime('%Y-%m-%d') .aggregateBy('month') - .orientation('vertical') + .orientation('horizontal') .render(combinedData); }, 0); diff --git a/documentation/fundamentals/timeline_2.qmd b/documentation/fundamentals/timeline_2.qmd index b0841fec..74bac280 100644 --- a/documentation/fundamentals/timeline_2.qmd +++ b/documentation/fundamentals/timeline_2.qmd @@ -120,6 +120,7 @@ setTimeout(() => { .optimize(true) .parseTime('%Y-%m-%d') .aggregateBy('day') + .orientation('vertical') .render(combinedData); }, 0); From 895fa6b0f1457b229eb0c2769391e58d1d5d1cd3 Mon Sep 17 00:00:00 2001 From: Kai Waldrant Date: Fri, 25 Oct 2024 14:11:48 +0200 Subject: [PATCH 35/44] WIP alternate timeline --- documentation/fundamentals/2020-timeline.qmd | 293 ++++--------------- 1 file changed, 59 insertions(+), 234 deletions(-) diff --git a/documentation/fundamentals/2020-timeline.qmd b/documentation/fundamentals/2020-timeline.qmd index 4a90a0cc..c807c888 100644 --- a/documentation/fundamentals/2020-timeline.qmd +++ b/documentation/fundamentals/2020-timeline.qmd @@ -8,69 +8,73 @@ css: "milestones.css" ```{ojs} require('d3'); +sb = require('@supabase/supabase-js'); +``` + +```{ojs supabase_data} +supabase_url="https://bleficzaoyltozjjndha.supabase.co" +supabase_key="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImJsZWZpY3phb3lsdG96ampuZGhhIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MjQyNDI2ODMsImV4cCI6MjAzOTgxODY4M30.fHtpJTveDUF1z07_k7FZX3wLy7bXpkYl5KyA5o_EuQY" +supabase = sb.createClient(supabase_url, supabase_key); + +benchmarks = (await supabase + .from('tasks') + .select('first_release, name, task_name')) + .data + .filter(item => item.first_release !== null) + .map(item => ({ + date: d3.timeParse("%Y-%m-%d")(item.first_release), + eventName: item.name, + eventDescription: '', + eventType: "benchmark" + })); + +// Add result link + +timeline = (await supabase + .from('timeline') + .select('name, date, type')) + .data + .map(item => ({ + date: d3.timeParse("%Y-%m-%d")(item.date), + eventName: item.name, + eventDescription: '', + eventType: item.type })); + + +combinedData = benchmarks.concat(timeline); + +combinedData; ``` ```{ojs} //| output: true DiDoesDigital2020Timeline = { - const markerDefaultColor = "#9880C2"; + const markerDefaultColor = "#FF414B"; const markerSelectedColor = "#9880C2"; const markerFadedColor = "#E4DDEE"; - const markerPersonalColor = "#5598E2"; + const markerEventColor = "#d95f02"; + const markerMilestoneColor = "#1b9e77"; + const markerCompetitionColor = "#e7298a"; + const labelDefaultColor = "#331A5B"; const labelSelectedColor = "#331A5B"; const labelFadedColor = "#E4DDEE"; - const labelPersonalColor = "#093B72"; - - const annotationDefaultColor = "#E4DDEE"; - const annotationPersonalColor = "#CADFF7"; + const labelEventColor = "#d95f02"; + const labelMilestoneColor = "#1b9e77"; + const labelCompetitionColor = "#e7298a"; + + const eventTypeColors = { + benchmark: markerDefaultColor, + event: markerEventColor, + milestone: markerMilestoneColor, + competition: markerCompetitionColor + }; const svg = d3.select(DOM.svg(params.svg.width, params.svg.height)) - .attr("title", "Timeline of Melbourne in 2020") .attr("id", "timeline"); - const chartBackground = svg.append("rect") - .attr("id", "chart-background") - .attr("fill", "#fff") // fallback for CSS - .attr("x", 0) - .attr("y", 0) - .attr("width", params.svg.width) - .attr("height", params.svg.height); - - const chartTitle = svg.append("g") - .attr("class", "chart-title") - .append("text") - .attr("id", "title-text") - .attr("text-anchor", "start") - .attr("x", width >= params.smallScreenSize ? 96 : params.event.offset) - .attr("y", 24) - .attr("dy", "2em") - .style("font-weight", "700") - .style("font-size", "clamp(1.2rem, 4vw, 2.5rem)") // minimum, preferred, maximum - .text("Melbourne in 2020"); - - const chartSubtitle = svg.append("g") - .attr("class", "chart-subtitle") - .append("text") - .attr("text-anchor", "start") - .attr("x", width >= params.smallScreenSize ? 96 : params.event.offset) - .attr("y", 24) - .attr("dy", "5.5em") - .style("font-weight", "400") - .style("font-size", "clamp(1rem, 2.5vw, 1.25rem)") // minimum, preferred, maximum - .text("One Aussie’s effort to make sense of it"); - - const byline = svg.append("g") - .attr("transform", `translate(${width >= params.smallScreenSize ? params.plot.x * 0.4 : params.event.offset}, ${params.svg.height - (params.margin.bottom / 2)})`) - .append("text") - .attr("id", "byline") - .attr("x", 0) - .attr("y", 0) - .attr("dy", "0.5em") - .text('Graphic by @DiDoesDigital'); - const plot = svg.append("g") .attr("id", "plot") .attr("transform", `translate(${width >= params.smallScreenSize ? params.plot.x : params.smallScreenMargin.left}, ${params.plot.y})`); @@ -82,40 +86,6 @@ DiDoesDigital2020Timeline = { .attr("aria-hidden", "true") .call(g => g.selectAll(".tick text").call(halo)); - const annotations = plot.append("g") - .attr("class", "annotations") - .selectAll("g") - .data(lockdownData) - .join("g"); - - const annotationsLeftMargin = params.plot.x + 240 + 24; - - annotations.append("line") - .attr("aria-hidden", "true") - .attr("stroke", annotationDefaultColor) - .attr("stroke-width", 3) - .attr("x1", annotationsLeftMargin) - .attr("x2", annotationsLeftMargin) - .attr("y1", d => y(d.startDate)) - .attr("y2", d => y(d.endDate)); - - annotations.append("text") - .attr("x", annotationsLeftMargin + 24) - .attr("y", d => y(d.startDate)) - .attr("dy", "0.7em") - .style("font-size", 16) - .style("font-weight", 600) - .text(d => width >= params.mediumScreenSize ? d.name : '') - - annotations.append("text") - .attr("x", annotationsLeftMargin + 24) - .attr("y", d => y(d.startDate)) - .attr("dy", "2.0em") - .style("font-size", 16) - .style("font-weight", 400) - .text(d => width >= params.mediumScreenSize ? d3.timeFormat("%e %b")(d.startDate) + " – " + d3.timeFormat("%e %b")(d.endDate) : '') - // .text(d => d3.format("d")((d.endDate - d.startDate) / (1000*60*60*24)) + " days") - const markers = plot.append("g") .attr("class", "markers") .selectAll("circle") @@ -123,8 +93,8 @@ DiDoesDigital2020Timeline = { .join("circle") .attr("transform", d => `translate(0, ${y(d.date)})`) .attr("aria-hidden", "true") - .attr("fill", d => d.sharedOrPersonal === "Shared" ? markerDefaultColor : markerPersonalColor) - .attr("stroke", d => d.sharedOrPersonal === "Shared" ? markerDefaultColor : markerPersonalColor) + .attr("fill", d => eventTypeColors[d.eventType] || markerDefaultColor) + .attr("stroke", d => eventTypeColors[d.eventType] || markerDefaultColor) // .attr("stroke-width", 1) .attr("cx", 0.5) .attr("cy", (params.marker.radius / 2) + 0.5) @@ -143,7 +113,7 @@ DiDoesDigital2020Timeline = { .join("text") .attr("class", "event-title") .style("font-weight", "400") - .style("fill", ([d]) => d.sharedOrPersonal === "Shared" ? labelDefaultColor : labelPersonalColor) + .style("fill", ([d]) => eventTypeColors[d.eventType] || markerDefaultColor) .attr("x", width >= params.smallScreenSize ? params.event.offset : params.smallScreenEvent.offset) .attr("y", ([, y]) => y) .attr("dy", "0.35em"); @@ -176,8 +146,8 @@ DiDoesDigital2020Timeline = { svg.on("touchend mouseout", function(event) { markers - .attr("fill", d => d.sharedOrPersonal === "Shared" ? markerDefaultColor : markerPersonalColor) - .attr("stroke", d => d.sharedOrPersonal === "Shared" ? markerDefaultColor : markerPersonalColor); + .attr("fill", d => eventTypeColors[d.eventType] || markerDefaultColor) + .attr("stroke", d => eventTypeColors[d.eventType] || markerDefaultColor); eventLabels .style("opacity", 1); @@ -206,8 +176,8 @@ DiDoesDigital2020Timeline = { markers .filter((d, i) => i === dodgedIndex) - .attr("fill", d => d.sharedOrPersonal === "Shared" ? markerDefaultColor : markerPersonalColor) - .attr("stroke", d => d.sharedOrPersonal === "Shared" ? markerDefaultColor : markerPersonalColor) + .attr("fill", d => eventTypeColors[d.eventType] || markerDefaultColor) + .attr("stroke", d => eventTypeColors[d.eventType] || markerDefaultColor) .raise(); tooltip.style("opacity", 1); @@ -239,153 +209,8 @@ DiDoesDigital2020Timeline = { ``` ```{ojs} -csv = `Date,Event,Description,SharedOrPersonal -31 Dec 2019,Bushfires over New Years,"The fire in Mogo cut all communication in the region. I heard nothing from my family there for 25 hours.","Shared" -1 Jan 2020,Sundown 2020 festival,"I danced while waiting to hear from my family.","Personal" -3 Jan 2020,State of Disaster in Victoria,"State of Disaster declared in Victoria with bushfire conditions expected to deteriorate.","Shared" -6 Jan 2020,Cambridge masks,"We ordered Cambridge masks to protect against bushfire smoke.","Personal" -8 Jan 2020,Offsite work activity,"I was nervous about smoke inhalation and paid for Ubers to the offsite to avoid asthma problems.","Personal" -16 Jan 2020,Air quality deteriorates,"We are monitoring air quality before leaving the house.","Shared" -20 Jan 2020,"Hailstorms, flash flooding, and thunderstorms","Canberra and NSW cop massive hailstorms. Victoria suffers hailstorms, thunderstorms, and flash flooding.","Shared" -25 Jan 2020,First COVID-19 case reported in Australia,"It's here!","Shared" -2 Feb 2020,Went to the zoo,"This was lovely.","Personal" -6 Feb 2020,Performance sync,"This was kinda brutal.","Personal" -8 Feb 2020,Started Animation course,"SVG Essentials & Animation, v2 by Sarah Drasner.","Personal" -20 Feb 2020,Train derailment in Victoria,"A train derailed in Wallan, killing 2 people.","Shared" -21 Feb 2020,Cancelled my train ticket,"The train derailment on the line I was supposed to take that weekend to Sydney meant I needed to replace my train ticket with a last-minute plane ticket.","Personal" -27 Feb 2020,ReactConf AU in Sydney,"2-day conference interstate. People were flying in with cases at this time.","Personal" -1 Mar 2020,First Covid death reported in Australia,"A 78-year-old Perth man, who was one of the passengers from the Diamond Princess.","Shared" -3 Mar 2020,Supermarkets begin rationing toilet paper,"Panic buying led to shortages in stores.","Shared" -4 Mar 2020,We all learn how to wash our hands,"See also: TikTok hand washing dance. See also: hand washing meme.","Shared" -10 Mar 2020,Culture Amp starts working from home,"A level playing field.","Personal" -12 Mar 2020,WHO officially declares COVID-19 a pandemic,"We stop talking about the novel coronavirus and start talking about the pandemic.","Shared" -12 Mar 2020,Tom Hanks and his wife Rita Wilson test positive,"Isolated in Gold Coast hospital.","Shared" -15 Mar 2020,Visited family in Melbourne,"Who knew there'd be so few trips after this?","Personal" -15 Mar 2020,Coles imposes 2-item limit on panic shoppers,"The purchase of mince, pasta, flour, dry rice, paper towels, paper tissues and hand sanitisers is limited to 2 items per customer. Toilet paper remains limited to 1 pack per customer.","Shared" -16 Mar 2020,State of Emergency,"Victoria declares state of emergency.","Shared" -16 Mar 2020,Ordered food online from CERES,"I felt so much relief at the ability to order food online again.","Personal" -19 Mar 2020,Australia closes its borders,"Closed the borders to all non-residents.","Shared" -19 Mar 2020,Ruby Princess cruise ship docked in Sydney,"Celebrity Solstice contributed 11 cases. Eventually 440 passengers on Ruby Princess tested positive.","Shared" -21 Mar 2020,Social distancing rules imposed,"Nation-wide social distancing. Indoor gatherings of fewer than 100 people are still allowed.","Shared" -22 Mar 2020,Dan Andrews says we shouldn't get on the beers,"“You won’t be able to go to the pub because the pub is shut,” said Premier Dan Andrews. “That doesn’t mean you can have all your mates around to [your] home and get on the beers, that’s not appropriate.”","Shared" -23 Mar 2020,Nation-wide lockdown begins,"From midday, 23 March, all pubs, clubs, restaurants, cinemas and indoor sporting venues across the country shut down.","Shared" -24 Mar 2020,Non-essential businesses closed,"For Victoria. Limit your day to day activities outside your home. If you don’t need to do it, don’t do it. If you have to go outside, keep a full arm-span (about 1.5 metres) between yourself and other people.","Shared" -28 Mar 2020,Finished one of Shirley Wu's D3 courses,"","Personal" -31 Mar 2020,JobKeeper wage subsidy program announced,"$70 billion to pay employers up to $1500 a fortnight per employee.","Shared" -31 Mar 2020,South Australia closes its borders,"Border towns have exceptions.","Shared" -2 May 2020,Outbreak reported at Victorian meatworks,"8 cases reported, later linked to 90 cases.","Shared" -15 May 2020,NSW eases restrictions on public gatherings,"","Shared" -18 May 2020,Flu shot,"I took a trip to the Chemist to get a flu shot so I couldn't catch Covid and the flu at the same time.","Personal" -19 May 2020,Virtual rent inspection,"This was such a fail.","Personal" -24 May 2020,"Rio Tinto destroys historic Aboriginal site","46,000-year-old Juukan Gorge cave in the Hammersley Ranges, WA, was destroyed.","Shared" -25 May 2020,The killing of George Floyd,"Black Lives Matter. Several protests followed in Australia around social issues faced by Indigenous Australians, including Aboriginal deaths in custody.","Shared" -25 May 2020,Published “Learning data viz with D3”,"This Medium article captured my first 30 days of a 100-day project.","Personal" -26 May 2020,Melbourne quarantine hotel cases escape,"A night duty manager and 5 security guards at Melbourne quarantine hotels tested positive leading to second wave in Melbourne.","Shared" -27 May 2020,Culture Amp lets go 36 people,"~8% of our global team.","Personal" -30 May 2020,Began two-week staycation,"I couldn't go anywhere, but it was lovely.","Personal" -6 Apr 2020,Ordered more sweatpants,"Working From Home this much requires more pants.","Personal" -7 Apr 2020,"High Court quashes George Pell convictions","“… the evidence did not establish guilt to the requisite standard of proof”","Shared" -12 Apr 2020,Finished second of Shirley Wu's D3 courses,"This is a great course.","Personal" -17 Apr 2020,Finished third of Shirley Wu's D3 courses,"I want to visualise things!","Personal" -25 Apr 2020,Started 100 days of data viz,"I published Observable notebooks daily.","Personal" -28 Apr 2020,Toilet paper panic buying,"People literally fighting over toilet paper.","Shared" -1 Jun 2020,Victorians allowed up to 20 visitors,"Up to 20 people in your home or in a public place. Restaurants, cafes and pubs can have up to 20 customers dine in, and businesses such as beauty therapists can see clients again.","Shared" -7 Jun 2020,Birthday celebration,"Visited family in Melbourne for birthday celebrations.","Personal" -12 Jun 2020,Friend's birthday,"I had dinner at a friend's house. It was strange figuring out how to interact and social distance indoors.","Personal" -22 Jun 2020,Victorians allowed only 5 visitors,"Households can only have five visitors.","Shared" -24 Jun 2020,Ended my physio streak,"I had managed 84 days of consistent physio.","Personal" -27 Jun 2020,WA relaxes its restrictions,"Normal life resumes over there.","Shared" -1 Jul 2020,Lockdown in Melbourne hotspots,"Not my area. 10 different Melbourne postcodes.","Shared" -2 Jul 2020,Judicial Inquiry Into Hotel Quarantine Program,"","Shared" -4 Jul 2020,Visited in-laws,"Further birthday celebrations.","Personal" -4 Jul 2020,2 more hotspot post codes locked down,"Friends are back in lockdown.","Shared" -7 Jul 2020,Upcoming Stage 3 restrictions announced,"Only allowed to leave the house for four reasons: shopping for food and essential items, care and caregiving, daily exercise, and work. This is when we should have fled to the country.","Shared" -8 Jul 2020,Victorian and NSW interstate border closed,"The border closed for the first time since the 1918–19 Spanish flu pandemic.","Shared" -8 Jul 2020,SA imposes hard border closure to Victorians,"Throws border towns into chaos. My family can't do their grocery shopping.","Personal" -21 Jul 2020,I officially resigned from my role,"This is one of the bigger risks I've ever taken.","Personal" -22 Jul 2020,Melbourne compulsory masks,"At 11.59pm, masks became mandatory. A fine of A$200 will apply to those not complying. 3 days notice was given for people to buy masks.","Shared" -25 Jul 2020,Covid-19 test,"I had a minor cough. Did drive through test.","Personal" -28 Jul 2020,Covid-19 test result was negative,"That was a good SMS to read.","Personal" -2 Aug 2020,Finished 100 days of data viz,"Oof. That was hard work!","Personal" -2 Aug 2020,Melbourne Stage 4 restrictions,"Curfew between 8pm and 5am. 5km travel restriction. Reduced business. Only one hour of exercise.","Shared" -2 Aug 2020,State of disaster,"Victoria declares state of disaster.","Shared" -8 Aug 2020,Six year anniversary with my partner,"We did nothing special.","Personal" -17 Aug 2020,Loved one's 40th birthday,"Iso birthdays involve lots of delivered food.","Personal" -4 Sep 2020,My final day at Culture Amp,"People were so nice.","Personal" -13 Sep 2020,Social bubbles in First Step for reopening,"Those living alone or single parents allowed to have one other person in their home. Playgrounds reopened. A reduction of the curfew by an hour.","Shared" -21 Sep 2020,Whales beached in Tasmania,"Within 3 days, upwards of 450 whales were beached.","Shared" -24 Sep 2020,Released significant changes to Typey Type,"I redesigned Typey Type for Stenographers, added new lessons, added a metronome, and made a bunch of fixes.","Personal" -27 Sep 2020,Restrictions starting to ease and curfew ended,"Public gathering limits increased up to 5 people from 2 households outdoors for social interaction.","Shared" -28 Sep 2020,Saw a friend at the park,"First non-stranger I've seen outside my house in 12 weeks.","Personal" -28 Sep 2020,Childcare reopened,"This was a big deal for many people.","Shared" -16 Oct 2020,Trip to hospital emergency department (not related to Covid),"We're ok. 4 hours 51 minutes was the longest I'd been outside my apartment in 14 weeks.","Personal" -18 Oct 2020,“Get on the Beers (featuring Dan Andrews)” remix goes viral,"Played at the Wine Machine festival in Swan Valley, WA, the viral remix by Mashd N Kutcher was officially release 26 Oct 2020." -19 Oct 2020,Restrictions further eased to 25km radius,"Two-hour time limit for exercise and socialising was lifted. Hairdressers allowed to open. Many allied health services allowed to have face-to-face services.","Shared" -19 Oct 2020,Visited the beach,"First time leaving my 5km bubble in 15 weeks (except for the hospital trip).","Personal" -20 Oct 2020,Offered a new role,"Prospect of employment!","Personal" -20 Oct 2020,Postal voted in local election,"Postal voting was so easy.","Personal" -26 Oct 2020,News of lockdown ending in 2 days,"I cried.","Shared" -26 Oct 2020,Donut Day shows 0 cases and 0 deaths in Vic,"Victorians celebrate by buying donuts in droves.","Shared" -27 Oct 2020,Dan Andrews confirms we can get on the beers,"“Can I confirm you are saying we can finally get on the beers?” a reporter asked at the presser. “I don’t know that I’ll be drinking a beer tonight,” replies Premier Dan Andrews. “I might go a little higher up the shelf.”","Shared" -28 Oct 2020,People no longer require a reason to leave home,"All retail, restaurants, hotels, cafes and bars allowed to open with capacity limits. Beauty, personal services and tattooing reopened, outdoor community and non-contact sport recommences. A maximum of 10 people allowed to attend weddings. A maximum of 20 mourners allowed to attend funerals. Faith and religious gatherings allowed to resume.","Shared" -1 Nov 2020,Saw Melbourne family,"First time since June.","Personal" -9 Nov 2020,Allowed to travel more than 25km,"Gyms and fitness studios opened, capacity limits for restaurants, hotels, cafes and bars increased, gathering limits for faith and religious gatherings increased, and indoor pools opened.","Shared" -9 Nov 2020,Ring of Steel around Melbourne opened,"Finally allowed to leave the city.","Shared" -9 Nov 2020,Saw out of Melbourne family for the first time in six months,"Left the city! It was glorious.","Personal" -10 Nov 2020,"Traditional Place names addressing guidelines","Australia Post's public endorsement of Traditional Place name addressing came during NAIDOC week.","Shared" -11 Nov 2020,Warnings of thunderstorm asthma,"I didn't need a puffer at this time.","Shared" -14 Nov 2020,Breakfast with a friend at a favourite cafe,"Potentially the last time we'll be here for years!","Personal" -15 Nov 2020,Brunch with friends,"What a concept! Finally met our friends' new twins.","Personal" -16 Nov 2020,South Australia locks down after outbreak,"","Shared" -19 Nov 2020,Ate out at a restaurant for dinner,"First time since… I can remember.","Personal" -20 Nov 2020,Saw Mum for the first time since January,"Such a moment.","Personal" -21 Nov 2020,South Australia ends its lockdown,"Successful tracing.","Shared" -23 Nov 2020,NSW opens its borders to Victoria,"Progress!","Shared" -23 Nov 2020,We moved out of Melbourne to regional Victoria,"Fleeeeeeeee!","Personal" -1 Dec 2020,Queensland opens its borders to Victoria,"Sunshine awaits!","Shared" -10 Dec 2020,Interest rates went negative,"The interest rate on Treasury notes went negative for the first time. The Australian government was paid to borrow money.","Shared" -13 Dec 2020,Early Christmas celebration,"Spent time with one part of the family in outback Victoria.","Personal" -18 Dec 2020,Sydney's Northern Beaches declared hotspot,"The national COVID-19 hotspot was declared because of the outbreak linked to 28 cases, later linked to 83 cases.","Shared" -19 Dec 2020,WA closes its border to NSW again,"The hard border closure prohibits travel from anywhere in NSW to WA without an exemption.","Shared" -20 Dec 2020,Christmas lunch,"Spent time with another part of the family in regional Victoria.","Personal" -21 Dec 2020,Applied for and received Queensland Border Pass,"Phew! There was not a lot of wriggle room for this.","Personal" -25 Dec 2020,Christmas day,"A small Christmas celebration.","Personal" -26 Dec 2020,Began road trip to Queensland,"We started a 4-day drive to move to Queensland.","Personal" -28 Dec 2020,Crossed border into Queensland,"We made it!","Personal" -30 Dec 2020,Victoria ended 61-day streak of no cases,"There were 3 community cases.","Shared" -` - -lockdownData = [ - {name: "Lockdown 1.0", startDate: new Date("2020", "2", "24", "6"), endDate: new Date("2020", "5", "1", "6"), description: "When social distancing began, we didn’t know much about the virus, such as how it spread or what precautions to take.\nIt was a difficult time."}, // zero-indexed month means "3" is March and "5" is June - {name: "Lockdown 2.0", startDate: new Date("2020", "6", "9", "6"), endDate: new Date("2020", "9", "28", "6"), description: "The second time around was easier and harder. We knew the drill, routines were easier, but we’d burnt through a lot more of our reserves.\nIt was 110 days."}, // zero-indexed month means "6" is Jul and "9" is October - {name: "Ring of Steel", startDate: new Date("2020", "9", "28", "6"), endDate: new Date("2020", "10", "8", "6"), description: "We continued to be trapped in Melbourne for another two weeks after lockdown “ended”."}, // zero-indexed month means "9" is October and "10" is November -] - - -sourceData = { - const timeParser = d3.timeParse("%d %b %Y %I:%M%p"); - const csvString = csv; - const rowConversionFunction = ({ - "Date": date, - "Event": eventName, - "Description": eventDescription, - "SharedOrPersonal": sharedOrPersonal - }) => ({ - date: timeParser(date + " 06:00AM"), // adjusting to 6AM instead of midnight aligns first of month circles with axis tick markers - eventName, - eventDescription, - sharedOrPersonal - }); - return d3.csvParse(csvString, rowConversionFunction); - - // const extraPropertiesSource = { - // title: "My 2020 timeline", - // subtitle: "One Aussie's story" - // }; - // return Object.assign(dataObjectTarget, extraPropertiesSource); -} -data = sourceData +data = combinedData chartStyles = html` -` - -tooltipStyles = html` - -` - function halo(text) { text.clone(true) .each(function() { this.parentNode.insertBefore(this, this.previousSibling); }) diff --git a/documentation/fundamentals/milestones.css b/documentation/fundamentals/milestones.css deleted file mode 100644 index d6b5cd91..00000000 --- a/documentation/fundamentals/milestones.css +++ /dev/null @@ -1,155 +0,0 @@ -#timeline { - height: 100%; -} - - -.milestones__category_label { - display: inline-block; - text-align: right; - font-size: 1.5rem; - margin-top: -4px; -} -.milestones__horizontal_line { - position: absolute; - background-color: #000; - height: 3px; - margin-top: 4px; - margin-left: 5.5px; - border-radius: 1.5px; -} -.milestones__vertical_line { - position: absolute; - background-color: #000; - width: 3px; - margin-left: 4px; - margin-bottom: 5.5px; - border-radius: 1.5px; -} -.milestones__group { - position: absolute; - font-family: sans-serif; - font-size: 0.75rem; -} -.milestones__group__bullet { - background-color: #fff; - border: 3px solid #333; - border-radius: 50%; - width: 0px; - height: 0px; - padding: 2.5px; -} -.milestones__group__label-horizontal, -.milestones__group__label-vertical { - position: absolute; - padding: 0; - color: #000; -} -.milestones__group__label-horizontal { - border-left: 1px solid #000; - margin-left: 5px; -} -.milestones__group__label-horizontal div { - position: relative; - margin-left: 3px; - display: inline-block; -} -.milestones__group__label-vertical { - padding-left: 10px; - padding-bottom: 0px; - border-bottom: 1px solid #000; - margin-bottom: -5.5px; - margin-left: 10px; - bottom: 100%; - overflow: visible; -} -.milestones__group__label-vertical .wrapper { - min-width: 100px; - max-width: 300px; - border-left: 1px solid black; - border-bottom: 1px solid white; - margin-bottom: -1px; - padding-left: 5px; -} -.milestones__group__label-above-horizontal { - bottom: 100%; -} -.milestones__group__label-above-vertical { - padding-left: 0px; - padding-right: 10px; - right: 100%; - text-align: right; -} -.milestones__group__label-above-vertical .wrapper { - border-left: 0; - border-right: 1px solid black; - padding-left: 0px; - padding-right: 5px; -} -.milestones__group__label-last { - right: 100%; - border-left: 0; - border-right: 1px solid #000; - margin-left: 0; - margin-right: -6px; - text-align: right; -} -.milestones__group__label-last div { - margin-left: 0px; - margin-right: 3px; -} -.milestones__group__label__text-vertical { - display: table-cell; - vertical-align: bottom; -} -.milestones__group__label__text__title { - color: #666; - font-weight: bold; - font-size: 0.8rem; - white-space: nowrap; -} -.milestones__group__label__text__event { - cursor: pointer; -} -.milestones__group__label__text__event--hover { - background: #efefef; - color: #313131; -} - -/* legend */ -.legend-swatches { - - display: inline-flex; - align-items: center; - margin-right: 1em; -} - -.legend-swatches::before { - content: ""; - width: 18px; - height: 18px; - margin-right: 0.5em; - background: var(--color); -} - - -.legend-swatches-item { - break-inside: avoid; - display: flex; - align-items: center; - padding-bottom: 1px; -} - -.legend-swatches-label { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - max-width: calc(100% - 18px - 0.5em); -} - -.legend-swatches-swatch { - width: 18px; - height: 18px; - margin: 0 0.5em 0 0; -} - - \ No newline at end of file diff --git a/documentation/fundamentals/timeline.css b/documentation/fundamentals/timeline.css new file mode 100644 index 00000000..088df025 --- /dev/null +++ b/documentation/fundamentals/timeline.css @@ -0,0 +1,141 @@ +/* legend */ +.legend-swatches { + + display: inline-flex; + align-items: center; + margin-right: 1em; +} + +.legend-swatches::before { + content: ""; + width: 18px; + height: 18px; + margin-right: 0.5em; + background: var(--color); +} + + +.legend-swatches-item { + break-inside: avoid; + display: flex; + align-items: center; + padding-bottom: 1px; +} + +.legend-swatches-label { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: calc(100% - 18px - 0.5em); +} + +.legend-swatches-swatch { + width: 18px; + height: 18px; + margin: 0 0.5em 0 0; +} + +/* typography */ +.event-title { + fill: #3C3941; + line-height: 1.4; +} + +.event-title:hover { + cursor: default; +} + +.event-description { + fill: #3C3941; + font: 400 16px/1.4 "Source Sans Pro", "Noto Sans", sans-serif; + transform: translateY(1em); +} + +#title { + fill: #3C3941; + font: 600 16px/1.4 "Source Sans Pro", "Noto Sans", sans-serif; +} + +.axis text { + font: 400 16px/1.4 "Source Sans Pro", "Noto Sans", sans-serif; + fill: #676170; +} + +@media (max-width: 768px) { + text, + .event-title, + .event-description, + #title, + .axis text { + font-size: 14px; + } +} + +/* chart */ +#chart-background { + fill: #FAF9FB; +} + +.tick line, +.domain { + stroke: #E2E0E5; +} + +/* tooltip */ +.wrapper { + position: relative; +} + +.tooltip { + background-color: #fff; + border: 1px solid #5F428F; + font-family: "Source Sans Pro", "Noto Sans", sans-serif; + left: 0; + max-width: 300px; + opacity: 0; + padding: calc(16px - 1px); /* border width adjustment */ + pointer-events: none; + border-radius: 5px; + position: absolute; + top: -8px; + transition: opacity 0.1s linear, transform 0.05s ease-in-out; + z-index: 1; +} + +/* +.tooltip:before { + background-color: #fff; + border-left-color: transparent; + border-top-color: transparent; + bottom: 0; + content: ''; + height: 12px; + left: 50%; + position: absolute; + transform-origin: center center; + transform: translate(-50%, 50%) rotate(45deg); + width: 12px; + z-index: 1; +} +*/ + +.tooltip-date { + margin-bottom: 0.2em; + font-size: 0.7em; + line-height: 1.2; + font-weight: 400; +} + +.tooltip-name { + margin-bottom: 0.2em; + font-size: 1em; + line-height: 1.4; + font-weight: 700; +} + +.tooltip-description { + margin-bottom: 0.2em; + font-size: 0.8em; + line-height: 1.4; + font-weight: 400; +} \ No newline at end of file From 7eb8531eda9ff92495eacd63f1af22042e019250 Mon Sep 17 00:00:00 2001 From: Kai Waldrant Date: Tue, 5 Nov 2024 09:50:18 +0100 Subject: [PATCH 41/44] update submodules --- _core | 2 +- _openproblems | 2 +- _task_template | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/_core b/_core index 405c288a..3ada7662 160000 --- a/_core +++ b/_core @@ -1 +1 @@ -Subproject commit 405c288a53c9a011b41688a47a84c249aa7ba586 +Subproject commit 3ada76624ec63cd1e751041f186605e9de600456 diff --git a/_openproblems b/_openproblems index 559f9776..bf274d82 160000 --- a/_openproblems +++ b/_openproblems @@ -1 +1 @@ -Subproject commit 559f97768212dfe9e3b427c36b8223ee5d4b9651 +Subproject commit bf274d8279e2686df64b75a799c08aa9bf311101 diff --git a/_task_template b/_task_template index 29d5e529..8461f1fb 160000 --- a/_task_template +++ b/_task_template @@ -1 +1 @@ -Subproject commit 29d5e529c83dcd23ab211be4b3c8c534462d0066 +Subproject commit 8461f1fb05336fd1f9f93f883679193a7a260ecc From fa86cf4a82a61af8445e23ef91dd8d831428a69a Mon Sep 17 00:00:00 2001 From: Kai Waldrant Date: Tue, 5 Nov 2024 09:51:22 +0100 Subject: [PATCH 42/44] change timeline filename --- documentation/fundamentals/{2020-timeline.qmd => timeline.qmd} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename documentation/fundamentals/{2020-timeline.qmd => timeline.qmd} (100%) diff --git a/documentation/fundamentals/2020-timeline.qmd b/documentation/fundamentals/timeline.qmd similarity index 100% rename from documentation/fundamentals/2020-timeline.qmd rename to documentation/fundamentals/timeline.qmd From 689b0e094a05386afd2cbcba4df60423f26ca661 Mon Sep 17 00:00:00 2001 From: Kai Waldrant Date: Tue, 5 Nov 2024 11:25:08 +0100 Subject: [PATCH 43/44] fix centering --- documentation/fundamentals/timeline.css | 10 +++++++++- documentation/fundamentals/timeline.qmd | 23 +++++++++++------------ 2 files changed, 20 insertions(+), 13 deletions(-) diff --git a/documentation/fundamentals/timeline.css b/documentation/fundamentals/timeline.css index 088df025..c1764b0e 100644 --- a/documentation/fundamentals/timeline.css +++ b/documentation/fundamentals/timeline.css @@ -19,6 +19,7 @@ break-inside: avoid; display: flex; align-items: center; + justify-content: center; padding-bottom: 1px; } @@ -88,7 +89,7 @@ .tooltip { background-color: #fff; - border: 1px solid #5F428F; + border: 1px solid; font-family: "Source Sans Pro", "Noto Sans", sans-serif; left: 0; max-width: 300px; @@ -138,4 +139,11 @@ font-size: 0.8em; line-height: 1.4; font-weight: 400; +} + +/* timeline */ + +#plot { + position: relative; + transform: translateX(50%); } \ No newline at end of file diff --git a/documentation/fundamentals/timeline.qmd b/documentation/fundamentals/timeline.qmd index 85858055..e05c5d70 100644 --- a/documentation/fundamentals/timeline.qmd +++ b/documentation/fundamentals/timeline.qmd @@ -1,5 +1,5 @@ --- -title: alternate timeline +title: Timeline execute: echo: false output: false @@ -11,16 +11,12 @@ sb = require('@supabase/supabase-js'); ``` ```{ojs} -//| output: false // Based on https://observablehq.com/@d3/color-legend function Swatches(color, { columns = null, format, unknown: formatUnknown, swatchSize = 20, - swatchWidth = swatchSize, - swatchHeight = swatchSize, - marginLeft = "auto" } = {}) { const id = `legend-swatches`; const unknown = formatUnknown == null ? undefined : color.unknown(); @@ -35,19 +31,20 @@ function Swatches(color, { if (columns !== null) return htl.html`
${domain.map(value => { const label = `${format(value)}`; - return htl.html`
-
-
${label}
+ return htl.html`
+
+
${label}
`; })}
`; - return htl.html`
-
${domain.map(value => htl.html`${format(value)}`)}
`; + return htl.html`
+ ${domain.map(value => htl.html`${format(value)}`)}`; } ``` + ```{ojs} //| output: true @@ -259,7 +256,7 @@ DiDoesDigital2020Timeline = { const plot = svg.append("g") .attr("id", "plot") - .attr("transform", `translate(350, 0)`); + // .attr("transform", `translate(350, 0)`); const gy = plot.append("g") .attr("id", "y-axis") @@ -376,7 +373,9 @@ DiDoesDigital2020Timeline = {
${tooltip.node()} - ${svg.node()} +
+ ${svg.node()} +
`; From b725445c5121544e8f7b5d10d2bf25daa0a1a1f6 Mon Sep 17 00:00:00 2001 From: Kai Waldrant Date: Tue, 5 Nov 2024 11:29:18 +0100 Subject: [PATCH 44/44] update changelog --- CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 2273ca3c..f08702b7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,9 @@ # openproblems.bio unreleased +## NEW FEATURES + +* Add timeline visualisation (PR #360). + ## MAJOR CHANGES * Migrated the result scaling from R to JavaScript to allow dynamically updating the results (PR #332).