v2.1.0

elproffesore · Jul 8, 2024 · 600d138 · 600d138
1 parent 203b725
commit 600d138
Show file tree

Hide file tree

Showing 11 changed files with 160 additions and 142 deletions.
diff --git a/public/crisis.json b/public/crisis.json
@@ -56,13 +56,13 @@
                 "Crisis": 30.0,
                 "NoCrisis": 53.0
             },
+            "Trust in Legal": {
+                "Crisis": 55.0,
+                "NoCrisis": 80.0
+            },
             "Favors AFD": {
                 "Crisis": 20.0,
                 "NoCrisis": 8.0
-            },
-            "Favors Die Grünen": {
-                "Crisis": 7.0,
-                "NoCrisis": 15.0
             }
         },
         "Democracy":{
@@ -74,7 +74,6 @@
                 "Crisis": 14.0,
                 "NoCrisis": 6.0
             },
-
             "LikesAFDAndDictatorship": {
                 "LikesAFD": 28.0,
                 "IndifferentAFD": 5.0

diff --git a/public/crisis_overtime.json b/public/crisis_overtime.json
@@ -25,6 +25,20 @@
             "2024-02-01": 16.0
         }
     },
+    "Gender": {
+        "Men": {
+            "2023-06-01": 23.0,
+            "2023-08-01": 27.0,
+            "2023-11-01": 28.0,
+            "2024-02-01": 32.0
+        },
+        "Women": {
+            "2023-06-01": 31.0,
+            "2023-08-01": 37.0,
+            "2023-11-01": 33.0,
+            "2024-02-01": 43.0
+        }
+    },
     "Class": {
         "Poor": {
             "2023-06-01": 35.0,
@@ -39,14 +53,14 @@
             "2024-02-01": 32.0
         }
     },
