DataVisualization/index.html at main · Grando476/DataVisualization · GitHub

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
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Job Market Analytics - Main Dashboard</title>
    <meta name="description"
        content="Comprehensive job market analytics dashboard with interactive skill visualizations and salary insights">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="styles.css?v=2.0">
    <script src="https://d3js.org/d3.v4.min.js"></script>
</head>

<body>
    <!-- Navigation Links -->
    <div class="top-nav-links">
        <a href="index.html" class="nav-link active">Main</a>
        <a href="data-processing.html" class="nav-link">Data Processing</a>
        <a href="team.html" class="nav-link">Team</a>
    </div>

    <!-- Main Content -->
    <main class="main-content">
        <div class="container">
            <header class="page-header">
                <h2>Market Overview</h2>
                <p class="subtitle">Explore the skill relationship network and market trends</p>
            </header>

            <div class="intro-section">
                <p class="intro-text">
                    The job market is a complex web of interconnected skills and technologies.
                    Understanding which skills complement each other and how they co-occur in real job postings
                    is crucial for making informed career decisions. This platform analyzes thousands of job offers
                    to reveal the patterns and relationships between technical skills, helping you identify
                    which skills to learn next based on actual market demand and skill synergies.
                </p>
            </div>

            <!-- Hero: Edge Bundling Graph (Main Graph) -->
            <div class="hero-graph">
                <div class="hero-graph-header">
                    <h3>Skill Relationships Network</h3>
                    <p class="hero-graph-description">Click on any skill to explore detailed analytics • Hover to see
                        connections</p>
                </div>
                <div class="hero-graph-container" id="edgeBundlingChart">
                    <div class="chart-placeholder edge-bundling-container">
                        <p style="text-align: center; color: #666; padding-top: 350px;">Loading network...</p>
                    </div>
                </div>
            </div>

            <!-- Market Statistics Section Divider -->
            <div class="section-divider">
                <h4 class="section-divider-title">Market-Wide Statistics</h4>
                <p class="section-divider-text">Explore comprehensive analytics across the entire job market</p>
            </div>

            <!-- Two Charts Below -->
            <section class="chart-section">
                <div class="chart-header">
                    <h3>Experience vs Salary</h3>
                    <p class="chart-description">Salary distribution across experience levels </p>
                </div>
                <div class="chart-container medium-chart" id="levelSalaryChart">
                    <div class="chart-placeholder">
                        <div class="bar-chart-placeholder">
                            <p style="color: #666; font-style: italic; align-self: center;">Loading chart data...</p>
                        </div>
                    </div>
                </div>
            </section>
            <div class="insight-card">
                <div class="insight-header">
                    <span class="insight-icon">📈</span>
                    <h3>Career Value Trajectory</h3>
                </div>
                <div class="insight-content">
                    <p>
                        Salary progression in IT is not linear; it is <strong>exponential</strong>.
                        While moving from Junior to Senior the pay rates are rising steady, with predictable returns,
                        the data exposes a massive
                        <span class="highlight-text">Leadership Multiplier</span> at the Lead level.
                        The enormous valuation spike suggests that the market pays a premium not just for writing better
                        code,
                        but for the <strong>leverage</strong> of managing teams and architecture.
                        Strategy and force-multiplication are clearly valued far above individual contribution.
                    </p>
                </div>
            </div>
            <!-- Category Breakout Chart -->
            <section class="chart-section">
                <div class="chart-header">
                    <h3>Category Breakout</h3>
                    <p class="chart-description">Market share by job category </p>
                </div>
                <div class="chart-container medium-chart" id="categoryChart">
                    <div class="chart-placeholder" style="height: 600px; position: relative;">
                        <p style="text-align: center; color: #666; margin-top: 250px;">Loading treemap...</p>
                    </div>
                </div>
            </section>
            <div class="insight-card">
                <div class="insight-header">
                    <span class="insight-icon">🏗️</span>
                    <h3>Infrastructure vs. Intelligence</h3>
                </div>
                <div class="insight-content">
                    <p>
                    The market segmentation reveals a duality in modern tech.
                                While <strong>Java</strong> and <strong>.NET</strong> remain the immovable bedrock of enterprise infrastructure (accounting for the largest volume of work offers),
                                the combined weight of the <span class="highlight-text">Data + AI + Analytics</span> sector is now rivaling traditional web development.
                                This suggests the industry is changing from purely <em>building</em> applications to <strong>optimizing</strong> them.
                                Development builds the pipes, Data flows through them.
                                <b>For aspiring engineers </b>, this signals a critical point: generalist skills are becoming less atractive, while specialized mastery in either pipeline construction or data interpretation is leading the way.
                                The market no longer rewards just <b>"knowing code" </b>. Now it rewards the specific ability to scale systems or extract intelligence from them.
                    </p>
                </div>
            </div>
            <section class="chart-section" style="margin-top: 2rem;">
                <div class="chart-header">
                    <h3>Skill Value Analysis (Overview)</h3>
                    <p class="chart-description">Full market view</p>
                </div>
                <div class="chart-container big-chart" id="skillCorrelationChart">
                    <div class="chart-placeholder" style="position: relative; min-height: 400px;">
                        <p style="text-align: center; color: #666; padding-top: 180px;">Loading overview...</p>
                    </div>
                </div>
            </section>
            <div class="insight-card">
                <div class="insight-header">
                    <span class="insight-icon">💡</span>
                    <h3>Key Market Observations</h3>
                </div>
                <div class="insight-content">
                    <p>
                        The data reveals a distinct <strong>"Gravity Well"</strong> in the tech sector.
                        Contrary to the expectation of a linear progression, the market does not hire for potential
                        alone:
                        <span class="highlight-text">there is virtually zero demand for skills below Level 2</span>.
                        Instead, offers cluster heavily in the <strong>Mid-Senior tier (Levels 3.0–3.8)</strong>,
                        suggesting
                        companies prioritize hands-on knowledge and experience over novice training or theoretical
                        mastery.
                        Interestingly, the highest salaries often peak not at Level 5, but within this "High-Mid" sweet
                        spot,
                        where specialized practical application meets high demand.
                    </p>
                </div>
            </div>
            <section class="chart-section" style="margin-top: 2rem;">
                <div class="chart-header">
                    <h3>Deep Dive: Mid/Senior Sweet Spot</h3>
                    <p class="chart-description">Zoomed view: most dense level</p>
                </div>
                <div class="chart-container big-chart" id="skillCorrelationChartZoom">
                    <div class="chart-placeholder" style="position: relative; min-height: 400px;">
                        <p style="text-align: center; color: #666; padding-top: 180px;">Loading zoom...</p>
                    </div>
                </div>
            </section>


        </div>
    </main>
    <footer>
        <div class="footer-content">
            <div class="footer-logos">
                <img src="img/scudo.png" alt="University of Genoa Shield" class="footer-logo">
                <img src="img/nameUGe.png" alt="University of Genoa Logo" class="footer-logo">
            </div>

            <div class="footer-text">
                <p>Data Visualization Course Project - University of Genoa</p>
                <p>Academic Year 2025/2026 - Instructor: Prof. Annalisa Barla</p>
            </div>
        </div>
    </footer>
    <script src="jaccardData.js"></script>
    <script src="edgeBundlingProcessor.js"></script>
    <script src="script.js"></script>
    <script src="main.js"></script>
</body>

</html>