Changed around line 1
+ document.addEventListener('DOMContentLoaded', async () => {
+ try {
+ const response = await fetch('https://raw.githubusercontent.com/datasets/geo-countries/master/data/countries.geojson');
+ const geoData = await response.json();
+
+ const svg = document.getElementById('world-map');
+ const projection = createProjection();
+ const path = createPathGenerator(projection);
+
+ renderMap(geoData, svg, path);
+ setupInteractions();
+ } catch (error) {
+ console.error('Error loading map data:', error);
+ }
+ });
+
+ function createProjection() {
+ return d3.geoMercator()
+ .scale(150)
+ .translate([500, 300]);
+ }
+
+ function createPathGenerator(projection) {
+ return d3.geoPath().projection(projection);
+ }
+
+ function renderMap(geoData, svg, path) {
+ geoData.features.forEach(feature => {
+ const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+ path.setAttribute('d', path(feature));
+ path.setAttribute('class', 'country');
+ path.setAttribute('data-name', feature.properties.name);
+ path.style.fill = getCountryColor(feature.properties.name);
+ svg.appendChild(path);
+ });
+ }
+
+ function getCountryColor(countryName) {
+ // Simplified demo data - in real application, this would come from an API
+ const mockData = {
+ 'Niger': 6.8,
+ 'United States': 1.7,
+ 'Japan': 1.3,
+ // ... more countries
+ };
+
+ const rate = mockData[countryName] || 2.5;
+
+ if (rate >= 6.0) return 'var(--high-rate)';
+ if (rate >= 4.0) return 'var(--medium-high-rate)';
+ if (rate >= 2.5) return 'var(--medium-rate)';
+ if (rate >= 1.5) return 'var(--medium-low-rate)';
+ return 'var(--low-rate)';
+ }
+
+ function setupInteractions() {
+ const countries = document.querySelectorAll('.country');
+ const countryDetails = document.getElementById('country-details');
+
+ countries.forEach(country => {
+ country.addEventListener('click', (e) => {
+ const countryName = e.target.dataset.name;
+ countryDetails.textContent = `${countryName}: ${getCountryFertilityRate(countryName)} births per woman`;
+ });
+ });
+ }
+
+ function getCountryFertilityRate(countryName) {
+ // Simplified demo data
+ return (Math.random() * 5 + 1).toFixed(1);
+ }
