Clickable SVG World Map with Charts

I need a single, self-contained SVG file that renders an entire world map, broken down not only by every country but also by their first-level sub-regions (states, provinces, territories, etc.). Each geographic shape must be individually clickable. When a visitor clicks any region, a small, unobtrusive panel or tooltip should open inside the SVG and present a chart or graph that draws its data from an external JSON (or embedded data block if you prefer). No plain text pop-ups—visualizations only.

Smooth transitions, clear hover highlighting, and crisp vector paths are essential because the artwork will be scaled frequently. I am comfortable embedding the final SVG in a standard HTML page, so please keep external dependencies minimal. Lightweight vanilla JavaScript is fine, but D3.js or similar libraries are welcome if they simplify the chart generation and keep the bundle size reasonable.

Deliverables:
• One optimized, minified SVG containing every shape with unique IDs for countries and their sub-regions
• JavaScript (or embedded script) that handles click events and renders a responsive chart for the selected region
• A sample JSON file with mock data for at least three regions so I can see the chart structure in action

Acceptance criteria: load the SVG in a blank HTML page, click any region, and a chart appears immediately without console errors.