Hugging Face's logo

Spaces:
Alcime
/
trump_maps
Running

App Files Community
Alcime commited on
Commit
4c30eba
·
verified ·
1 Parent(s): c0bfc77

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +78 -52
index.html CHANGED
@@ -5,66 +5,92 @@
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Political Speech Semantic Map Gallery</title>
7
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
8
- <style>
9
- /* ... (keep all existing styles) ... */
10
- .map-item {
11
- background-color: white;
12
- border-radius: 10px;
13
- overflow: hidden;
14
- box-shadow: 0 10px 20px rgba(0,0,0,0.1);
15
- transition: all 0.3s ease;
16
- display: flex;
17
- flex-direction: column;
18
- }
19
- .map-preview {
20
- flex: 1;
21
- min-height: 200px;
22
- }
23
- .stats {
24
- background-color: #f8f9fa;
25
- padding: 10px;
26
- font-size: 0.9em;
27
- border-top: 1px solid #e9ecef;
28
- }
29
- .stats p {
30
- margin: 5px 0;
31
- }
32
- </style>
33
  </head>
34
  <body>
35
- <!-- ... (keep header and container opening tags) ... -->
36
- <div class="gallery">
37
- <!-- ... (keep Trump Speeches Analysis card) ... -->
38
- <div class="map-item">
39
- <div class="map-preview">
40
- <iframe src="inaugural_speeches_map.html"></iframe>
41
- <div class="map-overlay">
42
- <a href="#" class="view-button" data-map="inaugural_speeches_map.html">View Map</a>
 
 
 
 
 
 
 
 
43
  </div>
44
  </div>
45
- <div class="map-info">
46
- <h2>US Presidential Inaugural Speeches</h2>
47
- <p>Visual topic modeling of various US presidential inaugural speeches throughout history.</p>
48
- </div>
49
- <div class="stats">
50
- <p><strong>Chi-square statistic:</strong> 50.52226900766782</p>
51
- <p><strong>p-value:</strong> 1.1307886006522511e-06</p>
52
- <p><strong>Interpretation:</strong> There is a statistically significant difference in topic distribution across political sides.</p>
53
- </div>
54
- </div>
55
- <div class="map-item">
56
- <div class="map-preview">
57
- <iframe src="topic_analysis_plot.html"></iframe>
58
- <div class="map-overlay">
59
- <a href="#" class="view-button" data-map="topic_analysis_plot.html">View Plot</a>
60
  </div>
61
  </div>
62
- <div class="map-info">
63
- <h2>Topic Distribution Analysis</h2>
64
- <p>Comparison of topic distributions between Trump, Republican, and Democratic speeches.</p>
 
 
 
 
 
 
 
 
65
  </div>
66
  </div>
67
  </div>
68
- <!-- ... (keep closing tags and script) ... -->
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
69
  </body>
70
  </html>
 
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Political Speech Semantic Map Gallery</title>
7
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
8
+ <link rel="stylesheet" href="style.css">
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
9
  </head>
10
  <body>
11
+ <header>
12
+ <h1>Political Speech Semantic Map Gallery</h1>
13
+ <p class="subtitle">Explore visual topic modeling of political speeches</p>
14
+ </header>
15
+ <div class="container">
16
+ <div class="gallery">
17
+ <div class="map-item">
18
+ <div class="map-preview">
19
+ <iframe src="trump_speeches.html"></iframe>
20
+ <div class="map-overlay">
21
+ <a href="#" class="view-button" data-map="trump_speeches.html">View Map</a>
22
+ </div>
23
+ </div>
24
+ <div class="map-info">
25
+ <h2>Trump Speeches Analysis</h2>
26
+ <p>Visual topic modeling of Trump's speeches, with metadata about which parts of his speeches discuss each topic.</p>
27
  </div>
28
  </div>
29
+ <div class="map-item">
30
+ <div class="map-preview">
31
+ <iframe src="inaugural_speeches_map.html"></iframe>
32
+ <div class="map-overlay">
33
+ <a href="#" class="view-button" data-map="inaugural_speeches_map.html">View Map</a>
34
+ </div>
35
+ </div>
36
+ <div class="map-info">
37
+ <h2>US Presidential Inaugural Speeches</h2>
38
+ <p>Visual topic modeling of various US presidential inaugural speeches throughout history.</p>
39
+ </div>
40
+ <div class="stats">
41
+ <p><strong>Chi-square statistic:</strong> 50.52226900766782</p>
42
+ <p><strong>p-value:</strong> 1.1307886006522511e-06</p>
43
+ <p><strong>Interpretation:</strong> There is a statistically significant difference in topic distribution across political sides.</p>
44
  </div>
45
  </div>
46
+ <div class="map-item">
47
+ <div class="map-preview">
48
+ <iframe src="topic_analysis_plot.html"></iframe>
49
+ <div class="map-overlay">
50
+ <a href="#" class="view-button" data-map="topic_analysis_plot.html">View Plot</a>
51
+ </div>
52
+ </div>
53
+ <div class="map-info">
54
+ <h2>Topic Distribution Analysis</h2>
55
+ <p>Comparison of topic distributions between Trump, Republican, and Democratic speeches.</p>
56
+ </div>
57
  </div>
58
  </div>
59
  </div>
60
+
61
+ <div id="mapModal" class="modal">
62
+ <span class="close-modal">&times;</span>
63
+ <div class="modal-content">
64
+ <iframe id="modalIframe" src=""></iframe>
65
+ </div>
66
+ </div>
67
+
68
+ <script>
69
+ const modal = document.getElementById('mapModal');
70
+ const modalIframe = document.getElementById('modalIframe');
71
+ const viewButtons = document.querySelectorAll('.view-button');
72
+ const closeModal = document.querySelector('.close-modal');
73
+
74
+ viewButtons.forEach(button => {
75
+ button.addEventListener('click', (e) => {
76
+ e.preventDefault();
77
+ const mapSrc = button.getAttribute('data-map');
78
+ modalIframe.src = mapSrc;
79
+ modal.style.display = 'block';
80
+ });
81
+ });
82
+
83
+ closeModal.addEventListener('click', () => {
84
+ modal.style.display = 'none';
85
+ modalIframe.src = '';
86
+ });
87
+
88
+ window.addEventListener('click', (e) => {
89
+ if (e.target == modal) {
90
+ modal.style.display = 'none';
91
+ modalIframe.src = '';
92
+ }
93
+ });
94
+ </script>
95
  </body>
96
  </html>