Skip to content

Commit b5d5859

Browse files
jhellingsdatajhellingsdata
committed
Add old Festival chart scrollers
1 parent 38194be commit b5d5859

3 files changed

Lines changed: 619 additions & 0 deletions

File tree

‎EcoObservatory/festival/scrolly-simple-with-titles.html‎

Lines changed: 181 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,181 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
6+
</style>
7+
<meta charset="UTF-8">
8+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
9+
<script src="https://d3js.org/d3.v6.min.js"></script>
10+
<script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
11+
<script src="https://cdn.jsdelivr.net/npm/vega-lite@5"></script>
12+
<script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>
13+
14+
<style>
15+
body {
16+
display: flex;
17+
justify-content: center;
18+
align-items: center;
19+
height: 100vh;
20+
margin: 0;
21+
background-color: rgb(24, 42, 55);
22+
color: rgb(12, 12, 12);
23+
}
24+
25+
.container {
26+
display: flex;
27+
justify-content: space-between;
28+
align-items: center;
29+
width: 60%;
30+
height: 450px;
31+
background-color: #f0f0f0;
32+
border-radius: 10px;
33+
padding: 20px;
34+
}
35+
36+
.chart-section {
37+
width: 60%;
38+
}
39+
40+
/* Position embedded charts in centre of display */
41+
.vega-embed {
42+
margin: 0 auto;
43+
}
44+
45+
.info-section {
46+
width: 35%;
47+
display: flex;
48+
flex-direction: column;
49+
justify-content: center;
50+
}
51+
52+
h2,
53+
h3,
54+
h4 {
55+
margin: 5px 0;
56+
/* Minimised margins between headers */
57+
}
58+
59+
h2 {
60+
font-size: 2em;
61+
font-weight: bold;
62+
}
63+
64+
h3 {
65+
font-size: 1.5em;
66+
font-weight: normal;
67+
}
68+
69+
h4 {
70+
font-size: 1.2em;
71+
font-weight: normal;
72+
}
73+
74+
.nav-button {
75+
position: absolute;
76+
font-size: 3em;
77+
cursor: pointer;
78+
color: rgb(202, 202, 202);
79+
}
80+
81+
.nav-button.prev {
82+
left: 15%;
83+
/* i.e. 15% from the left-hand side. */
84+
}
85+
86+
.nav-button.next {
87+
right: 15%;
88+
}
89+
</style>
90+
</head>
91+
92+
<body>
93+
94+
<div class="container">
95+
<div class="chart-container"></div>
96+
<div class="info-section">
97+
<h5>World's 21 most populous countries</h5>
98+
<h4 class="chart-title"></h4>
99+
</div>
100+
</div>
101+
102+
<div class="nav-button prev" id="prev">◀</div>
103+
<div class="nav-button next" id="next">▶</div>
104+
105+
<script>
106+
// Load CSV data and initialise variables
107+
let currentIndex = 0;
108+
let chartData = [];
109+
110+
///// Define list of charts (each chart is a list with two elements: the path to the chart and the chart title)
111+
const charts = [
112+
['C1_Population_Top21.json', 'Largest countries by population, 2023'],
113+
['C2_Fertility.json', 'Fertility rates'],
114+
['C3_Migration.json', 'Migration rates'],
115+
['C4_PopulationDistribution_Tall.json', 'Population distribution'],
116+
['C5_GDPpc.json', 'GDP per capita'],
117+
['C6_GDP_LongRun.json', 'GDP'],
118+
['C7_GDP_5yr.json', 'GDP (5 year average)'],
119+
['C7_GDP_10yr.json', 'GDP (10 year average)'],
120+
['C9_Unemployment.json', 'Unemployment rates'],
121+
['C10_YouthUnemployment.json', 'Youth unemployment rates'],
122+
['C11_Inequality.json', 'Inequality'],
123+
['C12_MinimumWages.json', 'Minimum wages'],
124+
['C13_TaxTake.json', 'Tax take'],
125+
['C14_GovDeficit.json', 'Government deficit'],
126+
['C16_DebtCost.json', 'Debt cost'],
127+
['C16_GovDebt_Gross.json', 'Government debt'],
128+
['C17_Inflation.json', 'Inflation'],
129+
['C18_Bank_Rates.json', 'Bank rates'],
130+
['C19_PPP_BigMac.json', 'PPP'],
131+
['C20_CurrentAccount_GDP.json', 'Current account balance'],
132+
['C21_InvestmentPosition.json', 'Investment position']
133+
];
134+
135+
// Define the path to folder with charts
136+
let path = '../../charts/p21/';
137+
138+
// Embed chart at index `currentIndex` into the chart container
139+
function embedChart(index) {
140+
// Update the path to the chart. (Get index of the chart from the list of charts, then select the first element of the chart list)
141+
const chartPath = path + charts[index][0];
142+
// Embed the Vega-Lite chart (we can pass an extra json object to change some of the chart options, e.g. background colour)
143+
vegaEmbed('.chart-container', chartPath, {
144+
"config": {
145+
"background": "rgba(0,0,0,0)",
146+
},
147+
"width": 500,
148+
}).catch(console.error);
149+
150+
// Update the chart title. (Get index of the chart from the list of charts, then select the second element of the chart list)
151+
document.querySelector('.chart-title').textContent = charts[index][1];
152+
153+
}
154+
// Run our function to embed first chart
155+
embedChart(currentIndex);
156+
157+
158+
159+
// Function to update the chart and info section (run when the next or prev button is clicked)
160+
function updateChart(index) {
161+
const data = chartData[index];
162+
embedChart(index);
163+
}
164+
165+
166+
167+
// Navigation
168+
document.getElementById('next').addEventListener('click', () => {
169+
currentIndex = (currentIndex + 1) % charts.length;
170+
updateChart(currentIndex);
171+
});
172+
173+
document.getElementById('prev').addEventListener('click', () => {
174+
currentIndex = (currentIndex - 1 + charts.length) % charts.length;
175+
updateChart(currentIndex);
176+
});
177+
178+
</script>
179+
180+
</body>
181+
</html>

