Skip to content

Commit

Permalink
update with barchart
Browse files Browse the repository at this point in the history
  • Loading branch information
@elproffesore
elproffesore committed Jul 6, 2024
1 parent 2e0109c commit 595f961
Show file tree
Hide file tree
Showing 14 changed files with 223 additions and 266 deletions.
102 changes: 101 additions & 1 deletion public/crisis.json
View file
Original file line number Diff line number Diff line change
@@ -1 +1,101 @@
{"Crisis":{"Overall":37.0,"Generation":{"GenZ":54.0,"Young":39.0,"Boomer":26.0,"Old":16.0},"Geography":{"East":40.0,"West":37.0,"City":38.0,"EastCity":36.0,"WestCity":38.0,"Rural":37.0,"EastRural":42.0,"WestRural":36.0},"Gender":{"Men":32.0,"Women":43.0},"Class":{"Poor":{"Overall":50.0,"Women":52.0,"Men":46.0,"City":52.0,"Rural":49.0},"Rich":{"Overall":28.0,"Women":31.0,"Men":26.0,"City":29.0,"Rural":28.0}},"FeltRealities":{"Doomsday":{"Crisis":51.0,"NoCrisis":7.0},"Suffering":{"Crisis":27.0,"NoCrisis":4.0},"Situation":{"Crisis":55.0,"NoCrisis":13.0},"Bills":{"Crisis":36.0,"NoCrisis":7.0,"Poor_Crisis":45.0,"Poor_NoCrisis":10.0,"Rich_Crisis":29.0,"Rich_NoCrisis":2.0}},"Democracy":{"TrustGov":{"Crisis":30.0,"NoCrisis":53.0},"TrustPolice":{"Crisis":72.0,"NoCrisis":88.0},"TrustLegal":{"Crisis":55.0,"NoCrisis":80.0},"Demo":{"Crisis":61.0,"NoCrisis":68.0},"Nationalism":{"Crisis":65.0,"NoCrisis":55.0},"Dictatorship":{"Crisis":14.0,"NoCrisis":6.0},"LikesAFD":{"Crisis":20.0,"NoCrisis":8.0},"LikesAFDAndDictatorship":{"LikesAFD":28.0,"IndifferentAFD":5.0},"LikesAFDAndNationalism":{"LikesAFD":90.0,"IndifferentAFD":53.0},"LikesGruene":{"Crisis":7.0,"NoCrisis":15.0}}}}
{
"Crisis": {
"Overall": 37.0,
"Generation": {
"GenZ": 54.0,
"Young": 39.0,
"Boomer": 26.0,
"Old": 16.0
},
"Geography": {
"East": 40.0,
"West": 37.0,
"City": 38.0,
"EastCity": 36.0,
"WestCity": 38.0,
"Rural": 37.0,
"EastRural": 42.0,
"WestRural": 36.0
},
"Gender": {
"Men": 32.0,
"Women": 43.0
},
"Class": {
"Poor": {
"Overall": 50.0,
"Women": 52.0,
"Men": 46.0,
"City": 52.0,
"Rural": 49.0
},
"Rich": {
"Overall": 28.0,
"Women": 31.0,
"Men": 26.0,
"City": 29.0,
"Rural": 28.0
}
},
"FeltRealities": {
"Doomsday": {
"Crisis": 51.0,
"NoCrisis": 7.0
},
"Suffering": {
"Crisis": 27.0,
"NoCrisis": 4.0
},
"Situation": {
"Crisis": 55.0,
"NoCrisis": 13.0
},
"Bills": {
"Crisis": 36.0,
"NoCrisis": 7.0
}
},
"Democracy": {
"TrustGov": {
"Crisis": 30.0,
"NoCrisis": 53.0
},
"TrustPolice": {
"Crisis": 72.0,
"NoCrisis": 88.0
},
"TrustLegal": {
"Crisis": 55.0,
"NoCrisis": 80.0
},
"Demo": {
"Crisis": 61.0,
"NoCrisis": 68.0
},
"Nationalism": {
"Crisis": 65.0,
"NoCrisis": 55.0
},
"Dictatorship": {
"Crisis": 14.0,
"NoCrisis": 6.0
},
"LikesAFD": {
"Crisis": 20.0,
"NoCrisis": 8.0
},
"LikesAFDAndDictatorship": {
"LikesAFD": 28.0,
"IndifferentAFD": 5.0
},
"LikesAFDAndNationalism": {
"LikesAFD": 90.0,
"IndifferentAFD": 53.0
},
"LikesGruene": {
"Crisis": 7.0,
"NoCrisis": 15.0
}
}
}
}
95 changes: 30 additions & 65 deletions src/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,8 @@
import GridComponent from './components/GridComponent.vue';
import ScrollytellingComponent from './components/ScrollytellingComponent.vue';
import BarComparison from './components/Visualizations/BarComparison.vue';
import PointOnLineComparison from './components/Visualizations/PointOnLineComparison.vue';
import AppHeader from './components/AppHeader.vue';
import AppFooter from './components/AppFooter.vue';
import SelectionComponent from './components/SelectionComponent.vue';
import CitationComponent from './components/CitationComponent.vue';
import LinePlotComponent from './components/Visualizations/LinePlotComponent.vue';
import { ref, onMounted, reactive } from 'vue';
const updateMenuNumber = ref(0)
Expand All @@ -18,6 +15,10 @@ const selectedOptionWhoIsConcerned = ref('')
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
}
function updateMenu(resp) {
updateMenuNumber.value = resp.index
updateMenuProgress.value = resp.progress
Expand All @@ -30,6 +31,7 @@ onMounted(async () => {
}
})
data.statistics = await response.json()
selectedOptionPerceivedTruth.value = Object.keys(data.statistics.Crisis.FeltRealities)[0]
const responseTime = await fetch('/crisis_overtime.json', {
headers: {
'Content-Type': 'application/json',
Expand Down Expand Up @@ -99,11 +101,11 @@ function setHeighestGroup(group,percent) {
<div class="col-start-1 col-span-6">
<h1>Social status and crisis perception</h1>
<p>
The topic of generational justice became very prominent with a rising awareness on climate justice. How (much) crisis do different generations, genders feel? How crisis preceived in different classes? Are people more concered if their income is less or of they live on the countryside?
The topic of generational justice became very prominent with a rising awareness on climate justice. How (much) crisis do different generations, genders or income groups feel?
</p>
<br>
<p>
If we look at the differences of perceived crisis throughout <select ref="selection" class="w-min p-[2px] text-white bg-primary rounded"
If we look at the differences of perceived crisis throughout <select ref="selection" class="w-min p-[4px] text-white bg-primary rounded"
v-on:change="updateSelectedOptionWhoIsConcerned">
<option v-for="(option, index) in Object.keys(data.statisticsTime ?? {})" :key="index"
:value="index">
Expand All @@ -120,71 +122,33 @@ function setHeighestGroup(group,percent) {

</GridComponent>
<GridComponent class="md:mt-[25vh]">
<hr class="col-span-8 col-start-5 text-primary">
<h1 class="section-heading col-span-6 col-start-6 text-left" id="felt-realities">Stepping into the fields of
felt realities</h1>
<CitationComponent class="col-start-2 col-span-3">
<template #image><img src="./assets/images/thomastheorem.png"></template>
<template #quote>
<b class=" pt-4 text-2xl"><span class="text-primary">"</span>If people define
situations as real, then their consequences are also real.<span
class="text-primary">"</span></b>
<p class="text-xs pt-4">– Thomas-Theorem (1928)"</p>
</template>
</CitationComponent>
<div class="col-start-2 col-span-10 justify-center flex" >
<img class="w-[50%]" src="./assets/images/quote.png">
</div>
</GridComponent>
<GridComponent class="md:mt-[25vh]">

<!-- <PointOnLineComparison
:data="crisis"
:left="false"
:progress="updateMenuProgress"
:current-index="updateMenuNumber"
:component-index="2"
:scrollable="true">
<BarComparison class="col-start-2 col-span-4 self-center" :data="data.statistics?.Crisis?.FeltRealities ?? {}" :selectedOption="selectedOptionPerceivedTruth">
</BarComparison>
<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>
"If people define situations as real, then their consequences are also real."
Thomas-Theorem (1928)
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.
[ hier Daten zu Angst vor Rechnungen zahlen obwohl real keine finanzielle Schieflage besteht]
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>
<br>
<p>
"If people define situations as real, then their consequences are also real."
Thomas-Theorem (1928)
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.
[ hier Daten zu Angst vor Rechnungen zahlen obwohl real keine finanzielle Schieflage besteht]
People that show the feeling of crisis are especially more extreme in the estimation of their current situation. A hightened sense of anxiety can hinder curiosity and strengthen the tendency to stick to our own beliefs; it can make us prone to extreme positions which provide a clear interpretation of our multi faceted and ever changing reality.
</p>
</PointOnLineComparison> -->
</div>

</GridComponent>
<GridComponent class="md:mt-[25vh]">
<div class="col-span-6 text-primary">
Expand All @@ -206,6 +170,7 @@ function setHeighestGroup(group,percent) {
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="">
<img class="col-start-4 col-span-6 self-start row-span-3 " src="./assets/images/afd.png" alt="">
</GridComponent>
<GridComponent>
<h1 class="section-heading col-span-12" id="crisis-resilience">Crisis Resilience</h1>
Expand Down
Binary file added src/assets/images/afd.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/images/quote.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 0 additions & 10 deletions src/components/CitationComponent.vue
View file

This file was deleted.

12 changes: 0 additions & 12 deletions src/components/CountingNumbers.vue
View file

This file was deleted.

2 changes: 1 addition & 1 deletion src/components/SelectionComponent.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ const props = defineProps({
})
</script>
<template>
<select ref="selection" class="w-min p-[2px] text-white bg-primary rounded">
<select ref="selection" class="w-min p-[8px] text-white bg-primary rounded">
<option v-for="(option, index) in options" :key="index" :value="index">
{{ option }}
</option>
Expand Down
8 changes: 0 additions & 8 deletions src/components/SourceComponent.vue
View file

This file was deleted.

Loading

0 comments on commit 595f961

Please sign in to comment.