-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
171 lines (144 loc) · 5.9 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>News Headlines Visualization</title>
<style>
html {
font-family: Arial, sans-serif;
/* Set Arial as the default font globally */
}
#visualizationContainer {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
iframe {
margin: 10px;
width: calc(33% - 20px);
/* Adjust the width percentage as needed */
max-width: 400px;
/* Maximum width to prevent distortion */
height: auto;
}
.btn-container {
display: flex;
justify-content: center;
margin-top: 20px;
}
button {
margin: 5px;
padding: 8px 12px;
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
}
.btn-container button {
display: inline-block;
/* Ensure the "CLEAR" button is displayed inline */
}
</style>
</head>
<body>
<h1>News, Languages and Sentiment</h1>
<div class="intro" contenteditable="true" style="font-family: Arial, sans-serif; font-size: 14px; color: black;">
<h3>The news doesn't convey the same feeling across languages and countries.Click on any or all of the languages
below to compare the first 10 headlines scraped on major news sites. </h3>
</div>
<div class="sources" contenteditable="true">
<h4>Sources:</h4>
<ul>
<li> Chinese: <a href="https://cn.chinadaily.com.cn" target="_blank" rel="noopener noreferrer">China Daily</a>
</li>
<li>Arabic: <a href="https://aljazeera.net" target="_blank" rel="noopener noreferrer">Al Jazeera</a></li>
<li>Russian: <a href="https://tass.ru/" target="_blank" rel="noopener noreferrer">TASS</a></li>
</ul>
</div>
<div class="super-div">
<div class="btn-container">
<button onclick="loadVisualization('5zkma')">Chinese</button>
<button onclick="loadVisualization('sb07L')">Arabic</button>
<button onclick="loadVisualization('1vL1d')">Russian</button>
<button onclick="loadAllVisualizations(['5zkma', 'sb07L', '1vL1d'])">ALL</button>
<button onclick="clearVisualizations()">CLEAR</button>
</div>
<div id="visualizationContainer"></div>
</div>
<script>
// Update intro text on button click
// function updateIntroText() {
// const intro = document.querySelector('.intro');
// intro.textContent = 'Here are the results';
// }
// function updateIntroText() {
// const intro = document.querySelector('.intro');
// // Store the original styles before modifying the content
// const originalStyles = window.getComputedStyle(intro);
// // Update the content with the new text
// intro.textContent = 'Here are the results';
// // Apply the original styles to the updated content
// intro.style.cssText = originalStyles.cssText;
// }
// function updateIntroText() {
// const intro = document.querySelector('.intro');
// // Update content
// intro.textContent = 'Here are the results';
// // Override conflicting styles (replace with actual conflicting properties)
// intro.style.fontFamily = 'Arial, sans-serif'; // Ensure it matches the original font
// intro.style.fontSize = '16px'; // Adjust if needed
// intro.style.color = 'black'; // Set desired color
// }
// Define a global variable to store the intro text
let introText = '';
function updateIntroText() {
const intro = document.querySelector('.intro');
// Get the current intro text (if any)
introText = intro.textContent;
// Update the content with the new text
intro.textContent = 'Here are the results: the sentiments are vastly different depending on the news source';
}
// Access the introText variable outside the function
console.log('Intro text before update:', introText);
// Call the function to update the text
// updateIntroText();
// console.log('Intro text after update:', introText);
function loadVisualization(chartId) {
const container = document.getElementById('visualizationContainer');
const iframe = document.createElement('iframe');
iframe.title = 'News Sentiment Visualization';
iframe.setAttribute('aria-label', 'Bar Chart');
iframe.id = `datawrapper-chart-${chartId}`;
iframe.src = `https://datawrapper.dwcdn.net/${chartId}/1/`;
iframe.scrolling = 'no';
iframe.frameBorder = 0;
iframe.style.height = '495px'; // Adjust height as needed
container.appendChild(iframe);
// Auto-adjust height of the iframe based on content
window.addEventListener('message', (event) => {
if (event.data['datawrapper-height']) {
const height = event.data['datawrapper-height'][chartId] + 'px';
iframe.style.height = height;
}
});
}
function loadAllVisualizations(chartIds) {
const container = document.getElementById('visualizationContainer');
container.innerHTML = ''; // Clear previous visualizations if any
chartIds.forEach((chartId) => {
loadVisualization(chartId);
});
}
function clearVisualizations() {
const container = document.getElementById('visualizationContainer');
container.innerHTML = ''; // Clear all visualizations
}
// Call updateIntroText inside each button's onclick event handler:
document.querySelectorAll('.btn-container button').forEach(button => {
button.addEventListener('click', updateIntroText);
});
</script>
</body>
</html>