Spaces:
Sleeping
Sleeping
| import gradio as gr | |
| import json | |
| import random | |
| # Sample country data with random progress percentages | |
| COUNTRY_DATA = { | |
| "MX": {"name": "Mexico", "percent": random.randint(10, 90)}, | |
| "AR": {"name": "Argentina", "percent": random.randint(10, 90)}, | |
| "CO": {"name": "Colombia", "percent": random.randint(10, 90)}, | |
| "CL": {"name": "Chile", "percent": random.randint(10, 90)}, | |
| "PE": {"name": "Peru", "percent": random.randint(10, 90)}, | |
| "ES": {"name": "Spain", "percent": random.randint(10, 90)}, | |
| "BR": {"name": "Brazil", "percent": random.randint(10, 90)}, | |
| "VE": {"name": "Venezuela", "percent": random.randint(10, 90)}, | |
| "EC": {"name": "Ecuador", "percent": random.randint(10, 90)}, | |
| "BO": {"name": "Bolivia", "percent": random.randint(10, 90)}, | |
| "PY": {"name": "Paraguay", "percent": random.randint(10, 90)}, | |
| "UY": {"name": "Uruguay", "percent": random.randint(10, 90)}, | |
| "CR": {"name": "Costa Rica", "percent": random.randint(10, 90)}, | |
| "PA": {"name": "Panama", "percent": random.randint(10, 90)} | |
| } | |
| # Create the basic HTML container for the map | |
| def create_map_container(): | |
| return """ | |
| <div id="map-container" style="width:100%; height:600px; position:relative; background-color:#111;"> | |
| <div style="display:flex; justify-content:center; align-items:center; height:100%; color:white; font-family:sans-serif;"> | |
| Loading map visualization... | |
| </div> | |
| </div> | |
| <div id="tooltip" style="position:absolute; background-color:rgba(0,0,0,0.8); border-radius:5px; padding:8px; color:white; font-size:12px; pointer-events:none; opacity:0; transition:opacity 0.3s;"></div> | |
| """ | |
| # Create a script tag with the D3 code | |
| def create_map_script(): | |
| # Convert country data to JSON for JavaScript | |
| country_data_json = json.dumps(COUNTRY_DATA) | |
| return f""" | |
| <script> | |
| // Function to load D3.js and create the map | |
| async function createMap() {{ | |
| // Load D3.js dynamically | |
| await new Promise((resolve) => {{ | |
| const script = document.createElement('script'); | |
| script.src = 'https://d3js.org/d3.v7.min.js'; | |
| script.onload = resolve; | |
| document.head.appendChild(script); | |
| }}); | |
| console.log('D3 loaded successfully'); | |
| // Country data from Python | |
| const countryData = {country_data_json}; | |
| // Get container dimensions | |
| const container = document.getElementById('map-container'); | |
| const width = container.clientWidth; | |
| const height = container.clientHeight; | |
| // Clear loading message | |
| container.innerHTML = ''; | |
| // Create SVG | |
| const svg = d3.select('#map-container') | |
| .append('svg') | |
| .attr('width', width) | |
| .attr('height', height) | |
| .attr('viewBox', `0 0 ${{width}} ${{height}}`); | |
| // Create color scale | |
| const colorScale = d3.scaleLinear() | |
| .domain([0, 100]) | |
| .range(['#4a1942', '#f32b7b']); | |
| // Set up projection focused on Latin America | |
| const projection = d3.geoMercator() | |
| .center([-60, 0]) | |
| .scale(width / 5) | |
| .translate([width / 2, height / 2]); | |
| const path = d3.geoPath().projection(projection); | |
| // Tooltip setup | |
| const tooltip = d3.select('#tooltip'); | |
| // Load GeoJSON data | |
| try {{ | |
| const response = await fetch('https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson'); | |
| const data = await response.json(); | |
| // Draw countries | |
| svg.selectAll('path') | |
| .data(data.features) | |
| .enter() | |
| .append('path') | |
| .attr('d', path) | |
| .attr('stroke', '#f32b7b') | |
| .attr('stroke-width', 1) | |
| .attr('fill', d => {{ | |
| // Get the ISO code from the properties | |
| const iso = d.properties.iso_a2; | |
| if (countryData[iso]) {{ | |
| return colorScale(countryData[iso].percent); | |
| }} | |
| return '#2d3748'; // Default gray for other countries | |
| }}) | |
| .on('mouseover', function(event, d) {{ | |
| const iso = d.properties.iso_a2; | |
| d3.select(this) | |
| .attr('stroke', '#4a1942') | |
| .attr('stroke-width', 2); | |
| if (countryData[iso]) {{ | |
| tooltip.style('opacity', 1) | |
| .style('left', (event.pageX + 15) + 'px') | |
| .style('top', (event.pageY + 15) + 'px') | |
| .html(` | |
| <strong>${{countryData[iso].name}}</strong><br/> | |
| Progress: ${{countryData[iso].percent}}% | |
| `); | |
| }} | |
| }}) | |
| .on('mousemove', function(event) {{ | |
| tooltip.style('left', (event.pageX + 15) + 'px') | |
| .style('top', (event.pageY + 15) + 'px'); | |
| }}) | |
| .on('mouseout', function() {{ | |
| d3.select(this) | |
| .attr('stroke', '#f32b7b') | |
| .attr('stroke-width', 1); | |
| tooltip.style('opacity', 0); | |
| }}); | |
| // Add a legend | |
| const legendWidth = Math.min(width - 40, 200); | |
| const legendHeight = 15; | |
| const legendX = width - legendWidth - 20; | |
| const legend = svg.append('g') | |
| .attr('transform', `translate(${{legendX}}, 30)`); | |
| // Create gradient for legend | |
| const defs = svg.append('defs'); | |
| const gradient = defs.append('linearGradient') | |
| .attr('id', 'dataGradient') | |
| .attr('x1', '0%') | |
| .attr('y1', '0%') | |
| .attr('x2', '100%') | |
| .attr('y2', '0%'); | |
| gradient.append('stop') | |
| .attr('offset', '0%') | |
| .attr('stop-color', '#4a1942'); | |
| gradient.append('stop') | |
| .attr('offset', '100%') | |
| .attr('stop-color', '#f32b7b'); | |
| // Add legend title | |
| legend.append('text') | |
| .attr('x', legendWidth / 2) | |
| .attr('y', -10) | |
| .attr('text-anchor', 'middle') | |
| .attr('font-size', '12px') | |
| .attr('fill', '#f1f5f9') | |
| .text('Progress'); | |
| // Add legend rectangle | |
| legend.append('rect') | |
| .attr('width', legendWidth) | |
| .attr('height', legendHeight) | |
| .attr('rx', 2) | |
| .attr('ry', 2) | |
| .style('fill', 'url(#dataGradient)'); | |
| // Add legend labels | |
| legend.append('text') | |
| .attr('x', 0) | |
| .attr('y', legendHeight + 15) | |
| .attr('text-anchor', 'start') | |
| .attr('font-size', '10px') | |
| .attr('fill', '#94a3b8') | |
| .text('0%'); | |
| legend.append('text') | |
| .attr('x', legendWidth / 2) | |
| .attr('y', legendHeight + 15) | |
| .attr('text-anchor', 'middle') | |
| .attr('font-size', '10px') | |
| .attr('fill', '#94a3b8') | |
| .text('50%'); | |
| legend.append('text') | |
| .attr('x', legendWidth) | |
| .attr('y', legendHeight + 15) | |
| .attr('text-anchor', 'end') | |
| .attr('font-size', '10px') | |
| .attr('fill', '#94a3b8') | |
| .text('100%'); | |
| // Handle window resize | |
| window.addEventListener('resize', () => {{ | |
| const width = container.clientWidth; | |
| // Update SVG dimensions | |
| svg.attr('width', width) | |
| .attr('viewBox', `0 0 ${{width}} ${{height}}`); | |
| // Update projection | |
| projection.scale(width / 5) | |
| .translate([width / 2, height / 2]); | |
| // Update paths | |
| svg.selectAll('path').attr('d', path); | |
| // Update legend position | |
| const legendWidth = Math.min(width - 40, 200); | |
| const legendX = width - legendWidth - 20; | |
| legend.attr('transform', `translate(${{legendX}}, 30)`); | |
| }}); | |
| }} catch (error) {{ | |
| console.error('Error loading or rendering the map:', error); | |
| container.innerHTML = `<div style="color: white; text-align: center;">Error loading map: ${{error.message}}</div>`; | |
| }} | |
| }} | |
| // Call the function when the DOM is ready | |
| document.addEventListener('DOMContentLoaded', createMap); | |
| </script> | |
| """ | |
| # Create a simple Gradio interface | |
| with gr.Blocks(theme=gr.themes.Soft(primary_hue="pink", secondary_hue="purple")) as demo: | |
| gr.Markdown("# Latin America & Spain Map") | |
| # Create a container for the map | |
| map_container = gr.HTML(create_map_container()) | |
| # Create a container for the script | |
| script_container = gr.HTML(create_map_script(), visible=False) | |
| # Button to generate new random data | |
| def update_data(): | |
| # Declare the variable as global first | |
| global COUNTRY_DATA | |
| # Create new random percentages | |
| new_data = { | |
| code: {"name": data["name"], "percent": random.randint(10, 90)} | |
| for code, data in COUNTRY_DATA.items() | |
| } | |
| # Update the global variable | |
| COUNTRY_DATA = new_data | |
| # Return the updated script | |
| return create_map_script() | |
| gr.Button("Generate New Random Data").click(fn=update_data, outputs=script_container) | |
| if __name__ == "__main__": | |
| demo.launch() |