Recruitment Maps Demo

A front-end demo for exploring fake job demand, hiring difficulty, source routes, hubs, and regional market pressure through sixteen interactive map experiences.

This project uses local sample data only. It does not use paid APIs, backend services, real client data, real candidate data, or real company data.

What is included

• Sixteen map experiences:
  • Immersive canvas globe with animated routes and selectable job-location markers.
  • SVG heat/risk map with demand, supply, and difficulty views.
  • Atlas-style hub network map with zoom, pan, hub markers, and connected markets.
  • Canvas command/radar map with animated candidate flow routes.
  • Clustered job bubble map for regional role-volume scanning.
  • Local-data choropleth demand map.
  • Hexbin talent density map.
  • Talent flow Sankey map.
  • Time-lapse market change map.
  • Market comparison map.
  • Risk command map.
  • Hub-and-spoke network map.
  • Role category small-multiple maps.
  • Salary competitiveness map.
  • Remote hiring coverage map.
  • Funnel conversion route map.
• Shared filters for search, category, seniority, work mode, difficulty, urgency, status, hub type, and minimum salary.
• Summary cards that update from the current filters.
• Right-side insight panel for selected locations, routes, hubs, and regional demand records.
• Keyboard-accessible data table for visible job locations.
• Timeline slider with play/pause.
• Pause and reduced-motion controls.
• JSON report export for the current view.
• Local fake job data:
  • 30 job locations.
  • 20+ countries.
  • 8 job categories.
  • 70 fake job records.
  • 25 source-to-hiring flow routes.
  • 15 regional demand/risk records.
  • 14 hub records.
  • 4 timeline periods.

Folder structure

impressive-recruitment-maps/
├── index.html
├── app.js
├── styles.css
├── shared/
│   ├── data.js
│   ├── experience-ui.js
│   └── map-utils.js
├── globe-three/
│   └── app.js
├── d3-vector-map/
│   └── app.js
├── maplibre-style/
│   └── app.js
├── canvas-command-map/
│   └── app.js
└── advanced-map-options/
    └── app.js

How to run

Because the project uses ES modules, open it through a local server rather than double-clicking index.html.

python3 -m http.server 5173

Then open:

http://localhost:5173

Checks

npm run check

The check script validates JavaScript syntax for the app, shared modules, and all map experience modules.

Important limitations

• This is a visual and interaction demo, not a production map application.
• The geography is illustrative and uses simplified projected positions, not real vector tiles or verified boundaries.
• The added advanced map options are local-data concept views; they are useful for comparing interaction patterns, not verified GIS implementations.
• Canvas map content has accessibility limitations; the HTML filters, insight panel, and data table provide the accessible alternative.
• The report export contains sample data only and should not be used for real hiring decisions.