Painel ODS: Diagnóstico de Feira de    <script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>    is.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap" rel="stylesheet"> <!-- Chosen Palette: Bahian Earth --> <!-- Application Structure Plan: A dashboard-style SPA is designed for optimal usability. The structure starts with a high-level statistical overview (Contexto Geral) for immediate context. The core of the app is a tab-based navigation for the six key challenges, allowing users (mayors, investors) to directly access their area of interest without linear scrolling. Clicking a tab dynamically updates a central content area with a relevant chart and textual analysis (Crítico/Soluções). This task-oriented design is more efficient than a simple report conversion. The app concludes with the overarching "Síntese Estratégica", summarizing the vision. This flow guides the user from general data to specific problems and finally to the strategic solution. --> <!-- Visualization & Content Choices: - Pop. Growth: (Inform) -> Line Chart (Chart.js) -> Shows trend -> Justification: Visualizes the "crescimento acelerado" mentioned in the report. - Urbanismo: (Compare) -> Donut Chart (Chart.js) -> Highlights disordered growth -> Justification: Effectively shows the imbalance between planned/unplanned expansion. - Economia: (Compare) -> Bar Chart (Chart.js) -> Compares current vs. diversified economy -> Justification: Clearly illustrates the strategic shift from dependency to a resilient, mixed economy. - Educação: (Show Relationship) -> Bar Chart (funnel style) -> Visualizes brain drain -> Justification: A funnel is intuitive for showing drop-off from graduates to local high-skill jobs. - Desigualdades: (Compare) -> Radar Chart (Chart.js) -> Compares infrastructure in Center vs. Periphery -> Justification: Radar charts are excellent for comparing multiple metrics across two categories. - Cultura/Turismo: (Show Change) -> Line Chart (Chart.js) -> Shows seasonal vs. continuous revenue -> Justification: A time-series graph is ideal for illustrating seasonality and the goal of a stable revenue stream. - Mobilidade: (Compare) -> Stacked Bar Chart (Chart.js) -> Compares current vs. proposed transport modes -> Justification: Shows the intended shift in modal share towards sustainability. --> <!-- CONFIRMATION: NO SVG graphics used. NO Mermaid JS used. --> <style> body { font-family: 'Inter', sans-serif; background-color: #FDFBF8; color: #403A3A; } .nav-button { transition: all 0.3s ease; } .nav-button.active { background-color: #A57F60; color: #FFFFFF; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.1); } .chart-container { position: relative; width: 100%; max-width: 600px; margin-left: auto; margin-right: auto; height: 320px; max-height: 400px; } @media (min-width: 768px) { .chart-container { height: 380px; } } .ods-icon { display: inline-block; width: 32px; height: 32px; line-height: 32px; text-align: center; font-weight: bold; color: white; border-radius: 4px; font-size: 14px; } </style> </head> <body class="antialiased"> <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-8 md:py-12"> <header class="text-center mb-10"> <h1 class="text-3xl md:text-4xl font-bold text-[#A57F60]">Painel ODS: Diagnóstico Estratégico</h1> <p class="text-lg md:text-xl text-gray-600 mt-2">Feira de Santana: Rumo a uma Metrópole Regional Inovadora</p> </header> <main> <section id="contexto" class="mb-12"> <h2 class="text-2xl font-bold text-center mb-6 text-[#7E6A5A]">Contexto Geral</h2> <p class="text-center max-w-3xl mx-auto mb-8 text-gray-700"> Feira de Santana, o maior município do interior do Nordeste e 69º do Brasil em PIB, apresenta um crescimento populacional dinâmico e um IDH considerado alto. Esta seção oferece uma visão geral dos principais indicadores que definem a cidade hoje, servindo como base para a análise dos desafios e oportunidades que se seguem. </p> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> <div class="bg-white p-6 rounded-lg shadow-md border border-gray-200"> <h3 class="text-lg font-semibold text-gray-500">População (2024)</h3> <p class="text-3xl font-bold text-[#A57F60]">657.948</p> <p class="text-sm text-green-600">+7% em 2 anos</p> </div> <div class="bg-white p-6 rounded-lg shadow-md border border-gray-200"> <h3 class="text-lg font-semibold text-gray-500">PIB (Posição Nacional)</h3> <p class="text-3xl font-bold text-[#A57F60]">69º</p> <p class="text-sm text-gray-500">Maior do interior do NE</p> </div> <div class="bg-white p-6 rounded-lg shadow-md border border-gray-200"> <h3 class="text-lg font-semibold text-gray-500">IDH</h3> <p class="text-3xl font-bold text-[#A57F60]">0,712</p> <p class="text-sm text-gray-500">Considerado Alto</p> </div> <div class="bg-white p-6 rounded-lg shadow-md border border-gray-200 md:col-span-2 lg:col-span-1"> <h3 class="text-lg font-semibold text-gray-500">Vocação Econômica</h3> <p class="text-sm text-gray-700 mt-2 leading-relaxed">Comércio, Indústria, Educação, Logística e Cultura formam a base da sua identidade econômica.</p> </div> </div> </section> <section id="desafios" class="mb-12"> <h2 class="text-2xl font-bold text-center mb-6 text-[#7E6A5A]">Pontos Críticos & Soluções</h2> <p class="text-center max-w-3xl mx-auto mb-8 text-gray-700"> Explore os seis principais desafios que Feira de Santana enfrenta em seu caminho para o desenvolvimento sustentável. Cada área está conectada aos Objetivos de Desenvolvimento Sustentável (ODS) e apresenta tanto os pontos críticos identificados quanto as soluções estratégicas propostas. Clique em um desafio para visualizar a análise detalhada e os dados correspondentes. </p> <div id="navigation" class="flex flex-wrap justify-center gap-3 md:gap-4 mb-8"> <button data-topic="urbanismo" class="nav-button bg-white shadow-sm border border-gray-200 text-[#A57F60] font-semibold py-2 px-4 rounded-lg">Crescimento Urbano</button> <button data-topic="economia" class="nav-button bg-white shadow-sm border border-gray-200 text-[#A57F60] font-semibold py-2 px-4 rounded-lg">Economia</button> <button data-topic="educacao" class="nav-button bg-white shadow-sm border border-gray-200 text-[#A57F60] font-semibold py-2 px-4 rounded-lg">Educação e Talentos</button> <button data-topic="desigualdades" class="nav-button bg-white shadow-sm border border-gray-200 text-[#A57F60] font-semibold py-2 px-4 rounded-lg">Desigualdades</button> <button data-topic="cultura" class="nav-button bg-white shadow-sm border border-gray-200 text-[#A57F60] font-semibold py-2 px-4 rounded-lg">Cultura e Turismo</button> <button data-topic="mobilidade" class="nav-button bg-white shadow-sm border border-gray-200 text-[#A57F60] font-semibold py-2 px-4 rounded-lg">Mobilidade</button> </div> <div id="dynamic-content" class="bg-white p-6 md:p-8 rounded-lg shadow-lg border border-gray-200 min-h-[600px]"> </div> </section> <section id="sintese"> <h2 class="text-2xl font-bold text-center mb-6 text-[#7E6A5A]">Síntese Estratégica</h2> <p class="text-center max-w-3xl mx-auto mb-8 text-gray-700"> Para superar os desafios e alavancar suas potencialidades, Feira de Santana deve se consolidar como uma Metrópole Regional Inovadora. A estratégia se baseia em quatro pilares interconectados que guiarão o desenvolvimento urbano, econômico, social e cultural da cidade na próxima década. </p> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> <div class="bg-white p-6 rounded-lg shadow-md border border-gray-200 text-center"> <div class="text-4xl mb-4">🏙️</div> <h3 class="text-xl font-bold text-[#A57F60] mb-2">Crescimento Urbano Sustentável</h3> <p class="text-gray-600">Planejamento, habitação digna e infraestrutura resiliente.</p> </div> <div class="bg-white p-6 rounded-lg shadow-md border border-gray-200 text-center"> <div class="text-4xl mb-4">💡</div> <h3 class="text-xl font-bold text-[#A57F60] mb-2">Economia Diversificada e Tecnológica</h3> <p class="text-gray-600">Foco em inovação, logística 4.0 e bioeconomia.</p> </div> <div class="bg-white p-6 rounded-lg shadow-md border border-gray-200 text-center"> <div class="text-4xl mb-4">🎓</div> <h3 class="text-xl font-bold text-[#A57F60] mb-2">Educação Conectada ao Mercado</h3> <p class="text-gray-600">Retenção de talentos e sinergia com a UEFS.</p> </div> <div class="bg-white p-6 rounded-lg shadow-md border border-gray-200 text-center"> <div class="text-4xl mb-4">🎭</div> <h3 class="text-xl font-bold text-[#A57F60] mb-2">Turismo e Cultura Contínuos</h3> <p class="text-gray-600">Calendário de eventos anual e valorização do patrimônio.</p> </div> </div> </section> </main> <footer class="text-center mt-12 pt-6 border-t border-gray-200"> <p class="text-gray-500">Painel desenvolvido para análise estratégica municipal.</p> </footer> </div> <script> const appData = { urbanismo: { title: "Crescimento Urbano e Qualidade de Vida", ods: [{num: 11, color: '#F59E27'}], critico: "Expansão desordenada, déficit habitacional e transporte precário, com grande parte do crescimento ocorrendo sem planejamento adequado.", solucoes: [ "Plano diretor atualizado e participativo.", "Habitação popular sustentável e integrada.", "Integração metropolitana com Salvador (BRT/ferrovia).", "Investimento pesado em saneamento básico e drenagem.", ], chart: { type: 'doughnut', data: { labels: ['Expansão Desordenada', 'Área Planejada'], datasets: [{ label: 'Crescimento Urbano', data: [65, 35], backgroundColor: ['#D9A98B', '#A57F60'], borderColor: '#FFFFFF', borderWidth: 4 }] }, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { position: 'bottom' }, title: { display: true, text: 'Proporção do Crescimento Urbano' } } } } }, economia: { title: "Economia Dependente do Comércio", ods: [{num: 8, color: '#A31942'}, {num: 9, color: '#F36D25'}], critico: "Vulnerabilidade do setor de comércio em crises e baixa agregação de valor nos produtos e serviços locais.", solucoes: [ "Estímulo a startups e logística 4.0.", "Criação de um polo agroindustrial (processamento de alimentos, bioeconomia).", "Inserção em cadeias de energias renováveis (manutenção de eólicas/solares).", ], chart: { type: 'bar', data: { labels: ['Comércio/Serviços', 'Indústria', 'Agro/Logística 4.0', 'Energias Renováveis'], datasets: [ { label: 'Atual', data: [75, 20, 5, 0], backgroundColor: '#D9A98B', }, { label: 'Proposta', data: [50, 20, 20, 10], backgroundColor: '#A57F60', } ] }, options: { responsive: true, maintainAspectRatio: false, scales: { y: { beginAtZero: true, max: 100, ticks: { callback: value => value + "%" } } }, plugins: { title: { display: true, text: 'Composição Econômica: Atual vs. Proposta' }, tooltip: { callbacks: { label: context => `${context.dataset.label}: ${context.raw}%` } } } } } }, educacao: { title: "Educação e Retenção de Talentos", ods: [{num: 4, color: '#C5192D'}, {num: 17, color: '#19486A'}], critico: "Jovens formados na UEFS e outras instituições de ponta migram por falta de oportunidades de carreira locais.", solucoes: [ "Criação de parques tecnológicos e incubadoras ligadas à UEFS.", "Programas de estágio/trainee robustos em empresas locais.", "Bolsas de inovação público-privadas para projetos de P&D.", ], chart: { type: 'bar', data: { labels: ['Formados na UEFS (por ano)', 'Absorvidos em Vagas Qualificadas Locais'], datasets: [{ label: 'Fluxo de Talentos', data: [5000, 1200], backgroundColor: ['#A57F60', '#D9A98B'], barPercentage: 0.6 }] }, options: { indexAxis: 'y', responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false }, title: { display: true, text: 'Visualização da "Fuga de Cérebros"' } } } } }, desigualdades: { title: "Desigualdades Intraurbanas", ods: [{num: 10, color: '#DD1367'}, {num: 1, color: '#E5243B'}], critico: "Infraestrutura de qualidade (saúde, cultura, esporte) é fortemente concentrada nas áreas centrais, deixando as periferias carentes.", solucoes: [ "Descentralização de equipamentos culturais, de saúde e esportivos.", "Programas de microcrédito e capacitação para autônomos na periferia.", "Projetos de requalificação urbana com participação comunitária.", ], chart: { type: 'radar', data: { labels: ['Cultura', 'Saúde', 'Esporte', 'Saneamento', 'Educação'], datasets: [ { label: 'Áreas Centrais', data: [9, 8, 8, 9, 9], fill: true, backgroundColor: 'rgba(165, 127, 96, 0.2)', borderColor: '#A57F60', pointBackgroundColor: '#A57F60' }, { label: 'Periferias', data: [3, 5, 4, 4, 6], fill: true, backgroundColor: 'rgba(217, 169, 139, 0.2)', borderColor: '#D9A98B', pointBackgroundColor: '#D9A98B' } ] }, options: { responsive: true, maintainAspectRatio: false, plugins: { title: { display: true, text: 'Índice de Infraestrutura (Centro vs. Periferia)' } }, scales: { r: { suggestedMin: 0, suggestedMax: 10 } } } } }, cultura: { title: "Cultura e Turismo Sazonal", ods: [{num: 8, color: '#A31942'}, {num: 11, color: '#F59E27'}], critico: "A economia criativa e turística depende excessivamente de dois grandes eventos anuais (Micareta e Expofeira), com pouca atividade contínua.", solucoes: [ "Criação de um calendário anual de eventos (culturais, científicos, gastronômicos).", "Estruturação de roteiros turísticos (histórico, sertão).", "Fortalecimento do turismo educacional (Parque do Saber, Observatório Antares).", ], chart: { type: 'line', data: { labels: ['Jan', 'Fev', 'Mar', 'Abr (Micareta)', 'Mai', 'Jun', 'Jul', 'Ago', 'Set (Expofeira)', 'Out', 'Nov', 'Dez'], datasets: [ { label: 'Receita Atual', data: [10, 12, 15, 100, 18, 25, 20, 18, 90, 15, 14, 22], borderColor: '#D9A98B', tension: 0.1, pointBackgroundColor: '#D9A98B' }, { label: 'Meta Contínua', data: [30, 35, 40, 60, 45, 50, 48, 46, 70, 50, 48, 55], borderColor: '#A57F60', borderDash: [5, 5], tension: 0.3, pointBackgroundColor: '#A57F60' } ] }, options: { responsive: true, maintainAspectRatio: false, plugins: { title: { display: true, text: 'Receita do Turismo: Sazonal vs. Contínuo' } }, scales: { y: { beginAtZero: true } } } } }, mobilidade: { title: "Mobilidade e Logística Urbana", ods: [{num: 13, color: '#3F7E44'}, {num: 9, color: '#F36D25'}], critico: "Trânsito intenso, poluição e alto número de acidentes no entroncamento rodoviário que corta a cidade.", solucoes: [ "Implantação de plataformas logísticas fora da área urbana.", "Transporte coletivo rápido e de alta capacidade (BRT regional).", "Incentivo ao transporte de cargas por ferrovia para desafogar rodovias.", ], chart: { type: 'bar', data: { labels: ['Atual', 'Proposto'], datasets: [ { label: 'Transporte Individual/Carga Rodoviária', data: [80, 50], backgroundColor: '#D9A98B', }, { label: 'Transporte Coletivo (BRT)', data: [15, 35], backgroundColor: '#A57F60', }, { label: 'Ferrovia/Outros', data: [5, 15], backgroundColor: '#7E6A5A', }, ] }, options: { responsive: true, maintainAspectRatio: false, scales: { x: { stacked: true }, y: { stacked: true, max: 100, ticks: { callback: value => value + "%" } } }, plugins: { title: { display: true, text: 'Divisão Modal do Transporte (%)' }, tooltip: { callbacks: { label: context => `${context.dataset.label}: ${context.raw}%` } } } } } } }; const dynamicContentContainer = document.getElementById('dynamic-content'); const navButtons = document.querySelectorAll('.nav-button'); let currentChart = null; function updateContent(topic) { const data = appData[topic]; if (!data) return; dynamicContentContainer.innerHTML = ''; const contentWrapper = document.createElement('div'); contentWrapper.className = 'flex flex-col lg:flex-row gap-8'; const textContent = document.createElement('div'); textContent.className = 'lg:w-1/2 order-2 lg:order-1'; const odsHtml = data.ods.map(ods => `<span class="ods-icon mr-2" style="background-color:${ods.color};" title="ODS ${ods.num}">${ods.num}</span>`).join(''); textContent.innerHTML = ` <div class="flex items-center mb-4"> ${odsHtml} <h3 class="text-xl font-bold text-[#7E6A5A]">${data.title}</h3> </div> <div class="mb-6"> <h4 class="font-semibold text-lg mb-2 text-red-700">Ponto Crítico</h4> <p class="text-gray-700 leading-relaxed">${data.critico}</p> </div> <div> <h4 class="font-semibold text-lg mb-2 text-green-700">Soluções Propostas</h4> <ul class="list-disc list-inside space-y-2 text-gray-700"> ${data.solucoes.map(s => `<li>${s}</li>`).join('')} </ul> </div> `; const chartWrapper = document.createElement('div'); chartWrapper.className = 'lg:w-1/2 order-1 lg:order-2'; chartWrapper.innerHTML = `<div class="chart-container"><canvas id="mainChart"></canvas></div>`; contentWrapper.appendChild(textContent); contentWrapper.appendChild(chartWrapper); dynamicContentContainer.appendChild(contentWrapper); const ctx = document.getElementById('mainChart').getContext('2d'); if (currentChart) { currentChart.destroy(); } currentChart = new Chart(ctx, { type: data.chart.type, data: data.chart.data, options: data.chart.options }); navButtons.forEach(btn => { btn.classList.remove('active'); if (btn.dataset.topic === topic) { btn.classList.add('active'); } }); } document.getElementById('navigation').addEventListener('click', (e) => { if (e.target.matches('.nav-button')) { const topic = e.target.dataset.topic; updateContent(topic); } }); window.addEventListener('load', () => { updateContent('urbanismo'); });    </script><!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Painel ODS: Diagnóstico de Feira de Santana

