Skip to content

Commit

Permalink
Text_updates
Browse files Browse the repository at this point in the history
  • Loading branch information
yagmurilba committed May 31, 2024
1 parent 8ed64bc commit 665d33c
Show file tree
Hide file tree
Showing 6 changed files with 89 additions and 73 deletions.
16 changes: 16 additions & 0 deletions website/src/App.css
Original file line number Diff line number Diff line change
Expand Up @@ -137,4 +137,20 @@ body {
.theme-toggle:hover {
background-color: var(--link-color);
color: var(--background-color);
}

button {
font-size: 16px; /* Larger font size */
text-align: center; /* Center text alignment */
padding: 10px 20px; /* Comfortable padding around the text */
margin: 5px; /* Space between buttons */
border: none;
border-radius: 5px;
background-color: #4CAF50; /* A nice green background */
color: white; /* White text */
cursor: pointer;
}

button:hover {
background-color: #45a049; /* Darker green on hover */
}
70 changes: 34 additions & 36 deletions website/src/App.js
Original file line number Diff line number Diff line change
Expand Up @@ -52,67 +52,65 @@ function App() {
How Are European Views on Politics and Society Changing?
</p>
<div className="description">
<p className={`font-bespoke font-light text-justify ${theme === 'light' ? 'text-[#00006e]' : 'text-yellow-100'}`}>
Across Europe, a quiet change is brewing. Inspired by an Economist
article on the growing divide between young men and women, this
project dives into the European Social Survey (ESS) to explore how
social norms and political attitudes vary by generation and gender.
<p className={`font-bespoke font-light text-justify ${theme === 'light' ? 'text-[#00006e]' : 'text-yellow-100'}`}>
Inspired by an Economist article on the growing divide between young
men and women, this project dives into the European Social Survey
(ESS) to explore how beliefs, behavior, and life outcomes vary by
generation and gender.

</p>
<p className={`font-bespoke font-light mt-6 text-justify ${theme === 'light' ? 'text-[#00006e]' : 'text-yellow-100'}`}>
We'll be looking beyond just education and politics, examining
everyday habits like media consumption and life situations like
financial stress to see if they create these differences. Our goal?
To create an accessible and informative visualization that sheds
light on these trends, sparking a conversation about where European
society might be headed.
<p className={`font-bespoke font-light mt-4 text-justify ${theme === 'light' ? 'text-[#00006e]' : 'text-yellow-100'}`}>
We'll be probing for trends in everything
from religious activity to financial stability.
Our goal?
To create accessible and informative visualizations
that distill a sprawling survey into valuable insights – and
hopefully spark a conversation about European society’s future
along the way. Throughout this page, we visualize indices for
seven different topics concerning the lives of Europeans.
Navigate your curser to the left to see possibilities.
Each topic’s index is created by scaling responses for a set
of similar ESS questions between 1 (low) and 6 (high) before
averaging by gender, age, and/or year. Hover over a topic
to see the set of survey questions.

</p>
</div>
</header>


<section className="section">
<h2 className="text-3xl w-96 ml-7 mt-5 font-bespoke font-medium">
1. Bar Chart: Setting the Stage
<h2 className="text-3xl w-full text-center font-bespoke font-medium">
Setting the Stage: Exploring European Preferences by Age Group

</h2>
<p className="w-3/4 mt-10 text-container font-bespoke font-light text-justify">
Our journey starts with a Europe-wide snapshot. This bar chart shows
average levels of a chosen variable (like trust in institutions) for
four different age groups over time. This helps you get a feel for
overall trends before we explore how these trends differ for men and
women.
We begin with a Europe-wide snapshot. The bar chart below displays the average level of a chosen category’s index for four different age groups over time. It should help you orient yourself with overall trends before exploring differences between men and women.
</p>
<div>
<BarChart variable={variable} />
</div>
</section>

<section className="section">
<h2 className="text-3xl w-96 ml-7 mt-5 font-bespoke font-medium text-justify">
2. Gender Divide Across Europe
<h2 className="text-3xl w-full text-center font-bespoke font-medium">
Zooming In: Gender Comparison Within European Nations

</h2>
<p className="text-base w-3/4 mt-10 text-container font-bespoke font-light">
Next, we zoom in to see how men and women compare across Europe. This
heatmap uses color to show where women or men report higher levels of a
chosen variable, like political participation. You can select an age
group and drag the year slider to see how these differences change over
time. Hover over a country to see a detailed breakdown by year.
<p className="w-3/4 mt-10 text-container font-bespoke font-light text-justify">
Next, we zoom in to see how men and women compare across Europe. This choropleth uses color to show where women or men report higher levels of a chosen category’s index. The darker the shade of blue, the higher the category’s index is for men relative to women (vice versa for orange and women relative to men). At the bottom, you can select an age group and drag the year slider to slice the index in different ways. Hover over a country to see a detailed breakdown by year
</p>
<div id="map" className="component-container">
<MapComponent variable={variable}/>
</div>
</section>

<section className="section">
<h2 className="text-3xl w-96 ml-7 mt-5 font-bespoke font-medium">
3. Ranking the Gender Divide
<h2 className="text-3xl w-full text-center font-bespoke font-medium">
Ranking the Gender Divide Across Europe
</h2>
<p className="text-base w-3/4 mt-10 text-container font-bespoke font-light">
This final view lets you compare countries side-by-side. It shows a
ranked list of European nations based on the chosen variable's gender
gap in a specific year. Hover over a country to see the exact numbers
and how the gap breaks down by age group. This lets you see which
countries have the biggest differences in, for example, media
consumption habits between men and women.
<p className="text-base w-3/4 mt-10 text-container font-bespoke font-light text-justify">
We hope you enjoyed this study of Europeans male, female, young, and old! Remember to select another category on the left and continue investigating!
</p>
<div>
<GraphTest variable={variable} />
Expand Down
17 changes: 8 additions & 9 deletions website/src/BarChart.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,14 +8,13 @@ const BarChart = ({ variable }) => {
const chartRef = useRef(null);

const buttonTexts = {
wellbeing: "Wellbeing related text.",
internet: "Internet related text.",
relig: "Religion related text.",
social: "Social related text.",
finstab: "Financial stability related text.",
conservatism: "Conservatism related text.",
anti_imm: "Anti-immigration related text.",
trust: "Trust related text.",
wellbeing: "Throughout the past two decades, wellbeing (as measured by self-reported health, happiness, safety, and life satisfaction) and age have been negatively correlated. Even so, wellbeing has remained high relative to the other ESS indices we explore, and has even experienced a small increase since 2010. This increase was sustained for respondents aged 40 and above and, in 2020, saw a dip among younger respondents.",
internet: "Perhaps unsurprisingly, internet use has risen dramatically since 2002. Younger respondents saw their fastest usage increase in the aughts and have effectively topped the scales since 2016. Only the oldest respondents have not yet reported extremely frequent usage, though their uptake in the past two decades has been steady.",
relig: "Religious activity (as measured by levels of self-reported prayer and religious attendance) has seen a small but unmistakable decrease in average level since 2002. This decrease is seen across all age groups. While the oldest respondents report the largest decrease over time, the positive correlation between age and religious activity means the oldest respondents’ status as the most religious cohort is unthreatened across time.",
social: "There are two salient observations about respondents’ social activity (as measured by engagement in social activities and meetings with friends): (1) age and social participation are negatively correlated and (2) self-reported social activity has remained stable over time. The only cohort for which social activity may be trending downward is the youngest – though data from after the covid-era final survey may reflect a temporary dip. ",
finstab: "Financial stability, as measured by self-reported income levels and feelings about income levels, is one of the few indices that exhibits a sustained level shift during the measured time range. Specifically, all age groups see a boost in perceived financial stability between the 2012 and 2014 ESS rounds. This could be related to the quantitative easing from the ECB (note the ‘2014’ round collected data between 2014 and 2015) and emergence from the austerity of the early 2010s. Separately, most cohorts report similar levels of financial stability to one another in any given year; only the oldest cohort, which reports more financial vulnerability, stands apart.",
conservatism: "One of the more surprising observations across all views present in this figure is that Europe does not report any noticeable trends at all in self-reported levels of conservatism. Neither age cohort nor time intra-age-cohort exhibit a relationship with the index. In one sense, this pours cold water over the notion that Europe has been becoming more conservative since the mid-2010s (or, indeed, any sweeping statements about the average European’s political view). That said, it’s important to remember that this a self-reported metric, and that respondents may wish to be perceived as more moderate than they really are. ",
trust: "Trust in the legal system, police, and parliament saw a drawn-out if minor dip across all age cohorts between 2002 and 2012. From the 2014 round and onward, this dip was swiftly reversed. While the youngest cohort reached new highs in trust in the later period, other generations reached but did not surpass levels of trust seen when the ESS was launched.",
};

const [text, setText] = useState(buttonTexts["wellbeing"]); // State to hold the text
Expand Down Expand Up @@ -124,7 +123,7 @@ const BarChart = ({ variable }) => {
.append("div")
.attr("class", "tooltip")
.style("position", "absolute")
.style("background", "rgba(128, 128, 128, 0.7)") // Gray transparent background
.style("background", "rgba(128, 128, 128, 0.9)") // Gray transparent background
.style("color", "white") // White text
.style("border", "1px solid #fff") // White border
.style("padding", "10px")
Expand Down
18 changes: 9 additions & 9 deletions website/src/GraphTest.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,14 +11,14 @@ const GraphTest = ({ variable }) => {
const [selectedYear, setSelectedYear] = useState("2002");

const buttonTexts = {
wellbeing: "Wellbeing related text.",
internet: "Internet related text.",
relig: "Religion related text.",
social: "Social related text.",
finstab: "Financial stability related text.",
conservatism: "Conservatism related text.",
anti_imm: "Anti-immigration related text.",
trust: "Trust related text.",
wellbeing: "We find aggregate wellbeing oscillating for both women and men, though the gap does slim as the years proceed. Meanwhile, variance in wellbeing is relatively higher between 2004 and 2012, but after this period, different countries start to converge in level if not gender gap.",
internet: "By the end of the time range, the gender gap in internet usage is almost completely erased, the number of countries in which men report more internet usage is about equal to the number of countries in which women report more internet usage, and country-level gender gaps in internet usage become much smaller. This shift is speedy; even comparing 2018 and 2020 we find a marked pullback in average size of internet-usage-based gender gaps.",
relig: "Both men and women report lower average levels of religious activity over time. However, rather than manifest as a gradual trend, there appears to be a level shift around 2012-2014 and stability since. This is one of the few indices where the country level gender gaps are large and remain so even at the end of the time range. Furthermore, the gender gap is strong whether the country as a whole is particularly religious or not.",
social: "The slim gap between average male and female levels confirms the lack of a striking gender-based difference in average social activity. However, it is worth noting that the gender-based gap is typically higher when men report more social activity than women versus when women report more social activity than men. The distribution of gaps, meanwhile, appears stable, meaning there is scant evidence of overall convergence toward equality in this domain.",
finstab: "While the gender gap in financial stability is persistent, both genders benefit from the level positive shift in financial stability seen after 2012. There doesn’t appear to be a relationship between a country’s aggregate reported financial stability and the gender gap in reported financial stability except in individual years. For example, 2014 and 2016 see countries with the lowest aggregate financial stability exhibiting the highest gender differentials.",
conservatism: "While average levels of conservatism hover around the same place and even decrease through the timeframe, there is a small but steady widening of the gender gap after 2012. We find both a widening of the average gap in conservatism between men and women and a growing number of countries for which male-reported conservatism is higher than female-reported conservatism.",
trust: "An interesting trend emerges when viewing the earliest years in the time range: in countries where men have more trust in institutions than women, trust in institutions is higher overall. Equally interesting is the fact that this correlation dissipates after 2010-2012, after which neither the gender gaps nor averages differ in distribution."

};

const [text, setText] = useState(buttonTexts["wellbeing"]); // State to hold the text
Expand Down Expand Up @@ -145,7 +145,7 @@ const GraphTest = ({ variable }) => {
.append("div")
.attr("class", "tooltip")
.style("position", "absolute")
.style("background", "rgba(128, 128, 128, 0.7)") // Gray transparent background
.style("background", "rgba(128, 128, 128, 0.9)") // Gray transparent background
.style("color", "white") // White text
.style("border", "1px solid #fff") // White border
.style("padding", "5px")
Expand Down
18 changes: 10 additions & 8 deletions website/src/MapComponent.js
Original file line number Diff line number Diff line change
Expand Up @@ -51,14 +51,16 @@ const MapComponent = ({ variable }) => {
const [filteredData, setFilteredData] = useState({});

const buttonTexts = {
wellbeing: "Wellbeing related text.",
internet: "Internet related text.",
relig: "Religion related text.",
social: "Social related text.",
finstab: "Financial stability related text.",
conservatism: "Conservatism related text.",
anti_imm: "Anti-immigration related text.",
trust: "Trust related text.",

wellbeing: "Men report higher levels of wellbeing than women almost across the board. In recent years, this difference appears to have been more pronounced in Western and Northern Europe than in Eastern Europe; one country-year data point drawing attention to this trend is Lithuania in 2018, home to the single year in which women report higher wellbeing than men. Another country of interest is France, in which men consistently report outsized wellbeing relative to women when compared to other countries on the map.",
internet: "Men tend to report more internet usage than woman, especially in the earliest years of the ESS. However, in northern and eastern European countries, the gender difference lessens and even reverses in the most recent years. One country of interest is Ireland, where women exclusively report more internet usage than men following the break in data availability between 2012 and 2014.",
relig: "Female respondents consistently report more religious activity than male respondents in every country save two: Turkey and Israel. The standard gender differential in this domain is more pronounced in the south and east, where time does not appear to be bringing the two genders closer together (see Portugal, for example).",
social: "Gender-based trends in social activity are less visible than those seen for other indices. That said, in northern Europe, women tend to be more social than men. Analysis elsewhere is perhaps best conducted at the country level. For example, in France and Germany, the more social gender is not consistent, while in Slovenia, men reported noticeably more social activity than women up until recent years.",
finstab: "Financial stability is another domain in which men tend to report higher values than women. It is also another domain where regional trends are not particularly pronounced. Country-level analysis is most compelling in this case. For example, we might ask ourselves why the financial stability gender gap in France experienced a sustained widening between 2014 and 2018 while in Belgium this gap slimmed.",
conservatism: "Men tend to report higher levels of conservatism, but it is by no means a universal rule. Indeed, in all years, we find 2-3 countries in which women report higher levels of conservatism than men. Portugal is most often one such country while Spain and Hungary are not far behind. Temporal analysis yields some interesting results: for example, Poland, Sweden, Germany, and France all experience their highest gap between male and female conservatism at the tail end of the time range, perhaps indicating the beginning of a new dynamic between gender and politics.",
trust: "Rarely is this particular gender differential pronounced, and rarely do we see either gender clearly exhibiting more trust on the continent in a given year. To report one trend, higher trust among women than men appears to be a more stable gap in eastern Europe than in the West - though this does not imply stability in the level of trust itself (see Poland’s recent dip).",


};

const [text, setText] = useState(buttonTexts["wellbeing"]); // State to hold the text
Expand Down
Loading

0 comments on commit 665d33c

Please sign in to comment.