working barchart

public/crisis.json

@@ -46,10 +46,6 @@
                 "Crisis": 27.0,
                 "NoCrisis": 4.0
             },
-            "Situation": {
-                "Crisis": 55.0,
-                "NoCrisis": 13.0
-            },
             "Bills": {
                 "Crisis": 36.0,
                 "NoCrisis": 7.0

src/App.vue

@@ -16,8 +16,10 @@ function updateSelectedOptionWhoIsConcerned(target) {
     selectedOptionWhoIsConcerned.value = target.explicitOriginalTarget[target.explicitOriginalTarget.value].innerText
 }
 const selectedOptionPerceivedTruth = ref('')
-function updateSelectedOptionPerceivedTruth(target) {
-    selectedOptionPerceivedTruth.value = target.explicitOriginalTarget[target.explicitOriginalTarget.value].innerText
+const selectedOptionPerceivedTruthIndex = ref(0)
+function updateSelectedOptionPerceivedTruth(option,index) {
+    selectedOptionPerceivedTruth.value = option;
+    selectedOptionPerceivedTruthIndex.value = index
 }
 function updateMenu(resp) {
     updateMenuNumber.value = resp.index
@@ -90,7 +92,7 @@ function setHeighestGroup(group,percent) {
                         common ground of perception, share mitigation strategy and build collective resilience?
                     </p>
                 </div>
-                <img class="col-start-2 col-span-10" src="./assets/images/multicrisis.png" alt="">
+                <img class="col-start-2 col-span-10" src="./assets/images/polycrisis.png" alt="">
             </GridComponent>
             <GridComponent class="md:mt-[25vh]">
                 <div class="col-start-7 col-span-5">
@@ -105,7 +107,7 @@ function setHeighestGroup(group,percent) {
                     </p>
                     <br>
                     <p>
-                        If we look at the differences of perceived crisis throughout <select ref="selection" class="w-min p-[4px] text-white bg-primary rounded"
+                        If we look at the differences of perceived crisis throughout <select ref="selection" class="w-min p-[2px] text-white bg-primary rounded"
                         v-on:change="updateSelectedOptionWhoIsConcerned">
                         <option v-for="(option, index) in Object.keys(data.statisticsTime ?? {})" :key="index"
                             :value="index">
@@ -127,19 +129,26 @@ function setHeighestGroup(group,percent) {
                 </div>
             </GridComponent>
             <GridComponent class="md:mt-[25vh]">
-
-                <BarComparison class="col-start-2 col-span-4 self-center" :data="data.statistics?.Crisis?.FeltRealities ?? {}" :selectedOption="selectedOptionPerceivedTruth">
-                </BarComparison>
+                <div class="col-start-2 col-span-4 grid items-center">
+                    <div class="flex gap-5 justify-center">
+                        <button class="button" v-for="(option, index) in Object.keys(data.statistics?.Crisis.FeltRealities ?? {})" :key="index"
+                    :value="index" @click="updateSelectedOptionPerceivedTruth(option,index)" >{{option}}</button>
+                    </div>
+                    <h1 class="text-center">{{ [
+                        'I am feeling a sort of doomsday mood.',
+                        'I am suffering more than others in the current situation.',
+                        'Recently, my situation has deteriorated significantly.',
+                        'To what extent are you concerned about no longer being able to pay your bills?'
+                        ][selectedOptionPerceivedTruthIndex] }}</h1>
+                    <BarComparison :data="data.statistics?.Crisis?.FeltRealities ?? {}" :selectedOption="selectedOptionPerceivedTruth">
+                    </BarComparison>
+                    <div>
+                        <hr>
+                        <p class="text-right text-xs">Quelle</p>
+                    </div>
+                </div>
                 <div class="col-span-5 col-start-7">
                     <h1 class="section-heading text-left" id="felt-realities">Between real feelings and perceived truth</h1>
-                    <p>                <select ref="selection" class="w-min p-[4px] text-white bg-primary rounded"
-                        v-on:change="updateSelectedOptionPerceivedTruth">
-                        <option v-for="(option, index) in Object.keys(data.statistics?.Crisis.FeltRealities ?? {})" :key="index"
-                            :value="index">
-                            {{ option }}
-
-                        </option>
-                    </select></p>
                     <p>
                         According to famous Thomas Theorem, formulated by by William and Dorothy Thomas in 1928, we can point out, that the interpretation of a situation (however "objectively" false it may appear) has real consequences because the actions of actors are based on their definition of the situation. In other words, the interpretation of a situation causes the action. This interpretation is not objective. Actions are affected by subjective perceptions of situations. Whether there even is an objectively correct interpretation is not important for the purposes of helping guide individuals' behavior.
                     </p>
@@ -151,11 +160,9 @@ function setHeighestGroup(group,percent) {
 
             </GridComponent>
             <GridComponent class="md:mt-[25vh]">
-                <div class="col-span-6 text-primary">
-                    <hr>
-                    <h1 class="section-heading text-text text-right" id="effects-on-democracy">Effects on Democracy</h1>
-                </div>
-                <p class="col-start-2 col-span-4"> Different Interpretation of Realities has strong effects on
+                <div class="col-start-2 col-span-5">
+                    <h1 class="section-heading" id="effects-on-democracy">Effects on Democracy</h1>
+                    <p> Different Interpretation of Realities has strong effects on
                     cooperation in a
                     democratic
                     system. The perception of urgent fields of actions varies strongly- and the higher your crises
@@ -169,7 +176,8 @@ function setHeighestGroup(group,percent) {
                     how
                     to
                     handle a crises. Strong</p>
-                <img class="col-start-8 col-span-4 self-start row-span-2 " src="./assets/images/Bundestag.png" alt="">
+                </div>
+                <img class="col-start-7 col-span-4 self-start mt-[-40%]" src="./assets/images/Bundestag.png" alt="">
                 <img class="col-start-4 col-span-6 self-start row-span-3 " src="./assets/images/afd.png" alt="">
             </GridComponent>
             <GridComponent>

src/components/Visualizations/BarComparison.vue

@@ -32,6 +32,31 @@ onMounted(() => {
         .attr('width', d => scaleX.value(100))
         .attr('height', barHeight)
         .attr('fill', '#ccc')
+
+    const legend = svg.value.append('g')
+                .attr('class', 'legend')
+                .attr('transform', `translate(${0},${height.value-25})`)
+                .selectAll('.legend-item')
+                .data(['No Crisis Feeling','Crisis Feeling'])
+                .enter()
+                .append('g')
+                .attr('class', 'legend-item')
+                .attr('transform', (d, i) => `translate(${i * 125},0)`)
+            
+            legend.append('rect')
+                .attr('x', 0)
+                .attr('y', 0)
+                .attr('rx',2)
+                .attr('class', 'legend-rect')
+                .attr('width', 10)
+                .attr('height', 10)
+                .attr('fill', (d,i) => d == 'Crisis Feeling' ? 'var(--primary)' : 'var(--secondary)')
+
+            legend.append('text')
+                .attr('x', 15)
+                .attr('y', 10)
+                .attr('class', 'text-xs legend-text')
+                .text(d => d);
 })
 function updateBarComparison() {
     if (Object.keys(props.data).length == 0) return
@@ -68,7 +93,7 @@ function updateBarComparison() {
         .append('text')
         .attr('class', 'barComparisonText text-text')
         .attr('x', d => scaleX.value(props.data[props.selectedOption][d])-15)
-        .attr('y', (d, i) => barHeight + 50)
+        .attr('y', (d, i) => barHeight + 35)
         .text(d => props.data[props.selectedOption][d] + "%")
         .attr('text-anchor', 'middle')
         .attr('alignment-baseline', 'middle')
@@ -90,7 +115,7 @@ function updateBarComparison() {
     .append('path')
     .attr('class', 'barComparisonLine')
     .attr('d', d => {
-        return `M ${scaleX.value(props.data[props.selectedOption][d])-15},0 L ${scaleX.value(props.data[props.selectedOption][d])-15},15`
+        return `M ${scaleX.value(props.data[props.selectedOption][d])-15},${barHeight+5} L ${scaleX.value(props.data[props.selectedOption][d])-15},${barHeight+20}`
     })
     .attr('stroke', 'black')
     .attr('stroke-width', 1)
@@ -100,7 +125,7 @@ function updateBarComparison() {
     .transition()
     .duration(600)
     .attr('d', d => {
-        return `M ${scaleX.value(props.data[props.selectedOption][d])-15},${barHeight+10} L ${scaleX.value(props.data[props.selectedOption][d])-15},${barHeight+30}`
+        return `M ${scaleX.value(props.data[props.selectedOption][d])-15},${barHeight+5} L ${scaleX.value(props.data[props.selectedOption][d])-15},${barHeight+20}`
     })
 
 }
@@ -114,16 +139,9 @@ watch(() => props.selectedOption, function (nv) {
 })
 </script>
 <template>
-    <div>
-        <div>
-            <svg :id="'barComparison'" class="h-[33vh]" width="100%" height="100%"></svg>
-        </div>
         <div>
-            <hr>
-            <p class="text-right text-xs">Quelle</p>
+            <svg :id="'barComparison'" class="h-[25vh]" width="100%" height="100%"></svg>
         </div>
-
-    </div>
 
 </template>
 <style></style>

src/components/Visualizations/LinePlotComponent.vue

@@ -83,6 +83,7 @@ function updateLinePlot() {
             legend.append('rect')
                 .attr('x', 0)
                 .attr('y', 0)
+                .attr('rx',2)
                 .attr('class', 'legend-rect')
                 .attr('width', 10)
                 .attr('height', 10)

src/style.css

@@ -61,4 +61,13 @@
     .marginSide{
         @apply md:mx-[45px]
     }
+    .button {
+        @apply border border-primary rounded-lg px-4 py-2;
+    }
+    .button:hover {
+        @apply bg-primary text-white;
+    }
+    .button:active {
+        @apply bg-primary text-white;
+    }
 }