Painel ODS: Diagnóstico Estratégico

Feira de Santana: Rumo a uma Metrópole Regional Inovadora

Contexto Geral

Feira de Santana, o maior município do interior do Nordeste e 69º do Brasil em PIB, apresenta um crescimento populacional dinâmico e um IDH considerado alto. Esta seção oferece uma visão geral dos principais indicadores que definem a cidade hoje, servindo como base para a análise dos desafios e oportunidades que se seguem.

População (2024)

657.948

+7% em 2 anos

PIB (Posição Nacional)

69º

Maior do interior do NE

IDH

0,712

Considerado Alto

Vocação Econômica

Comércio, Indústria, Educação, Logística e Cultura formam a base da sua identidade econômica.

Pontos Críticos & Soluções

Explore os seis principais desafios que Feira de Santana enfrenta em seu caminho para o desenvolvimento sustentável. Cada área está conectada aos Objetivos de Desenvolvimento Sustentável (ODS) e apresenta tanto os pontos críticos identificados quanto as soluções estratégicas propostas. Clique em um desafio para visualizar a análise detalhada e os dados correspondentes.

Síntese Estratégica

Para superar os desafios e alavancar suas potencialidades, Feira de Santana deve se consolidar como uma Metrópole Regional Inovadora. A estratégia se baseia em quatro pilares interconectados que guiarão o desenvolvimento urbano, econômico, social e cultural da cidade na próxima década.

🏙️

Crescimento Urbano Sustentável

Planejamento, habitação digna e infraestrutura resiliente.

💡

Economia Diversificada e Tecnológica

Foco em inovação, logística 4.0 e bioeconomia.

🎓

Educação Conectada ao Mercado

Retenção de talentos e sinergia com a UEFS.

🎭

Turismo e Cultura Contínuos

Calendário de eventos anual e valorização do patrimônio.

Modelo de Projeto para Captação de Recursos

Baseado nas potencialidades culturais da cidade, este é um modelo de projeto para um evento âncora, o "Festival Rota do Sertão", desenhado para atrair investimentos e fortalecer o calendário cultural de Feira de Santana.

Assistente de Estratégia com IA

Utilize o poder da IA generativa para sintetizar o diagnóstico da cidade e o projeto "Festival Rota do Sertão" num "pitch" de investidor coeso e impactante.

Painel desenvolvido para análise estratégica municipal.

×

Resposta da IA

0