improved code documentation

README.md

@@ -13,17 +13,17 @@ vdss/
 ├── data/
 │   ├── 01_raw/             # raw data
 │   ├── 02_processed/       # processed data
-│   └── 03_output/          # output data
+│   └── 03_output/          # output data for charts
 ├── docs/
 │   ├── _quarto.yml         # quarto configuration
-│   ├── datareport.qmd      # quarto markdown file
+│   ├── datareport.qmd      # quarto md datareport
 │   ├── personas.pdf        # personas
 │   └── requirements.txt    # quarto build requirements
-├── js/                     # javascript files
+├── js/                     # js files for charts & utils
 ├── node_modules/           # node modules
 ├── .gitignore
-├── index.html              # index file
-├── index.js                # index js file
+├── index.html              # index file for website
+├── index.js                # index js file for website
 ├── LICENSE                 # license file
 ├── package-lock.json       # package lock file
 ├── package.json            # package file

index.html

@@ -106,7 +106,7 @@ <h2 class="subheading">
                         <span>Interactive Charts!</span>
                         <span>Chart Menu at the top right corners</span>
                         <span>Story only created for Desktop Devices</span>
-                        <span>Supported Browsers: Chrome, Edge</span>
+                        <span>Best supported browsers: Chrome, Edge</span>
                     </div>
                 </div>
             </div>
@@ -334,7 +334,7 @@ <h3>in various regions of Switzerland</h3>
 
             <!----------------------------------------- Page 7 ----------------------------------------->
             <div class="section">
-                <!------- Slide 0 ----->
+                <!-------------------------------- Slide 0 -------------------------------->
                 <div class="slide">
                     <div class="content">
                         <h2 class="slide-title">
@@ -343,7 +343,7 @@ <h2 class="slide-title">
                         </h2>
                     </div>
                 </div>
-                <!------ Slide 1 ------>
+                <!-------------------------------- Slide 1 -------------------------------->
                 <div class="slide">
                     <div class="content">
                         <div class="c-f1_2-mid">
@@ -378,7 +378,7 @@ <h3>
                     </div>
                 </div>
 
-                <!------ Slide 2 ------>
+                <!-------------------------------- Slide 2 -------------------------------->
                 <div class="slide">
                     <div class="content">
                         <div class="c-full tax-card">
@@ -571,7 +571,7 @@ <h2>Tax Reducing Factors and Deductions</h2>
                         </div>
                     </div>
                 </div>
-                <!------ Slide 3 ------>
+                <!-------------------------------- Slide 3 -------------------------------->
                 <div class="slide">
                     <div class="content">
                         <div class="c-v1_3-left tax-title tax">
@@ -664,7 +664,7 @@ <h3>person</h3>
                         </div>
                     </div>
                 </div>
-                <!------ Slide 4 ------>
+                <!-------------------------------- Slide 4 -------------------------------->
                 <div class="slide">
                     <div class="content">
                         <div class="c-v1_3-left tax-title tax">
@@ -755,7 +755,7 @@ <h3>without children</h3>
                         </div>
                     </div>
                 </div>
-                <!------ Slide 5 ------>
+                <!-------------------------------- Slide 5 -------------------------------->
                 <div class="slide">
                     <div class="content">
                         <div class="c-v1_3-left tax-title tax">

index.js

@@ -6,11 +6,8 @@ import { s4Chart } from "./js/s4";
 import { s5Chart } from "./js/s5";
 import { s6Chart } from "./js/s6";
 
-// ------------------------------- VARIABLES -------------------------------
-var scrollCountTrigger = 6; //number of times the user has to scroll to go to the next section
-var scrollCount = 0; //number of times the user has to scroll to go to the next section
-
 // --------------------------- FULLPAGE.JS Init ----------------------------