‎EcoObservatory/festival/scrolly-simple.html‎

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
6+
</style>
7+
<meta charset="UTF-8">
8+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
9+
<script src="https://d3js.org/d3.v6.min.js"></script>
10+
<script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
11+
<script src="https://cdn.jsdelivr.net/npm/vega-lite@5"></script>
12+
<script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>
13+
14+
<style>
15+
body {
16+
display: flex;
17+
justify-content: center;
18+
align-items: center;
19+
height: 100vh;
20+
margin: 0;
21+
background-color: rgb(24, 42, 55);
22+
color: rgb(12, 12, 12);
23+
}
24+
25+
.container {
26+
display: flex;
27+
justify-content: space-between;
28+
align-items: center;
29+
width: 60%;
30+
height: 450px;
31+
background-color: #f0f0f0;
32+
border-radius: 10px;
33+
padding: 20px;
34+
}
35+
36+
.chart-section {
37+
width: 60%;
38+
}
39+
40+
/* Position embedded charts in centre of display */
41+
.vega-embed {
42+
margin: 0 auto;
43+
}
44+
45+
.info-section {
46+
width: 35%;
47+
display: flex;
48+
flex-direction: column;
49+
justify-content: center;
50+
}
51+
52+
.nav-button {
53+
position: absolute;
54+
font-size: 3em;
55+
cursor: pointer;
56+
color: rgb(202, 202, 202);
57+
}
58+
59+
.nav-button.prev {
60+
left: 15%;
61+
/* i.e. 15% from the left-hand side. */
62+
}
63+
64+
.nav-button.next {
65+
right: 15%;
66+
}
67+
</style>
68+
</head>
69+
70+
<body>
71+
72+
<div class="container">
73+
<div class="chart-container"></div>
74+
</div>
75+
76+
<div class="nav-button prev" id="prev">◀</div>
77+
<div class="nav-button next" id="next">▶</div>
78+
79+
<script>
80+
// Load CSV data and initialise variables
81+
let currentIndex = 0;
82+
let chartData = [];
83+
84+
///// Define list of charts
85+
const charts = [
86+
'C1_Population_Top21.json',
87+
'C2_Fertility.json',
88+
'C3_Migration.json',
89+
'C4_PopulationDistribution_Tall.json',
90+
'C5_GDPpc.json',
91+
'C6_GDP_LongRun.json',
92+
'C7_GDP_5yr.json',
93+
'C7_GDP_10yr.json',
94+
'C9_Unemployment.json',
95+
'C10_YouthUnemployment.json',
96+
'C11_Inequality.json',
97+
'C12_MinimumWages.json',
98+
'C13_TaxTake.json',
99+
'C14_GovDeficit.json',
100+
'C16_DebtCost.json',
101+
'C16_GovDebt_Gross.json',
102+
'C17_Inflation.json',
103+
'C18_Bank_Rates.json',
104+
'C19_PPP_BigMac.json',
105+
'C20_CurrentAccount_GDP.json',
106+
'C21_InvestmentPosition.json'
107+
];
108+
109+
110+
// Define the path to folder with charts
111+
let path = '../../charts/p21/';
112+
113+
// Embed chart at index `currentIndex` into the chart container
114+
function embedChart(index) {
115+
const chartPath = path + charts[index];
116+
117+
// Embed the Vega-Lite chart (we can pass an extra json object to change some of the chart options, e.g. background colour)
118+
vegaEmbed('.chart-container', chartPath, {
119+
"config": {
120+
"background": "rgba(0,0,0,0)",
121+
},
122+
"width": 500,
123+
}).catch(console.error);
124+
}
125+
// Run our function to embed first chart
126+
embedChart(currentIndex);
127+
128+
129+
130+
// Function to update the chart and info section (run when the next or prev button is clicked)
131+
function updateChart(index) {
132+
const data = chartData[index];
133+
embedChart(index);
134+
}
135+
136+
// Navigation
137+
document.getElementById('next').addEventListener('click', () => {
138+
currentIndex = (currentIndex + 1) % charts.length;
139+
updateChart(currentIndex);
140+
});
141+
142+
document.getElementById('prev').addEventListener('click', () => {
143+
currentIndex = (currentIndex - 1 + charts.length) % charts.length;
144+
updateChart(currentIndex);
145+
});
146+
147+
</script>
148+
149+
</body>
150+
</html>

0 commit comments

Comments
 (0)