Hugging Face's logo

Spaces:
openfree
/
ylqazv
Running

App Files Community
openfree commited on
Commit
320a79f
·
verified ·
1 Parent(s): 8415a00

Upload index.html with huggingface_hub

Browse files
Files changed (1) hide show
  1. index.html +200 -19
index.html CHANGED
@@ -1,19 +1,200 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>World Map Dashboard</title>
7
+ <script src="https://d3js.org/d3.v7.min.js"></script>
8
+ <script src="https://d3js.org/topojson.v3.min.js"></script>
9
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
10
+ <style>
11
+ * {
12
+ margin: 0;
13
+ padding: 0;
14
+ box-sizing: border-box;
15
+ }
16
+
17
+ body {
18
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
19
+ background-color: #f5f5f5;
20
+ }
21
+
22
+ .container {
23
+ max-width: 1400px;
24
+ margin: 20px auto;
25
+ padding: 20px;
26
+ display: grid;
27
+ grid-template-columns: 2fr 1fr;
28
+ gap: 20px;
29
+ }
30
+
31
+ .map-container {
32
+ background: white;
33
+ padding: 20px;
34
+ border-radius: 10px;
35
+ box-shadow: 0 2px 10px rgba(0,0,0,0.1);
36
+ }
37
+
38
+ .chart-container {
39
+ background: white;
40
+ padding: 20px;
41
+ border-radius: 10px;
42
+ box-shadow: 0 2px 10px rgba(0,0,0,0.1);
43
+ }
44
+
45
+ .country {
46
+ fill: #ccc;
47
+ stroke: #fff;
48
+ stroke-width: 0.5;
49
+ cursor: pointer;
50
+ transition: fill 0.3s;
51
+ }
52
+
53
+ .country:hover {
54
+ fill: #666;
55
+ }
56
+
57
+ .selected {
58
+ fill: #4CAF50 !important;
59
+ }
60
+
61
+ h2 {
62
+ margin-bottom: 20px;
63
+ color: #333;
64
+ }
65
+
66
+ .tooltip {
67
+ position: absolute;
68
+ background: rgba(0,0,0,0.8);
69
+ color: white;
70
+ padding: 5px 10px;
71
+ border-radius: 4px;
72
+ font-size: 12px;
73
+ pointer-events: none;
74
+ }
75
+ </style>
76
+ </head>
77
+ <body>
78
+ <div class="container">
79
+ <div class="map-container">
80
+ <h2>World Map</h2>
81
+ <div id="map"></div>
82
+ </div>
83
+ <div class="chart-container">
84
+ <h2>Country Statistics</h2>
85
+ <canvas id="statsChart"></canvas>
86
+ </div>
87
+ </div>
88
+
89
+ <script>
90
+ // Mock data for country statistics
91
+ const countryStats = {
92
+ 'United States': { gdp: 21400, population: 331000000 },
93
+ 'China': { gdp: 14700, population: 1402000000 },
94
+ 'Japan': { gdp: 5100, population: 125360000 },
95
+ 'Germany': { gdp: 3800, population: 83200000 },
96
+ 'United Kingdom': { gdp: 2700, population: 67220000 }
97
+ };
98
+
99
+ // Set up the map
100
+ const width = 800;
101
+ const height = 500;
102
+
103
+ const svg = d3.select('#map')
104
+ .append('svg')
105
+ .attr('width', width)
106
+ .attr('height', height);
107
+
108
+ const projection = d3.geoMercator()
109
+ .scale(130)
110
+ .translate([width / 2, height / 1.5]);
111
+
112
+ const path = d3.geoPath()
113
+ .projection(projection);
114
+
115
+ const tooltip = d3.select('body')
116
+ .append('div')
117
+ .attr('class', 'tooltip')
118
+ .style('opacity', 0);
119
+
120
+ // Load world map data
121
+ d3.json('https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json')
122
+ .then(data => {
123
+ const countries = topojson.feature(data, data.objects.countries);
124
+
125
+ svg.selectAll('path')
126
+ .data(countries.features)
127
+ .enter()
128
+ .append('path')
129
+ .attr('class', 'country')
130
+ .attr('d', path)
131
+ .on('mouseover', function(event, d) {
132
+ tooltip.transition()
133
+ .duration(200)
134
+ .style('opacity', .9);
135
+ tooltip.html(d.properties.name)
136
+ .style('left', (event.pageX + 5) + 'px')
137
+ .style('top', (event.pageY - 28) + 'px');
138
+ })
139
+ .on('mouseout', function() {
140
+ tooltip.transition()
141
+ .duration(500)
142
+ .style('opacity', 0);
143
+ })
144
+ .on('click', function(event, d) {
145
+ updateChart(d.properties.name);
146
+ d3.selectAll('.country').classed('selected', false);
147
+ d3.select(this).classed('selected', true);
148
+ });
149
+ });
150
+
151
+ // Initialize Chart.js
152
+ let statsChart;
153
+
154
+ function initChart() {
155
+ const ctx = document.getElementById('statsChart').getContext('2d');
156
+ statsChart = new Chart(ctx, {
157
+ type: 'bar',
158
+ data: {
159
+ labels: ['GDP (Billion $)', 'Population (Million)'],
160
+ datasets: [{
161
+ label: 'Country Statistics',
162
+ data: [0, 0],
163
+ backgroundColor: [
164
+ 'rgba(75, 192, 192, 0.6)',
165
+ 'rgba(153, 102, 255, 0.6)'
166
+ ],
167
+ borderColor: [
168
+ 'rgba(75, 192, 192, 1)',
169
+ 'rgba(153, 102, 255, 1)'
170
+ ],
171
+ borderWidth: 1
172
+ }]
173
+ },
174
+ options: {
175
+ responsive: true,
176
+ scales: {
177
+ y: {
178
+ beginAtZero: true
179
+ }
180
+ }
181
+ }
182
+ });
183
+ }
184
+
185
+ function updateChart(countryName) {
186
+ if (countryStats[countryName]) {
187
+ const stats = countryStats[countryName];
188
+ statsChart.data.datasets[0].data = [
189
+ stats.gdp,
190
+ stats.population / 1000000
191
+ ];
192
+ statsChart.data.datasets[0].label = countryName;
193
+ statsChart.update();
194
+ }
195
+ }
196
+
197
+ initChart();
198
+ </script>
199
+ </body>
200
+ </html>