-    "City - Land": {
+    "City - Rural": {
         "City": {
             "2023-06-01": 26.0,
             "2023-08-01": 34.0,
             "2023-11-01": 31.0,
             "2024-02-01": 38.0
         },
-        "Land": {
+        "Rural": {
             "2023-06-01": 27.0,
             "2023-08-01": 30.0,
             "2023-11-01": 31.0,

diff --git a/src/App.vue b/src/App.vue
diff --git a/src/assets/images/democracy.png b/src/assets/images/democracy.png
diff --git a/src/assets/images/democracy_new.png b/src/assets/images/democracy_new.png
diff --git a/src/components/GridComponent.vue b/src/components/GridComponent.vue
@@ -1,7 +1,7 @@
 <script setup>
 </script>
 <template>
-    <div id="gridComponent" :class="`md:grid md:grid-cols-12 md:gap-[75px]`">
+    <div id="gridComponent" :class="`md:grid md:grid-cols-12 md:gap-[75px] md:mt-[25vh]`">
         <slot></slot>
     </div>
 </template>

diff --git a/src/components/Visualizations/BarComparison.vue b/src/components/Visualizations/BarComparison.vue
@@ -20,13 +20,15 @@ const barHeight = 100;
 const scaleX = ref(null)
 onMounted(() => {
     width.value = document.getElementById('barComparison').getBoundingClientRect().width 
-    height.value = document.getElementById('barComparison').getBoundingClientRect().height
+    height.value = barHeight + 100
+
     svg.value = d3.select('#barComparison')
     .attr('height', height.value)
     .attr('width', width.value)
-    scaleX.value = d3.scaleLinear().domain([0, 100]).range([10, width.value])
+
+    scaleX.value = d3.scaleLinear().domain([0, 100]).range([0, width.value])
     svg.value.append('rect')        
-        .attr('x', 10)
+        .attr('x', 0)
         .attr('rx', 10)
         .attr('ry', 10)
         .attr('width', d => scaleX.value(100)-10)
@@ -68,7 +70,7 @@ function updateBarComparison() {
     let enter = update.enter()
         .append('rect')
         .attr('class', 'barComparison')
-        .attr('x', 10)
+        .attr('x', 0)
         .attr('rx', 10)
         .attr('ry', 10)
         .attr('width', d => scaleX.value(props.data[props.selectedOption][d]))
@@ -137,11 +139,7 @@ watch(() => props.selectedOption, function (nv) {
 </script>
 <template>
         <div>
-            <svg :id="'barComparison'" class="h-[25vh]" width="100%" height="100%"></svg>
-            <div class="mt-4">
-                <hr>
-                <p class="text-right text-xs">Quelle</p>
-            </div>
+            <svg :id="'barComparison'" width="100%"></svg>
         </div>
 </template>
 <style></style>
diff --git a/src/components/Visualizations/LinePlot.vue b/src/components/Visualizations/LinePlot.vue
@@ -64,7 +64,7 @@ onMounted(() => {
         .call(d3.axisBottom(scaleX.value).ticks(4).tickFormat(d3.timeFormat('%b %Y')))
 })
 function updateLinePlot() {
-    const legendColors = ['var(--primary)','var(--secondary)', 'black', 'gray']
+    const legendColors = ['var(--primary)','var(--secondary)' ,'gray', '#f6f7eb']
     svg.value.selectAll('.legend').remove()
     svg.value.selectAll('.line').remove()
     svg.value.selectAll('polygon').remove()
@@ -149,10 +149,6 @@ function emitGroupUpdate() {
 <template>
         <div>
             <svg :id="'linePlot'" class="h-[33vh]" width="100%" height="100%"></svg>
-            <div class="mt-4">
-                <hr>
-                <p class="text-right text-xs">Quelle</p>
-            </div>
         </div>
 </template>
 <style></style>
diff --git a/src/components/Visualizations/RelativeComparison.vue b/src/components/Visualizations/RelativeComparison.vue
@@ -17,21 +17,21 @@ const svg = ref(null)
 const height = ref(0);
 const width = ref(0);
 onMounted(() => {
-    width.value = document.getElementById('relativePlot').getBoundingClientRect().width
-    height.value = document.getElementById('relativePlot').getBoundingClientRect().height
+    width.value = 10 * 40
+    height.value = 10 * 40 +50
     svg.value = d3.select('#relativePlot')
         .attr('height', height.value)
-        .attr('width', 10 * 40)
+        .attr('width', width.value)
 
     const legend = svg.value.append('g')
         .attr('class', 'legend')
         .attr('transform', `translate(${0},${height.value - 15})`)
         .selectAll('.legend-item')
-        .data(['No Crisis Feeling', 'Crisis Feeling'])
+        .data(['With no Crisis Feeling', 'With Crisis Feeling'])
         .enter()
         .append('g')
         .attr('class', 'legend-item')
-        .attr('transform', (d, i) => `translate(${i * 125},0)`)
+        .attr('transform', (d, i) => `translate(${i * 155},0)`)
 
     legend.append('rect')
         .attr('x', 0)
@@ -40,7 +40,7 @@ onMounted(() => {
         .attr('class', 'legend-rect')
         .attr('width', 10)
         .attr('height', 10)
-        .attr('fill', (d, i) => d == 'Crisis Feeling' ? 'var(--primary)' : 'var(--secondary)')
+        .attr('fill', (d, i) => d == 'With Crisis Feeling' ? 'var(--primary)' : 'var(--secondary)')
 
     legend.append('text')
         .attr('x', 15)
@@ -120,12 +120,12 @@ watch(() => props.selectedOption, function (nv) {
             <span class="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300">Crisis</span>
         </label>
         <div class="relative grid grid-cols-4 gap-8">
-            <svg :id="'relativePlot'" class="h-[60vh] col-span-4" height="100%"></svg>
+            <svg :id="'relativePlot'" class="col-span-4"></svg>
             <div class="mt-4 col-span-4">
                 <hr>
                 <p class="text-right text-xs">Quelle</p>
             </div>
-            <h2 class="absolute right-[-75px] " v-if="!(Object.keys(props.data).length == 0 || props.selectedOption == '')" >{{ switchCrisis?Object.values(props.data[props.selectedOption])[0]:Object.values(props.data[props.selectedOption])[1] }}% <br> of <br> 100%</h2>
+            <h2 class="absolute right-[-75px]" v-if="!(Object.keys(props.data).length == 0 || props.selectedOption == '')" >{{ switchCrisis?Object.values(props.data[props.selectedOption])[0]:Object.values(props.data[props.selectedOption])[1] }}% <br> out of <br> 100%</h2>
         </div>
 
     </div>

diff --git a/src/style.css b/src/style.css
@@ -10,10 +10,14 @@
         --primary: #f15060;
         --secondary: #BEB6F2;
     }
+    html{
+        background-color: var(--primary)
+    }
     body {
-        @apply bg-background text-text;
+        @apply bg-background text-text text-justify;
         overflow-x: hidden;
         scroll-behavior: smooth;
+        background-image: linear-gradient(180deg, #f15060 0%, #f5f5f5 4%)
     }
     h1 {
         @apply text-2xl pb-8;

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -17,11 +17,11 @@ module.exports = {
 
       },
       fontSize:{
-        'xs': '.75rem',
+        'xs': '.65rem',
         'sm': '.875rem ',
         'tiny': '.875rem',
         'base': '1rem',
-        'lg': '1.125rem',
+        'lg': '1rem',
         'xl': '1.25rem',
         '2xl': '1.5rem',
         '3xl': '1.875rem',