Skip to content

Commit

Permalink
Design updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@davromano
davromano committed May 30, 2024
1 parent 6a905bf commit c81e0f6
Show file tree
Hide file tree
Showing 13 changed files with 630 additions and 388 deletions.
10 changes: 2 additions & 8 deletions website/src/App.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,12 +27,6 @@
padding: 40px 20px;
}

.App-header h1 {
color: #00006e;
font-size: 4.5rem;
text-align: center;
margin-bottom: 25px;
}

.App-header .description {
color: #00006e;
Expand Down Expand Up @@ -70,8 +64,8 @@
.component-container {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
justify-content: left;
align-items: left;
margin-top: 20px;
}

Expand Down
27 changes: 14 additions & 13 deletions website/src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import Banner from "./Banner";
import BarChart from "./BarChart";
import GraphTest from "./GraphTest";
import MapComponent from "./MapComponent";
import './fonts.css'; // Import the custom font CSS file

function App() {

Expand All @@ -13,18 +14,18 @@ function App() {
return (
<div className="App">
<Banner setVariable={setVariable} />
<header className="App-header">
<h1>
<header className="App-header bg-gradient-to-b from-yellow-300 via-yellow-100 to-white p-6">
<p className="font-bespoke font-regular mx-8 mt-20 text-7xl w-3/4 text-[#00006e]">
How Are European Views on Politics and Society Changing?
</h1>
</p>
<div className="description">
<p>
<p className="font-bespoke font-light text-[#00006e]">
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>
<p>
<p className="font-bespoke font-light mt-6 text-[#00006e]">
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?
Expand All @@ -36,26 +37,26 @@ function App() {
</header>

<section className="section">
<h2 className="text-3xl w-96 ml-7 mt-5">
<h2 className="text-3xl w-96 ml-7 mt-5 font-bespoke font-medium">
1. Bar Chart: Setting the Stage
</h2>
<p className="text-base w-3/4 mt-10 text-container">
<p className="text-base w-3/4 mt-10 text-container font-bespoke font-light">
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.
</p>
<div className="component-container">
<div >
<BarChart variable={variable} />
</div>
</section>

<section className="section">
<h2 className="text-3xl w-96 ml-7 mt-5">
<h2 className="text-3xl w-96 ml-7 mt-5 font-bespoke font-medium">
2. Gender Divide Across Europe
</h2>
<p className="text-base w-3/4 mt-10 text-container">
<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
Expand All @@ -68,18 +69,18 @@ function App() {
</section>

<section className="section">
<h2 className="text-3xl w-96 ml-7 mt-5">
<h2 className="text-3xl w-96 ml-7 mt-5 font-bespoke font-medium">
3. Ranking the Gender Divide
</h2>
<p className="text-base w-3/4 mt-10 text-container">
<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>
<div className="component-container">
<div>
<GraphTest variable={variable} />
</div>
</section>
Expand Down
182 changes: 130 additions & 52 deletions website/src/Banner.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,76 @@ import React, { useState } from "react";

const Banner = ({ setVariable }) => {
const [selected, setSelected] = useState("wellbeing");
const [hovered, setHovered] = useState("");

const categories = {
wellbeing: [
{ key: "happy", description: "how happy are you?" },
{ key: "health", description: "how healthy are you?" },
{ key: "safety", description: "how concern about safety after dark?" },
{ key: "satisfaction", description: "how satisfied are you with life?" },
],
internet: [
{ key: "netuse", description: "personal internet use, how often?" },
{ key: "netuseofc", description: "internet use, how often?" },
],
relig: [
{ key: "pray", description: "how often do you pray?" },
{
key: "rgattend",
description: "how often do you attend religious services?",
},
{ key: "religiosity", description: "how religious are you?" },
],
social: [
{
key: "socact",
description: "how often do you take part in social activities?",
},
{
key: "socmeet",
description: "how often you meet with friends and relatives?",
},
{
key: "intpers",
description:
"how many people you discuss intimate and personal matters?",
},
],
finstab: [
{ key: "incfeel", description: "feeling about household’s income?" },
{
key: "inccomp",
description: "household's total net income, all sources (deciles)",
},
],
conservatism: [
{
key: "polviews",
description: "political views, liberal to conservative scale?",
},
{
key: "govtrole",
description: "role of government in individuals’ lives?",
},
{ key: "tradvalues", description: "importance of traditional values?" },
],
trust: [
{ key: "trustpeople", description: "general trust in people" },
{ key: "trustgov", description: "trust in government" },
{ key: "trustmedia", description: "trust in media" },
],
};

const labels = {
wellbeing: "Wellbeing",
internet: "Internet",
relig: "Religion",
social: "Social",
finstab: "Financial Stability",
conservatism: "Conservatism",
trust: "Trust",
};

const handleButtonClick = (variable) => {
setVariable(variable);
Expand All @@ -10,60 +80,68 @@ const Banner = ({ setVariable }) => {

const buttonClass = (variable) =>
selected === variable
? "bg-white text-blue-800 font-bold py-2 px-6 rounded border-2 border-white"
: "bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-6 rounded border-2 border-white";
? "bg-white text-blue-800 font-bold py-2 px-10 rounded border-2 border-white shadow-md"
: "bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-10 rounded shadow-md";

const handleMouseEnter = (category) => {
setHovered(category);
};

const handleMouseLeave = () => {
setHovered("");
};

return (
<div className="bg-[#00006e] text-white fixed top-0 w-full flex justify-around items-center p-4 z-50">
<button
id="btn-1"
className={buttonClass("wellbeing")}
onClick={() => handleButtonClick("wellbeing")}
>
Wellbeing
</button>
<button
id="btn-2"
className={buttonClass("internet")}
onClick={() => handleButtonClick("internet")}
>
Internet
</button>
<button
id="btn-3"
className={buttonClass("relig")}
onClick={() => handleButtonClick("relig")}
>
Religion
</button>
<button
id="btn-4"
className={buttonClass("social")}
onClick={() => handleButtonClick("social")}
>
Social
</button>
<button
id="btn-5"
className={buttonClass("finstab")}
onClick={() => handleButtonClick("finstab")}
>
Financial Stability
</button>
<button
id="btn-6"
className={buttonClass("conservatism")}
onClick={() => handleButtonClick("conservatism")}
>
Conservatism
</button>
<button
id="btn-7"
className={buttonClass("trust")}
onClick={() => handleButtonClick("trust")}
>
Trust
</button>
<div className="bg-[#00006e] text-white fixed top-0 w-full flex justify-around items-center p-4 z-50 font-bespoke font-medium">
{Object.keys(categories).map((category) => (
<div
onMouseEnter={() => handleMouseEnter(category)}
onMouseLeave={handleMouseLeave}
className="relative"
>
<button
id={`btn-${category}`}
className={buttonClass(category)}
onClick={() => handleButtonClick(category)}
>
{labels[category]}
</button>
{hovered === category && (
<div
className="absolute mt-4 bg-white text-black rounded shadow-lg text-left pl-3 p-2 font-bespoke font-light"
style={{
width:
category === "wellbeing" || category === "trust"
? "150%"
: "200%",
maxWidth: "300px",
left:
category === "trust"
? "auto"
: category === "wellbeing"
? "0"
: "50%",
right: category === "trust" ? "0" : "auto",
transform:
category === "wellbeing"
? "none"
: category === "trust"
? "none"
: "translateX(-50%)",
}}
>
Index based on:
<ul className="list-disc pl-5">
{categories[category].map((variable) => (
<li key={variable.key} className="">
{variable.description}
</li>
))}
</ul>
</div>
)}
</div>
))}
</div>
);
};
Expand Down
2 changes: 1 addition & 1 deletion website/src/BarChart.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -243,7 +243,7 @@ const BarChart = ({ variable }) => {
return (
<div className="flex w-full ml-10">
<div className="flex flex-col">
<p className="mb-4">{text}</p>
<p className="mb-4 font-bespoke font-light">{text}</p>
<svg ref={chartRef} width="960" height="550"></svg>
</div>
</div>
Expand Down
3 changes: 2 additions & 1 deletion website/src/GraphTest.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -301,6 +301,7 @@ const GraphTest = ({ variable }) => {

return (
<div className="flex-col justify-center">
<p className="mb-12 font-bespoke font-light">{text}</p>
<svg ref={d3Container} />

<div
Expand All @@ -327,7 +328,7 @@ const GraphTest = ({ variable }) => {
onChange={(value) => setSelectedYear(value.toString())}
/>
</div>
<p className="mt-12">{text}</p>

</div>
);
};
Expand Down
Loading

0 comments on commit c81e0f6

Please sign in to comment.