🇧🇷 Mapa Interativo do Brasil com Informações de Estados

Explore o Brasil de uma forma dinâmica e informativa! Este projeto apresenta um mapa interativo do Brasil construído com HTML, CSS e a poderosa biblioteca D3.js para visualização de dados. Ao interagir com os estados, informações relevantes, como o nome e a bandeira, são exibidas de forma elegante.

✨ Destaques

• Visualização Atraente: Mapa do Brasil renderizado com design moderno e cores agradáveis.
• Interatividade Intuitiva: Clique nos estados para revelar informações instantâneas.
• Informações Relevantes: Exibe o nome do estado e sua respectiva bandeira.
• Responsivo: O mapa se adapta a diferentes tamanhos de tela, proporcionando uma ótima experiência em desktops e dispositivos móveis.
• Tecnologias Modernas: Utiliza HTML5, CSS3 e JavaScript com a biblioteca D3.js para uma experiência rica e fluida.
• Fácil de Integrar: Código bem estruturado e comentado, facilitando a compreensão e a integração em outros projetos.
• Dados Abertos: Utiliza dados geográficos em formato GeoJSON de uma fonte confiável.
• Efeito de Hover: Destaque visual dos estados ao passar o mouse.
• Carregamento Suave: Mensagem de carregamento enquanto os dados do mapa são processados.
• Funcionalidade de Zoom e Arraste: Permite explorar o mapa com mais detalhes.

🚀 Como Executar

1. Clone o repositório:

   git clone https://github.com/carlospaivaneto/MapaBandeira.git

   (Substitua seu-usuario/seu-repositorio pelo link do seu repositório no GitHub)

2. Navegue até a pasta do projeto:

   cd MapaBandeira

3. Abra o arquivo index.html no seu navegador web.

Pronto! O mapa interativo do Brasil estará funcionando localmente no seu navegador.

🖼️ Screenshots

(Adicione aqui screenshots do seu projeto para dar um apelo visual ainda maior!)

🛠️ Tecnologias Utilizadas

• HTML: Estrutura da página web.
• CSS: Estilização e layout da interface, incluindo efeitos visuais e responsividade.
• JavaScript: Lógica interativa do mapa e manipulação dos dados.
• D3.js: Biblioteca JavaScript para visualização de dados dinâmicos e interativos.
• TopoJSON: Formato de codificação de dados geoespaciais, utilizado através da biblioteca D3.js.
• Dados Geográficos: Obtidos de codeforamerica/click_that_hood.
• Ícones de Badge: Utilizados através do shields.io.

📂 Estrutura de Arquivos

seu-repositorio/ ├── index.html # Arquivo HTML principal ├── style.css # Arquivo CSS (opcional, estilos inline no HTML) ├── script.js # Arquivo JavaScript (opcional, scripts inline no HTML) ├── imagens/ # Pasta para imagens (screenshots, preview, etc.) │ ├── mapa_brasil_preview.gif │ ├── screenshot_mapa_geral.png │ └── screenshot_estado_info.png └── README.md # Este arquivo