diff --git a/public/crisis.json b/public/crisis.json index 900fa29..e65d373 100644 --- 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 index 385d21e..abb907a 100644 --- 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 index 89557a3..06b968e 100644 --- a/src/App.vue +++ b/src/App.vue @@ -69,12 +69,11 @@ function setHeighestGroup(group, percent) {

How a feeling keeps us captivated.

-

The phenomena of crises are omnipresent in our times - whether climate crisis, financial crisis, - migration crisis or crisis of democracy among others. We are currently confronted with ever new - crisis - analyses that puts us into a permanent state of emergency. But what exactly does that mean for us? - And - which groups are experiencing which crises?

+

The phenomena of crisis is omnipresent and global – whether it's climate crisis, financial crisis, + migration crisis or crisis of democracy, to name few. We are constantly confronted with ever new + crisis analyses, putting us into a permanent state of emergency. But what exactly does that mean for + us? And how do feelings of crisis, anger and concern affect the democracy we live in?

+
@@ -83,114 +82,126 @@ function setHeighestGroup(group, percent) { -
-

Multicrisis

-
+
+
+

Can you feel the (poly-)crisis yet?

- While some focus on the melting of the polar caps, others fear the decline of their culture - due to foreign overrun. Groups even contradict each other in their crises perception and deny - the - existence of the other's crises. The perception of crises and the extent to which people are - affected by - them depends heavily on their own social position; a consensus on crises seems to be difficult - to - achieve in society. If everyone perceives the many crises differently, is there a chance to find - a - common ground of perception, share mitigation strategy and build collective resilience? + Reality check: we are living in instable times. Climate change, the former number one topic of + concern, is falling behind more pressing and feasible ones, such as inflation or political + conflicts. All topics are intertwined and already changing the ways we are able to live and + move. What do you experience?

-
-

Who is feeling the crisis?

-

While some focus on the melting of the polar caps, others fear the decline of their culture due - to foreign overrun. Groups even contradict on each other's crises perception and deny the - existence of the other's crises. Stereotypes are mixed with factual realities. Still, perception - of crises and the extent to which people are affected by them depends heavily on their own social position. The following section will - introduce some of these groups and their feeling for crisis.

-
-
+
-

Social status and crisis perception

-

- 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? -

+
+

Who is feeling the crisis?

+

Each crisis has a multitude of narratives to explain its origin and solutions. + Perceptions of crises and the extent to which people are affected by them depends + heavily on their own social position. They all result in different demands towards + politicians and our political system. But before we delve into what crisis means for + democracy, we ask about the feeling of crisis: depressed, anxious, angry, left behind. + Who is concerned? Is it the old? The poor? The people on the countryside? 

+ +

-

- If we look at the differences of perceived crisis throughout + - . We can see that {{ heighestGroup - }} shows the highest level of - crisis perception with {{ heighestGroupPercent - }}% at the moment. -

+ + . We can see that {{ heighestGroup + }} shows the highest level of + crisis perception with {{ + heighestGroupPercent + }}% at the moment. +

+
+
+
+

Feeling of Crisis in % among {{ selectedOptionWhoIsConcerned }}

+ + +
+

{{ { + 'Generations': 'GenZ (born after 1995), Young (1965 to 1994), Boomer (1945 - 1964) and Old (born before 1945)', + 'Gender': 'Gender is only divided into Men and Women due to small sample sizes for other Genders.', + 'City - Rural': 'City (population density of ZIP > 150/km2), Rural(population density of ZIP < 150/km2)', + 'Class': 'Poor (group with the lowest 25% of income), Rich (group with the highest 25% of income) ', + 'East - West': 'Former East Germany, Former West Germany' + }[selectedOptionWhoIsConcerned] }}

- - +
-
+
-
+
-
+
-

"{{ [ - 'I am feeling a sort of doomsday mood.', - 'I am suffering more than others in the current situation.', - 'To what extent are you concerned about no longer being able to pay your bills?' - ][selectedOptionPerceivedTruthIndex] }}"

+

-

Between real feelings and perceived truth +

About felt realities and perceived truths

- 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. + A heightened sense of anxiety can hinder trust in the surrounding and strengthen the tendency to + stick to our own beliefs; it can make us prone to extreme positions of our multi faceted and + ever changing reality. Humans rarely base their decisions on mere rational input-output + calculations, and we observe a clear drift towards populist opinions. This is why understanding + the feelings in the crises is just as important as the concrete discussions on how to solve + them. +

+
+

+ Now that we have a feeling for who is, well, feeling the crisis overall, we look at more + concrete psychological effects: social comparison, financial fears directed towards the future + and the feeling of self-efficacy *Side-Fact Self-Efficacy*.


- 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. + These Effects add up to a person's perception of justice, importance and control within their + own lives and in society.

- -
-
-

Effects on Democracy

+ +
+

Effects on Democracy

Different Interpretation of Realities has strong effects on cooperation in a democratic @@ -209,8 +220,8 @@ function setHeighestGroup(group, percent) { to handle a crises. Strong

- - +
+
@@ -224,50 +235,43 @@ function setHeighestGroup(group, percent) { :selectedOption="selectedOptionTrustInInstitutions">
-
-

Liking AFD and having tendencies to antidemocratic opinions

- -

In Germany, not only is there a clear polarization between +

+

Populist Narratives and the Idea(l) of a strong Leader

+

In Germany, not only is there a clear polarization between people favoring the Green party and the AFD. The datasets show, that as a dangerous reflex to crisis people who sympathise with the AfD, do also have a hire desire for a strong leader [Statement: is the agreement that under certain circumstances, a dictatorship is the better form of government in the national interest] as well as a higher opinion towards nationalism.

- -
- - + - +
-

Crisis Resilience

-

- Although crises lead on different spectrums of society to distrust on governmental institutions - and political parties, people still express their political position in demonstrations, no - matter the level of crisis, socioeconomic or demographic background. On the other hand, levels - of trust have been eroding no matter the political position or the feeling of crisis. On the - contrasting side to the referred feelings of crisis, anger and concern lays the feeling of - Self-Efficacy. »The traditional, hierarchical government model simply does not meet the demands - of this complex, rapidly changing age. [...] thriving in the net worked age requires governments - to change the way they think and operate. [...] we need to update our thinking.« (Eggers: »The - changing nature of government«, S. 28) - +

Crisis Resilience

+

We see how feeling crisis - angry, uncertain, left behind - goes hand in hand with peoples + financial status and generational outlook more than their gender or living area. Feeling crisis + then relates to political polarization, governmental distrust and favoring populist narratives. + Those felt and factual realities need to be addressed in other ways than either overtaking right + wing ideals or simply defending the political and societal status quo. Because it is not only + the angry and sad who loose trust, we also observe a general tendency of eroding trust and + rising anger as well as polarization and favoring right wing parties amongst all examined + groups.


-

- In the future, more diffused approaches to governance in all parts of society will only work if - there are frameworks in place that assure very high levels of transpar- - ency, accountability and integrity. At the same time, for public authorities and - society more broadly, the ability to put new forms of governance into the service - of realising people’s collective good will depend on a common commitment to - democratic values, human rights and equality of opportunity. Even with these - frameworks and values in place, the emergence of new forms of governance will - still depend fundamentally on the capacity of individuals and groups to partici- - pate actively in making and implementing decisions. -

+

In other words:

+
+

»The traditional, hierarchical government model simply does not + meet the demands of this complex, rapidly changing age. [...] thriving in the net + worked age requires governments to change the way they think and operate. [...] + we need to update our thinking.«
(Eggers: »The changing nature of government«, + S. 28)

+ +
+

What now?

+
@@ -279,6 +283,9 @@ function setHeighestGroup(group, percent) {

Dataset

+

Our Datastory is based on the Survey 'Social Sentiments in Times of Crises' that investigates + feelings and political attitudes in Germany in the period from 2022 - 2024. +

diff --git a/src/assets/images/democracy.png b/src/assets/images/democracy.png deleted file mode 100644 index ddb9486..0000000 Binary files a/src/assets/images/democracy.png and /dev/null differ diff --git a/src/assets/images/democracy_new.png b/src/assets/images/democracy_new.png new file mode 100644 index 0000000..bd2a671 Binary files /dev/null and b/src/assets/images/democracy_new.png differ diff --git a/src/components/GridComponent.vue b/src/components/GridComponent.vue index 44f7d88..6d9be5b 100644 --- a/src/components/GridComponent.vue +++ b/src/components/GridComponent.vue @@ -1,7 +1,7 @@ diff --git a/src/components/Visualizations/BarComparison.vue b/src/components/Visualizations/BarComparison.vue index 66bbe9c..1492dd9 100644 --- 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) { \ No newline at end of file diff --git a/src/components/Visualizations/LinePlot.vue b/src/components/Visualizations/LinePlot.vue index 75d4094..a79d993 100644 --- 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() { \ No newline at end of file diff --git a/src/components/Visualizations/RelativeComparison.vue b/src/components/Visualizations/RelativeComparison.vue index ecc7db3..572e6ba 100644 --- 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) { Crisis
- +

Quelle

-

{{ switchCrisis?Object.values(props.data[props.selectedOption])[0]:Object.values(props.data[props.selectedOption])[1] }}%
of
100%

+

{{ switchCrisis?Object.values(props.data[props.selectedOption])[0]:Object.values(props.data[props.selectedOption])[1] }}%
out of
100%

diff --git a/src/style.css b/src/style.css index 5aa2691..cc9d848 100644 --- 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 index 436562d..f0f2640 100644 --- 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',