Hugging Face's logo

Spaces:
IRUNHO
/
example-of-data-visualisation
Running

App Files Community
IRUNHO commited on
Commit
1476660
·
verified ·
1 Parent(s): 3084807

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +338 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Example Of Data Visualisation
3
- emoji: 📉
4
  colorFrom: yellow
5
- colorTo: green
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: example-of-data-visualisation
3
+ emoji: 🐳
4
  colorFrom: yellow
5
+ colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,338 @@
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>Service Groupings Analysis</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
+ <style>
11
+ .fade-in {
12
+ animation: fadeIn 0.5s ease-in;
13
+ }
14
+ @keyframes fadeIn {
15
+ from { opacity: 0; }
16
+ to { opacity: 1; }
17
+ }
18
+ .chart-container {
19
+ transition: all 0.3s ease;
20
+ }
21
+ .chart-container:hover {
22
+ transform: translateY(-5px);
23
+ box-shadow: 0 10px 20px rgba(0,0,0,0.1);
24
+ }
25
+ .highlight-box {
26
+ border-left: 4px solid #3B82F6;
27
+ background-color: #F8FAFC;
28
+ }
29
+ .service-card {
30
+ transition: all 0.3s ease;
31
+ }
32
+ .service-card:hover {
33
+ transform: translateY(-3px);
34
+ box-shadow: 0 4px 6px rgba(0,0,0,0.1);
35
+ }
36
+ </style>
37
+ </head>
38
+ <body class="bg-gray-50">
39
+ <div class="container mx-auto px-4 py-8 max-w-7xl">
40
+ <div class="text-center mb-12 fade-in">
41
+ <h1 class="text-3xl md:text-4xl font-bold text-gray-800 mb-3">Service Offerings Analysis</h1>
42
+ <p class="text-lg text-gray-600 max-w-3xl mx-auto">Understanding how accounting practices serve clients across different business sizes</p>
43
+ </div>
44
+
45
+ <!-- Key Insights Section -->
46
+ <div class="bg-white rounded-xl shadow-md p-6 mb-8 highlight-box fade-in">
47
+ <h2 class="text-2xl font-semibold text-gray-800 mb-4 flex items-center">
48
+ <i class="fas fa-lightbulb text-blue-500 mr-3"></i> Key Insights
49
+ </h2>
50
+ <div class="grid md:grid-cols-2 gap-6">
51
+ <div>
52
+ <p class="text-gray-700 mb-4"><span class="font-medium">Tax Planning</span> emerges as the most commonly offered service overall (53%), with particularly strong adoption among Medium-sized businesses (62%).</p>
53
+ <p class="text-gray-700 mb-4"><span class="font-medium">SP firms</span> (Sole Practitioners) show distinctive patterns, leading in Business Advisory (56%), External Reporting (51%), and Software/App Advisory (45%) - significantly higher than other segments.</p>
54
+ </div>
55
+ <div>
56
+ <p class="text-gray-700 mb-4"><span class="font-medium">Large businesses</span> demand more reporting services, with 48% using Internal Reporting and 40% using External Reporting - the highest among all segments.</p>
57
+ <p class="text-gray-700"><span class="font-medium">Planning & Budgeting</span> sees higher adoption among Large businesses (53%) compared to Medium (43%) and Small (37%), suggesting more complex financial needs as companies grow.</p>
58
+ </div>
59
+ </div>
60
+ </div>
61
+
62
+ <!-- Chart Visualization -->
63
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-12">
64
+ <div class="chart-container bg-white p-6 rounded-xl shadow-md fade-in">
65
+ <h3 class="text-xl font-semibold text-gray-800 mb-6 text-center">Service Adoption by Business Size</h3>
66
+ <canvas id="serviceChart" height="400"></canvas>
67
+ </div>
68
+ <div class="chart-container bg-white p-6 rounded-xl shadow-md fade-in">
69
+ <h3 class="text-xl font-semibold text-gray-800 mb-6 text-center">Top Services by Client Segment</h3>
70
+ <canvas id="segmentChart" height="400"></canvas>
71
+ </div>
72
+ </div>
73
+
74
+ <!-- Detailed Analysis -->
75
+ <div class="mb-12 fade-in">
76
+ <h2 class="text-2xl font-semibold text-gray-800 mb-6 flex items-center">
77
+ <i class="fas fa-chart-line text-blue-500 mr-3"></i> Detailed Analysis
78
+ </h2>
79
+
80
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
81
+ <!-- Tax Planning -->
82
+ <div class="service-card bg-white p-5 rounded-lg shadow hover:shadow-lg">
83
+ <div class="flex items-center mb-3">
84
+ <div class="w-3 h-3 bg-blue-500 rounded-full mr-2"></div>
85
+ <h3 class="font-semibold text-lg">Tax Planning</h3>
86
+ </div>
87
+ <p class="text-gray-600 text-sm mb-2">Overall: <span class="font-medium">53%</span></p>
88
+ <div class="text-xs space-y-1">
89
+ <div class="flex justify-between">
90
+ <span>SP Firms:</span>
91
+ <span class="font-medium">45%</span>
92
+ </div>
93
+ <div class="flex justify-between">
94
+ <span>Small:</span>
95
+ <span class="font-medium">55%</span>
96
+ </div>
97
+ <div class="flex justify-between">
98
+ <span>Medium:</span>
99
+ <span class="font-medium">62%</span>
100
+ </div>
101
+ <div class="flex justify-between">
102
+ <span>Large:</span>
103
+ <span class="font-medium">50%</span>
104
+ </div>
105
+ </div>
106
+ <p class="text-gray-700 text-sm mt-3">Peaks with medium-sized businesses, suggesting optimal complexity for tax planning services.</p>
107
+ </div>
108
+
109
+ <!-- Business Advisory -->
110
+ <div class="service-card bg-white p-5 rounded-lg shadow hover:shadow-lg">
111
+ <div class="flex items-center mb-3">
112
+ <div class="w-3 h-3 bg-green-500 rounded-full mr-2"></div>
113
+ <h3 class="font-semibold text-lg">Business Advisory</h3>
114
+ </div>
115
+ <p class="text-gray-600 text-sm mb-2">Overall: <span class="font-medium">46%</span></p>
116
+ <div class="text-xs space-y-1">
117
+ <div class="flex justify-between">
118
+ <span>SP Firms:</span>
119
+ <span class="font-medium">56%</span>
120
+ </div>
121
+ <div class="flex justify-between">
122
+ <span>Small:</span>
123
+ <span class="font-medium">46%</span>
124
+ </div>
125
+ <div class="flex justify-between">
126
+ <span>Medium:</span>
127
+ <span class="font-medium">37%</span>
128
+ </div>
129
+ <div class="flex justify-between">
130
+ <span>Large:</span>
131
+ <span class="font-medium">44%</span>
132
+ </div>
133
+ </div>
134
+ <p class="text-gray-700 text-sm mt-3">SP firms lead significantly, possibly due to their personalized service approach.</p>
135
+ </div>
136
+
137
+ <!-- Reporting Services -->
138
+ <div class="service-card bg-white p-5 rounded-lg shadow hover:shadow-lg">
139
+ <div class="flex items-center mb-3">
140
+ <div class="w-3 h-3 bg-purple-500 rounded-full mr-2"></div>
141
+ <h3 class="font-semibold text-lg">Reporting Services</h3>
142
+ </div>
143
+ <p class="text-gray-600 text-sm mb-2">Overall: <span class="font-medium">35% avg</span></p>
144
+ <div class="text-xs space-y-1">
145
+ <div class="flex justify-between">
146
+ <span>Internal (Large):</span>
147
+ <span class="font-medium">48%</span>
148
+ </div>
149
+ <div class="flex justify-between">
150
+ <span>External (SP):</span>
151
+ <span class="font-medium">51%</span>
152
+ </div>
153
+ </div>
154
+ <p class="text-gray-700 text-sm mt-3">Large businesses need more internal reporting, while SP firms excel in external reporting.</p>
155
+ </div>
156
+ </div>
157
+ </div>
158
+
159
+ <!-- Recommendations -->
160
+ <div class="bg-blue-50 rounded-xl p-6 fade-in">
161
+ <h2 class="text-2xl font-semibold text-gray-800 mb-4 flex items-center">
162
+ <i class="fas fa-bullseye text-blue-500 mr-3"></i> Strategic Recommendations
163
+ </h2>
164
+ <div class="grid md:grid-cols-2 gap-6">
165
+ <div>
166
+ <div class="flex items-start mb-4">
167
+ <div class="bg-blue-100 p-2 rounded-full mr-3">
168
+ <i class="fas fa-chess-queen text-blue-600"></i>
169
+ </div>
170
+ <div>
171
+ <h4 class="font-medium text-gray-800">For SP Firms</h4>
172
+ <p class="text-gray-700 text-sm">Leverage your strength in Business Advisory and External Reporting to differentiate from larger firms. Consider bundling these services for small business clients.</p>
173
+ </div>
174
+ </div>
175
+ <div class="flex items-start">
176
+ <div class="bg-blue-100 p-2 rounded-full mr-3">
177
+ <i class="fas fa-building text-blue-600"></i>
178
+ </div>
179
+ <div>
180
+ <h4 class="font-medium text-gray-800">For Medium/Large Firms</h4>
181
+ <p class="text-gray-700 text-sm">Develop specialized tax planning offerings for medium businesses and enhanced reporting packages for large clients to meet their distinct needs.</p>
182
+ </div>
183
+ </div>
184
+ </div>
185
+ <div>
186
+ <div class="flex items-start mb-4">
187
+ <div class="bg-blue-100 p-2 rounded-full mr-3">
188
+ <i class="fas fa-chart-pie text-blue-600"></i>
189
+ </div>
190
+ <div>
191
+ <h4 class="font-medium text-gray-800">Service Packaging</h4>
192
+ <p class="text-gray-700 text-sm">Consider creating tiered service packages that combine planning/budgeting with performance analysis, as these services show complementary adoption patterns.</p>
193
+ </div>
194
+ </div>
195
+ <div class="flex items-start">
196
+ <div class="bg-blue-100 p-2 rounded-full mr-3">
197
+ <i class="fas fa-laptop-code text-blue-600"></i>
198
+ </div>
199
+ <div>
200
+ <h4 class="font-medium text-gray-800">Tech Advisory</h4>
201
+ <p class="text-gray-700 text-sm">Despite lower overall adoption, SP firms show strong Software/App Advisory offerings - this could represent an underserved market opportunity.</p>
202
+ </div>
203
+ </div>
204
+ </div>
205
+ </div>
206
+ </div>
207
+ </div>
208
+
209
+ <script>
210
+ document.addEventListener('DOMContentLoaded', function() {
211
+ // Service Adoption Chart
212
+ const serviceCtx = document.getElementById('serviceChart').getContext('2d');
213
+ const serviceChart = new Chart(serviceCtx, {
214
+ type: 'bar',
215
+ data: {
216
+ labels: ['Tax Planning', 'Business Advisory', 'Planning & Budgeting', 'Performance Analysis', 'Internal Reporting', 'External Reporting', 'Software Advisory'],
217
+ datasets: [
218
+ {
219
+ label: 'Total',
220
+ data: [53, 46, 45, 38, 36, 34, 30],
221
+ backgroundColor: 'rgba(59, 130, 246, 0.7)',
222
+ borderColor: 'rgba(59, 130, 246, 1)',
223
+ borderWidth: 1
224
+ },
225
+ {
226
+ label: 'SP Firms',
227
+ data: [45, 56, 45, 45, 42, 51, 45],
228
+ backgroundColor: 'rgba(16, 185, 129, 0.7)',
229
+ borderColor: 'rgba(16, 185, 129, 1)',
230
+ borderWidth: 1
231
+ }
232
+ ]
233
+ },
234
+ options: {
235
+ responsive: true,
236
+ plugins: {
237
+ legend: {
238
+ position: 'top',
239
+ },
240
+ tooltip: {
241
+ callbacks: {
242
+ label: function(context) {
243
+ return context.dataset.label + ': ' + context.raw + '%';
244
+ }
245
+ }
246
+ }
247
+ },
248
+ scales: {
249
+ y: {
250
+ beginAtZero: true,
251
+ max: 70,
252
+ title: {
253
+ display: true,
254
+ text: 'Percentage of Firms Offering'
255
+ }
256
+ }
257
+ }
258
+ }
259
+ });
260
+
261
+ // Segment Chart
262
+ const segmentCtx = document.getElementById('segmentChart').getContext('2d');
263
+ const segmentChart = new Chart(segmentCtx, {
264
+ type: 'radar',
265
+ data: {
266
+ labels: ['Tax Planning', 'Business Advisory', 'Planning & Budgeting', 'Performance Analysis', 'Internal Reporting', 'External Reporting', 'Software Advisory'],
267
+ datasets: [
268
+ {
269
+ label: 'Small Businesses',
270
+ data: [55, 46, 37, 32, 28, 23, 26],
271
+ backgroundColor: 'rgba(255, 99, 132, 0.2)',
272
+ borderColor: 'rgba(255, 99, 132, 1)',
273
+ borderWidth: 2,
274
+ pointBackgroundColor: 'rgba(255, 99, 132, 1)'
275
+ },
276
+ {
277
+ label: 'Medium Businesses',
278
+ data: [62, 37, 43, 34, 28, 22, 25],
279
+ backgroundColor: 'rgba(54, 162, 235, 0.2)',
280
+ borderColor: 'rgba(54, 162, 235, 1)',
281
+ borderWidth: 2,
282
+ pointBackgroundColor: 'rgba(54, 162, 235, 1)'
283
+ },
284
+ {
285
+ label: 'Large Businesses',
286
+ data: [50, 44, 53, 40, 48, 40, 24],
287
+ backgroundColor: 'rgba(255, 206, 86, 0.2)',
288
+ borderColor: 'rgba(255, 206, 86, 1)',
289
+ borderWidth: 2,
290
+ pointBackgroundColor: 'rgba(255, 206, 86, 1)'
291
+ }
292
+ ]
293
+ },
294
+ options: {
295
+ responsive: true,
296
+ plugins: {
297
+ legend: {
298
+ position: 'top',
299
+ },
300
+ tooltip: {
301
+ callbacks: {
302
+ label: function(context) {
303
+ return context.dataset.label + ': ' + context.raw + '%';
304
+ }
305
+ }
306
+ }
307
+ },
308
+ scales: {
309
+ r: {
310
+ angleLines: {
311
+ display: true
312
+ },
313
+ suggestedMin: 0,
314
+ suggestedMax: 70
315
+ }
316
+ }
317
+ }
318
+ });
319
+
320
+ // Add fade-in effect to elements as they come into view
321
+ const fadeElements = document.querySelectorAll('.fade-in');
322
+
323
+ const fadeObserver = new IntersectionObserver((entries) => {
324
+ entries.forEach(entry => {
325
+ if (entry.isIntersecting) {
326
+ entry.target.style.opacity = 1;
327
+ }
328
+ });
329
+ }, { threshold: 0.1 });
330
+
331
+ fadeElements.forEach(element => {
332
+ element.style.opacity = 0;
333
+ fadeObserver.observe(element);
334
+ });
335
+ });
336
+ </script>
337
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=IRUNHO/example-of-data-visualisation" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
338
+ </html>
prompts.txt ADDED
File without changes