Merge branch 'main' of github.com:epfl-ada/ada-2024-project-dondata2025

epfl-ada · Dec 19, 2024 · c814e8b · c814e8b
2 parents 9c5af93 + f0748bb
commit c814e8b
Show file tree

Hide file tree

Showing 9 changed files with 8,429 additions and 289 deletions.
diff --git a/README.md b/README.md
@@ -106,4 +106,5 @@ Contribution of Group Members
     - Name count prediction with Prophet and SARIMA + determining if a name was influenced using the confidence interval.
     - setting up Jekyll to host the website and making carousel shaped as movie film
     - Creating the pipelines to link all of the different parts together
+    - Worked on the results.ipynb
 - 
diff --git a/data/clean/france_mean.csv b/data/clean/france_mean.csv
diff --git a/data/clean/france_prediction.csv b/data/clean/france_prediction.csv
diff --git a/data/clean/norway_mean.csv b/data/clean/norway_mean.csv
diff --git a/data/clean/norway_prediction.csv b/data/clean/norway_prediction.csv
diff --git a/docs/_includes/plots_carrousel.html b/docs/_includes/plots_carrousel.html
@@ -0,0 +1,209 @@
+<style>
+    .body {
+        margin: 0;
+        font-family: Arial, sans-serif;
+        display: flex;
+        justify-content: center;
+    }
+
+    .carousel-wrapper {
+        max-width: max-content;
+        margin: 30px;
+        height: 60vh;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border: 2px solid #000;
+        border-radius: 8px;
+        position: relative;
+        background-color: #000000;
+        overflow: hidden;
+    }
+
+    .carousel-container {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: row;
+    }
+
+    .carousel {
+        display: flex;
+        transition: transform 0.5s ease-in-out;
+    }
+
+    .carousel-slide {
+        min-width: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        box-sizing: border-box;
+        position: relative;
+        padding: 40px 0;
+        background-color: black;
+        height: 100%; /* Ensure full height */
+    }
+
+    /* Top film strip */
+    .carousel-slide::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        height: 40px; /* Needs to be the same as the padding size*/
+        background-color: black;
+        background-image: repeating-linear-gradient(
+            to right,
+            transparent 0,
+            transparent 10px,
+            white 15px,
+            white 32px
+        );
+        background-size: 41px 25px;
+        background-position: center;
+        background-repeat: repeat-x;
+    }
+
+
+    /* Bottom film strip */
+    .carousel-slide::after {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 40px;
+        background-color: black;
+        background-image: repeating-linear-gradient(
+            to right,
+            transparent 0,
+            transparent 10px,
+            white 15px,
+            white 32px
+        );
+        background-size: 41px 25px;
+        background-position: center;
+        background-repeat: repeat-x;
+    }
+
+    .carousel-content {
+        height: 100%;
+        width: 90%;
+        max-height: calc(100% - 50px); /* Account for top/bottom padding and some margin */
+        padding: 20px;
+        text-align: left;
+        background-color: #fff;
+        z-index: 1;
+        display: flex;
+        justify-content: start;
+        align-items: start;
+        border-radius: 8px;
+        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+        filter: sepia(0.5);
+        overflow-y: auto; /* Allow scrolling if content overflows */
+        overflow-x: hidden;
+        margin: 10px 0; /* Add some spacing from the film strips */
+    }
+
+    .carousel-buttons {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        z-index: 10;
+        width: 100%;
+    }
+
+    .carousel-buttons button {
+        position: absolute;
+        padding: 10px 15px;
+        background-color: rgba(0, 0, 0, 0.5);
+        color: white;
+        font-weight: bolder;
+        border: none;
+        cursor: pointer;
+        border-radius: 5px;
+        transition: background-color 0.3s ease;
+        border: 1px solid white;
+    }
+
+    .carousel-buttons button:first-child {  /* Previous button */
+        left: 10px;
+    }
+
+    .carousel-buttons button:last-child {   /* Next button */
+        right: 10px;
+    }
+
+    .carousel-buttons button:hover {
+        background-color: #333;
+    }
+
+</style>
+
+<div class="body">
+    <div class="carousel-wrapper">
+        <div class="carousel-container">
+            <div class="carousel"  id="carousel-3">
+                <div class="carousel-slide">
+                    <div class="carousel-content" style="display: flex; flex-direction: column; align-items: center; text-align: center;">
+                        <section>
+                            1
+                        </section>  
+                    </div>
+                </div>
+                <div class="carousel-slide">
+                    <div class="carousel-content" style="display: flex; flex-direction: column; align-items: center; text-align: center;">
+                        <section>
+                            2
+                        </section>  
+                    </div>
+                </div>
+                <div class="carousel-slide">
+                    <div class="carousel-content" style="display: flex; flex-direction: column; align-items: center; text-align: center;">
+                        <section>
+                            3
+                        </section>  
+                    </div>
+                </div>
+                <div class="carousel-slide">
+                    <div class="carousel-content" style="display: flex; flex-direction: column; align-items: center; text-align: center;">
+                        <section>
+                        </section>  
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="carousel-buttons">
+            <button onclick="prevSlide3()"><</button>
+            <button onclick="nextSlide3()">></button>
+        </div>
+    </div>
+</div>
+
+{% raw %}
+
+<script>
+const carousel3 = document.getElementById('carousel-3');
+const totalSlides3 = carousel3.children.length;
+let currentSlide_newname3 = 0;
+
+function updateCarousel3() {
+    const offset3 = -currentSlide_newname3 * 100;
+    carousel3.style.transform = `translateX(${offset2}%)`;
+}
+
+function prevSlide3() {
+    currentSlide_newname3 = (currentSlide_newname3 - 1 + totalSlides3) % totalSlides3;
+    updateCarousel3();
+}
+
+function nextSlide3() {
+    currentSlide_newname3 = (currentSlide_newname3 + 1) % totalSlides3;
+    updateCarousel3();
+}
+
+</script>
+
+{% endraw %}
diff --git a/docs/index.md b/docs/index.md
@@ -77,6 +77,8 @@ In order to measure character importance, we count the number of citation of the
 
 **A VENIR : exemple avec les 2-3 persos d'un film connu, fourni par Coco**
 
+{% plots_carrousel.html %}
+
 
 ## The baby names collection
 Even if it remains a simple word, your name is what you are referred as for your entire life. It represents your whole identity and often mirrors cultural trends, family traditions or historical events.