+// see https://alvarotrigo.com/fullPage/docs/
 new fullpage("#fullpage", {
     licenseKey: "gplv3-license",
 
@@ -70,6 +67,7 @@ new fullpage("#fullpage", {
         enabled: true,
     },
 
+    // animate charts on scroll trigger
     beforeLeave: function (origin, destination, direction) {
         renderChart(origin, destination);
         return true;

js/s1.js

@@ -1,19 +1,13 @@
+// ------------------- Imports -------------------
 import ApexCharts from "apexcharts";
 import { s1Data } from "../data/03_exports/s1Data";
 
-// ------------------- Data Preparation -------------------
+// ------------------- Chart Preparation -------------------
+// generate colors and set last color to red (-> Switzerland)
 var colors = new Array(s1Data.length - 1).fill("#93B7BE");
 colors.push("#C8553D");
 
-var data2018 = s1Data.map((x) => {
-    return {
-        x: x.country,
-        y: x["2018"],
-        color: colors.shift(),
-    };
-});
-
-// ------------------- Chart Preparation -------------------
+// set chart options
 var options = {
     chart: {
         type: "bar",
@@ -39,11 +33,11 @@ var options = {
     series: [
         {
             name: "Ratio of homeownership",
-            data: data2018.map((x) => {
+            data: s1Data.map((x) => {
                 return {
-                    x: x.x,
-                    y: x.y,
-                    fillColor: x.color,
+                    x: x.country,
+                    y: x["2018"],
+                    fillColor: colors.shift(),
                 };
             }),
         },

js/s2.js

@@ -1,13 +1,14 @@
+// ------------------- Imports -------------------
 import ApexCharts from "apexcharts";
 import { s2Data } from "../data/03_exports/s2Data.js";
 import { pipe } from "./tooltip.js";
 
-// ------------------- Data Preparation -------------------
-
 // ------------------- Chart Preparation -------------------
+// generate colors and set first color to red (-> Switzerland)
 var colors = new Array(s2Data.length - 1).fill("#93B7BE");
 colors.unshift("#C8553D");
 
+// set chart options
 var options = {
     chart: {
         type: "bar",

js/s3.js

@@ -1,21 +1,27 @@
+// ------------------- Imports -------------------
 import ApexCharts from "apexcharts";
 import { s3Data } from "../data/03_exports/s3Data.js";
 
 // ------------------- Data Preparation -------------------
+// filter/map data to different series [condos, houses, appartments]
+
+// condos map
 var condos = s3Data.map((x) => {
     return {
         x: x.date,
         y: x.prc_condos,
     };
 });
 
+// houses map
 var houses = s3Data.map((x) => {
     return {
         x: x.date,
         y: x.prc_houses,
     };
 });
 
+// appartments map
 var appartments = s3Data.map((x) => {
     return {
         x: x.date,
@@ -24,6 +30,7 @@ var appartments = s3Data.map((x) => {
 });
 
 // ------------------- Chart Preparation -------------------
+// set chart options
 var colors = ["#C8553D", "#588B8B", "#8b8bae"];
 var options = {
     chart: {

js/s4.js

@@ -1,8 +1,11 @@
+// ------------------- Imports -------------------
 import ApexCharts from "apexcharts";
 import { s4Data } from "../data/03_exports/s4Data.js";
 import { pipe, s4Tooltip } from "./tooltip.js";
 
 // ------------------- Data Preparation for each region -------------------
+// filter data to different regions
+
 var easter_swiss = s4Data.filter((x) => x.region == "Eastern Switzerland");
 var espace_midland = s4Data.filter((x) => x.region == "Espace Midland");
 var northwest_swiss = s4Data.filter(
@@ -14,6 +17,7 @@ var ticino = s4Data.filter((x) => x.region == "Ticino");
 var zurich = s4Data.filter((x) => x.region == "Zurich");
 
 // ------------------- Chart Preparation -------------------
+// set colors
 var colors = [
     "#588B8B",
     "#F28F3B",
@@ -23,6 +27,8 @@ var colors = [
     "#ff9b71",
     "#8b8bae",
 ];
+
+// set chart options
 var options = {
     chart: {
         type: "scatter",

js/s5.js

@@ -1,7 +1,10 @@
+// ------------------- Imports -------------------
 import ApexCharts from "apexcharts";
 import { s5Data } from "../data/03_exports/s5Data.js";
 
 // ------------------- Data Preparation -------------------
+
+//function which maps the data to the correct format
 function mapData(data) {
     var data2 = [];
     for (const [key, value] of Object.entries(data)) {
@@ -15,6 +18,7 @@ function mapData(data) {
     return data2;
 }
 
+// map data to different series
 var carpentry_work = mapData(
     s5Data.filter((x) => x.work_category == "General carpentry work")[0]
 );
@@ -70,6 +74,8 @@ var carpentry = mapData(
 );
 
 // ------------------- Chart Preparation -------------------
+
+// set chart options
 var options = {
     chart: {
         type: "heatmap",

js/s6.js

@@ -1,12 +1,17 @@
+// ------------------- Imports -------------------
 import ApexCharts from "apexcharts";
 import { s6Data } from "../data/03_exports/s6Data.js";
 
 // ------------------- Data Preparation -------------------
+
+// map data to different series [income_tax, profit_tax, wealth_tax]
 var income_tax = s6Data.map((x) => x.income_tax);
 var profit_tax = s6Data.map((x) => x.profit_tax);
 var wealth_tax = s6Data.map((x) => x.wealth_tax);
 
 // ------------------- Chart Preparation -------------------
+
+// set chart options
 var colors = ["#588B8B", "#C8553D", "#8b8bae"];
 var options = {
     chart: {

js/utils.js

@@ -1,4 +1,6 @@
 // ----------------------- Language Selection Feedback -----------------------
+
+// changes the language of the page currently only english is supported
 function changeLanguage() {
     var selectBox = document.getElementById("language-select");
     var selectedValue = selectBox.options[selectBox.selectedIndex].value;