File size: 3,980 Bytes
d3a295a
 
 
 
 
 
 
4c30eba
d3a295a
 
4c30eba
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
d3a295a
 
4c30eba
 
 
 
 
 
 
 
 
 
 
 
 
 
 
6bb169f
 
4c30eba
 
 
 
 
 
 
 
 
 
 
6bb169f
d3a295a
 
4c30eba
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
d3a295a
 
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Political Speech Semantic Map Gallery</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Political Speech Semantic Map Gallery</h1>
        <p class="subtitle">Explore visual topic modeling of political speeches</p>
    </header>
    <div class="container">
        <div class="gallery">
            <div class="map-item">
                <div class="map-preview">
                    <iframe src="trump_speeches.html"></iframe>
                    <div class="map-overlay">
                        <a href="#" class="view-button" data-map="trump_speeches.html">View Map</a>
                    </div>
                </div>
                <div class="map-info">
                    <h2>Trump Speeches Analysis</h2>
                    <p>Visual topic modeling of Trump's speeches, with metadata about which parts of his speeches discuss each topic.</p>
                </div>
            </div>
            <div class="map-item">
                <div class="map-preview">
                    <iframe src="inaugural_speeches_map.html"></iframe>
                    <div class="map-overlay">
                        <a href="#" class="view-button" data-map="inaugural_speeches_map.html">View Map</a>
                    </div>
                </div>
                <div class="map-info">
                    <h2>US Presidential Inaugural Speeches</h2>
                    <p>Visual topic modeling of various US presidential inaugural speeches throughout history.</p>
                </div>
                <div class="stats">
                    <p><strong>Chi-square statistic:</strong> 50.52226900766782</p>
                    <p><strong>p-value:</strong> 1.1307886006522511e-06</p>
                    <p><strong>Interpretation:</strong> There is a statistically significant difference in topic distribution across political sides.</p>
                </div>
            </div>
            <div class="map-item">
                <div class="map-preview">
                    <iframe src="topic_analysis_plot.html"></iframe>
                    <div class="map-overlay">
                        <a href="#" class="view-button" data-map="topic_analysis_plot.html">View Plot</a>
                    </div>
                </div>
                <div class="map-info">
                    <h2>Topic Distribution Analysis</h2>
                    <p>Comparison of topic distributions between Trump, Republican, and Democratic speeches.</p>
                </div>
            </div>
        </div>
    </div>

    <div id="mapModal" class="modal">
        <span class="close-modal">&times;</span>
        <div class="modal-content">
            <iframe id="modalIframe" src=""></iframe>
        </div>
    </div>

    <script>
        const modal = document.getElementById('mapModal');
        const modalIframe = document.getElementById('modalIframe');
        const viewButtons = document.querySelectorAll('.view-button');
        const closeModal = document.querySelector('.close-modal');

        viewButtons.forEach(button => {
            button.addEventListener('click', (e) => {
                e.preventDefault();
                const mapSrc = button.getAttribute('data-map');
                modalIframe.src = mapSrc;
                modal.style.display = 'block';
            });
        });

        closeModal.addEventListener('click', () => {
            modal.style.display = 'none';
            modalIframe.src = '';
        });

        window.addEventListener('click', (e) => {
            if (e.target == modal) {
                modal.style.display = 'none';
                modalIframe.src = '';
            }
        });
    </script>
</body>
</html>