2c:null 2d:["$","title",null,{"children":"SolarViz: Visualização Interativa do Sistema Solar e Rotas de Navegação Espacial | Data Visualization | Observable"}] 32:Tad3,// Array de objetos contendo os dados fundamentais dos planetas para a simulação planets = [ { name: "Mercúrio", color: "#b1b1b1", // Cor representativa para a visualização radius: 3, // Raio estilizado para a representação gráfica realRadius: 2439, // Raio real em km (usado em cálculos de escala) orbit: 58e6, // Semi-eixo maior em km a_AU: 0.387, // Semi-eixo maior em Unidades Astronômicas (UA) period: 88, // Período orbital em dias terrestres mass: 0.330, // Massa (10^24 kg) img: "https://upload.wikimedia.org/wikipedia/commons/4/4a/Mercury_in_true_color.jpg", e: 0.2056, // Excentricidade da órbita (forma da elipse) i: 7.00, // Inclinação orbital em graus em relação à eclíptica p_arg: 252.25 // Longitude do periastro (ajusta a orientação da órbita) }, // ... (os demais planetas seguem a mesma estrutura de parâmetros orbitais Keplerianos) { name: "Vênus", color: "#e0b55b", radius: 5, realRadius: 6051, orbit: 108e6, a_AU: 0.723, period: 225, mass: 4.87, img: "https://upload.wikimedia.org/wikipedia/commons/0/08/Venus_from_Mariner_10.jpg", e: 0.0068, i: 3.39, p_arg: 181.98 }, { name: "Terra", color: "#4fa3ff", radius: 5, realRadius: 6371, orbit: 150e6, a_AU: 1.000, period: 365, mass: 5.97, img: "https://upload.wikimedia.org/wikipedia/commons/9/97/The_Earth_seen_from_Apollo_17.jpg", e: 0.0167, i: 0.00, p_arg: 102.95 }, { name: "Marte", color: "#d14f2b", radius: 4, realRadius: 3389, orbit: 228e6, a_AU: 1.524, period: 687, mass: 0.642, img: "https://upload.wikimedia.org/wikipedia/commons/0/02/OSIRIS_Mars_true_color.jpg", e: 0.0934, i: 1.85, p_arg: 336.04 }, { name: "Júpiter", color: "#c79c5e", radius: 10, realRadius: 69911, orbit: 778e6, a_AU: 5.203, period: 4333, mass: 1898, img: "https://upload.wikimedia.org/wikipedia/commons/2/2b/Jupiter_and_its_shrunken_Great_Red_Spot.jpg", e: 0.0484, i: 1.31, p_arg: 14.75 }, { name: "Saturno", color: "#e3d8a1", radius: 8, realRadius: 58232, orbit: 1427e6, a_AU: 9.537, period: 10759, mass: 568, img: "https://upload.wikimedia.org/wikipedia/commons/c/c7/Saturn_during_Equinox.jpg", e: 0.0542, i: 2.48, p_arg: 92.59 }, { name: "Urano", color: "#9be8ff", radius: 7, realRadius: 25362, orbit: 2871e6, a_AU: 19.191, period: 30687, mass: 86.8, img: "https://upload.wikimedia.org/wikipedia/commons/3/3d/Uranus2.jpg", e: 0.0472, i: 0.77, p_arg: 170.96 }, { name: "Netuno", color: "#4978ff", radius: 7, realRadius: 24622, orbit: 4495e6, a_AU: 30.069, period: 60190, mass: 102, img: "https://upload.wikimedia.org/wikipedia/commons/5/56/Neptune_Full.jpg", e: 0.0086, i: 1.77, p_arg: 44.97 } ];33:T676,// Array de objetos definindo satélites naturais selecionados para a visualização hierárquica. moons = [ // A propriedade 'planet' serve como chave estrangeira para vincular a lua ao seu corpo pai. // 'orbit' aqui representa a distância média em relação ao centro do planeta (em km). // 'period' é o tempo de translação ao redor do planeta em dias terrestres. { name: "Lua", planet: "Terra", radius: 2, realRadius: 1737, orbit: 384400, period: 27.3, img: "https://upload.wikimedia.org/wikipedia/commons/e/e1/FullMoon2010.jpg" }, // Luas Galileanas de Júpiter { name: "Io", planet: "Júpiter", radius: 2, realRadius: 1821, orbit: 421700, period: 1.77, img: "https://upload.wikimedia.org/wikipedia/commons/7/7b/Io_highest_resolution_true_color.jpg" }, { name: "Europa", planet: "Júpiter", radius: 2, realRadius: 1560, orbit: 671100, period: 3.55, img: "https://upload.wikimedia.org/wikipedia/commons/5/54/Europa-moon.jpg" }, { name: "Ganimedes", planet: "Júpiter", radius: 3, realRadius: 2634, orbit: 1070400, period: 7.15, img: "https://upload.wikimedia.org/wikipedia/commons/thumb/2/21/Ganymede_-_Perijove_34_Composite.png/330px-Ganymede_-_Perijove_34_Composite.png" }, { name: "Calisto", planet: "Júpiter", radius: 3, realRadius: 2410, orbit: 1882700, period: 16.7, img: "https://upload.wikimedia.org/wikipedia/commons/e/e9/Callisto.jpg" }, // Lua de Saturno { name: "Titã", planet: "Saturno", radius: 3, realRadius: 2575, orbit: 1221870, period: 15.9, img: "https://upload.wikimedia.org/wikipedia/commons/thumb/4/45/Titan_in_true_color.jpg/330px-Titan_in_true_color.jpg" } ]34:Tfd8,// Constrói o painel de configurações de velocidade usando elementos HTML sobrepostos ao SVG. makeSpeedMenu = function(container, svg) { // Cria um elemento

para o menu flutuante. // Usamos 'absolute' para posicioná-lo sobre o canvas do sistema solar. const speedMenu = document.createElement("div"); speedMenu.style.position = "absolute"; speedMenu.style.bottom = "60px"; speedMenu.style.left = "10px"; speedMenu.style.background = "#2a2a2a"; speedMenu.style.padding = "15px"; speedMenu.style.borderRadius = "8px"; speedMenu.style.boxShadow = "0 4px 8px rgba(0,0,0,0.5)"; speedMenu.style.display = "none"; // Inicia oculto (toggle via engrenagem) speedMenu.style.color = "white"; speedMenu.style.width = "300px"; // Define a interface com sliders e inputs numéricos para controle fino. speedMenu.innerHTML = ` Velocidade da reprodução

Velocidade:

Opções fixas:

`; container.appendChild(speedMenu); // Listeners para eventos de input e botões de atalho. const sliderInput = speedMenu.querySelector("#speedSlider"); const numberInput = speedMenu.querySelector("#speedNumber"); // Função interna para garantir que todos os inputs (slider e número) reflitam o mesmo valor. const updateSpeed = (newSpeed) => { // Verifica se o novo valor é um número válido, senão usa 1 como padrão const validatedSpeed = isNaN(newSpeed) || newSpeed === 0 ? 1 : newSpeed; mutable speed = validatedSpeed; // Atualiza a variável reativa do Observable sliderInput.value = validatedSpeed; numberInput.value = validatedSpeed; }; // Inputs manuais sliderInput.addEventListener("input", (e) => updateSpeed(parseFloat(e.target.value))); numberInput.addEventListener("input", (e) => updateSpeed(parseFloat(e.target.value))); // Botões de velocidade fixa speedMenu.querySelector("#btn-05x").addEventListener("click", () => updateSpeed(0.5)); speedMenu.querySelector("#btn-1x").addEventListener("click", () => updateSpeed(1)); speedMenu.querySelector("#btn-2x").addEventListener("click", () => updateSpeed(2)); // Implementação da Engrenagem (SVG) que controla a visibilidade do menu (HTML). const settingsIcon = svg.append("g") .attr("transform", "translate(80, 660)") .style("cursor", "pointer") .on("click", (event) => { event.stopPropagation(); // Impede que o clique feche o menu imediatamente speedMenu.style.display = (speedMenu.style.display === "none") ? "block" : "none"; }); // Desenha o ícone de engrenagem unicode. settingsIcon.append("rect").attr("width", 30).attr("height", 25).attr("fill", "#555").attr("rx", 5); settingsIcon.append("text").attr("x", 15).attr("y", 17).attr("fill", "white").attr("text-anchor", "middle") .attr("dominant-baseline", "middle") .style("font-size", "18px") .text("⚙︎"); // Lógica de UX: Fecha o menu automaticamente ao clicar em qualquer área vazia da simulação. document.addEventListener("click", (event) => { if (!speedMenu.contains(event.target) && !settingsIcon.node().contains(event.target)) { speedMenu.style.display = "none"; } }); // StopPropagation nos inputs para evitar interferências com outros eventos do container. sliderInput.addEventListener("input", (e) => { e.stopPropagation(); updateSpeed(parseFloat(e.target.value)); }); numberInput.addEventListener("input", (e) => { e.stopPropagation(); updateSpeed(parseFloat(e.target.value)); }); }35:T1e51,// Função principal de montagem da cena, utilizando o padrão de "fábrica" para criar os elementos. makeSolarSystem = (svg, planets, moons, scaleOrbits, center, onClickHandler) => { // Criamos um grupo principal () e o transladamos para o centro do SVG. // Isso define o Sol como a origem (0,0) do nosso sistema de coordenadas. const systemGroup = svg.append("g") .attr("transform", `translate(${center.x},${center.y})`); // === Sol === // Posicionado no centro absoluto. O onClickHandler permite a integração // com os gráficos coordenados (Vega-Lite) ao selecionar o Sol. systemGroup.append("circle") .attr("cx", 0) .attr("cy", 0) .attr("r", 20) .attr("fill", "yellow") .style("cursor", "pointer") .on("click", (event, d) => onClickHandler(event, {name: "Sol", type: "Sol", radius: 696000, period: 0, orbit: 0}, 'Sol')) .append("title") .text("Sol"); // === Órbitas dos planetas (Traçados Reais) === // Diferente de círculos perfeitos, usamos caminhos (paths) baseados em // modelos Keplerianos para representar a excentricidade real das órbitas. systemGroup.selectAll("path.orbit-sun") .data(planets) .join("path") .attr("class", "orbit-sun") .attr("fill", "none") .attr("stroke", "rgba(255,255,255,0.2)") .attr("stroke-dasharray", "2,2") // Linha pontilhada para fins estéticos .attr("d", d => { // Gera os pontos da elipse orbital e aplica uma curva Cardinal fechada do D3 const points = generateOrbitPathPoints(d, auxiliaryOrbitalFunctions, scaleOrbits.planetScale); return d3.line().curve(d3.curveCardinalClosed)(points); }); // Agrupamento lógico das luas usando d3.group para otimizar a busca por planeta pai. const moonsByPlanet = d3.group(moons, d => d.planet); // === Renderização de Planetas e seus Sistemas (Anéis e Luas) === const planetGroups = systemGroup.selectAll("g.planet") .data(planets) .join("g") .attr("class", "planet"); // Função interna para injetar a geometria dos anéis (exclusiva para gigantes gasosos). function addPlanetRings(planetGroup, planetData) { const hasRings = ["Júpiter", "Saturno", "Urano", "Netuno"].includes(planetData.name); if (!hasRings) return; // Lógica de design: Define raios e inclinações específicas para cada planeta. // Nota: Urano recebe inclinação de 90° para refletir seu eixo de rotação único. let innerRadius, outerRadius, inclination, numRings, baseColor; // Lógica de switch para cada gigante switch(planetData.name){ case "Júpiter": // Anéis finos e próximos ao planeta innerRadius = planetData.radius + 0.5; outerRadius = planetData.radius + 3; numRings = 2; baseColor = d3.color(planetData.color).darker(1.5); inclination = 0; // Júpter tem pouca inclinação visível break; case "Urano": // Anéis distintos e o planeta é inclinado (98 graus!) innerRadius = planetData.radius + 1; outerRadius = planetData.radius + 6; numRings = 3; baseColor = d3.color(planetData.color).darker(0.5); inclination = 90; // Visto de "lado" break; case "Netuno": // Anéis tênues e fragmentados innerRadius = planetData.radius + 0.5; outerRadius = planetData.radius + 4; numRings = 2; baseColor = d3.color(planetData.color).darker(0.5); inclination = 28; break; case "Saturno": // Anéis proeminentes innerRadius = planetData.radius + 2; outerRadius = planetData.radius + 10; numRings = 4; baseColor = d3.color(planetData.color).darker(0.5); inclination = 90; // Para visualização de "lado" break; } // Cria faixas concêntricas (anéis) usando d3.arc() para simular densidade. const ringsData = d3.range(numRings).map(i => { const t = i / (numRings - 1 || 1); // Normaliza o índice entre 0 e 1 e garante divisão por 1 se numRings for 1 ou 2 return { inner: innerRadius + t * (outerRadius - innerRadius), outer: innerRadius + (t + 1/numRings) * (outerRadius - innerRadius), // Varia a cor e opacidade levemente para dar textura color: baseColor.brighter(t * 1.5), opacity: 0.3 + t * 0.5 // Anéis externos mais opacos }; }); // Cria um grupo para todos os anéis e aplica a inclinação correta const ringsGroup = planetGroup.append("g") .attr("class", "planet-rings-group") .attr("transform", `rotate(${inclination}, 0, 0)`); ringsGroup.selectAll("path.planet-ring-segment") .data(ringsData) .join("path") .attr("class", "planet-ring-segment") .attr("d", d => { // Gerador de arco para cada segmento return d3.arc() .innerRadius(d.inner) .outerRadius(d.outer) .startAngle(0) .endAngle(2 * Math.PI)(); }) .attr("fill", d => d.color) .attr("fill-opacity", d => d.opacity); } // === Grupos Internos e Luas === planetGroups.each(function(planetData){ const planetGroup = d3.select(this); const planetMoons = moonsByPlanet.get(planetData.name); if (!planetMoons) return; // Desenha órbita da lua (centrada no planeta, que é a origem do planetGroup) planetGroup.selectAll("circle.orbit-moon") // Seleciona dentro do grupo do planeta .data(planetMoons) .join("circle") .attr("class", "orbit-moon") .attr("cx", 0) .attr("cy", 0) .attr("r", d => scaleOrbits.moonScale(d.orbit)) .attr("fill", "none") .attr("stroke", "rgba(255,255,255,0.15)") .attr("stroke-dasharray", "1,1"); }); // === Renderização dos planetas e luas === planetGroups.each(function(planetData) { const planetGroup = d3.select(this); // Este grupo interno rotacionará com a inclinação axial, mas a animação orbital // na Célula 16 atuará no grupo PAI (`planetGroup`). const planetInnerGroup = planetGroup.append("g").attr("class", "planet-inner-group"); // Chamamos a função para adicionar anéis a este grupo interno addPlanetRings(planetInnerGroup, planetData); // Criamos um 'planetInnerGroup' para separar a rotação axial do planeta // da sua translação orbital (que será controlada pelo planetGroup pai). planetInnerGroup.append("circle") .attr("class", "planet-circle") .style("cursor", "pointer") .attr("r", d => d.radius) .attr("fill", d => d.color) .attr("stroke", "black") .attr("stroke-width", 0.5) .attr("cx", 0) .attr("cy", 0) // Adiciona o evento de clique para os Planetas .on("click", (event, d) => onClickHandler(event, d, 'planet')) .append("title") .text(d => d.name); // Renderiza as luas se o planeta possuir satélites no nosso dataset. const planetMoons = moonsByPlanet.get(planetData.name); if (!planetMoons) return; // Cria grupo para as luas const moonGroups = planetInnerGroup.selectAll("g.moon") .data(planetMoons) .join("g") .attr("class", "moon"); // Desenha a lua moonGroups.append("circle") .attr("r", d => d.radius) .attr("fill", "white") .attr("cx", 0) .attr("cy", 0) .style("cursor", "pointer") // Adiciona o evento de clique aqui para as Luas .on("click", (event, d) => onClickHandler(event, d, 'moon')) .append("title") .text(d => d.name); }); return { planetGroups, moonsByPlanet, systemGroup }; };36:T44e,// Cria um dataset procedural para popular o cinturão de asteroides de forma realista. asteroidBeltData = { // Define os limites do cinturão (entre as órbitas de Marte e Júpiter) em KM. const marsOrbitKM = planets.find(p => p.name === "Marte").orbit; const jupiterOrbitKM = planets.find(p => p.name === "Júpiter").orbit; const minOrbitKM = marsOrbitKM + 1e7; // Começa 10 milhões de km após Marte const maxOrbitKM = jupiterOrbitKM - 1e7; // Termina 10 milhões de km antes de Júpiter const numAsteroids = 1000; // d3.range cria um array de 1000 elementos. Mapeamos para criar objetos de dados. const asteroids = d3.range(numAsteroids).map(() => ({ orbit_km: d3.randomUniform(minOrbitKM, maxOrbitKM)(), // Distribuição uniforme das distâncias angle: d3.randomUniform(0, 2 * Math.PI)(), // Posição angular inicial aleatória speed: d3.randomUniform(0.5, 2.0)(), // Velocidade de animação procedural (não física) radius: d3.randomUniform(0.2, 1.5)() // Tamanho visual aleatório })); return asteroids; }37:T68b,// Implementação das funções matemáticas (Modelo Kepleriano simplificado). auxiliaryOrbitalFunctions = { // Helper: Converte graus em radianos (necessário para funções trigonométricas em JS). function deg2rad(d) { return d * Math.PI / 180; } // Resolve a Equação de Kepler (M = E - e*sin(E)) iterativamente. // Essencial para calcular a Posição Excêntrica (E) a partir da Anomalia Média (M). function solveKepler(M, e, tol = 1e-6) { let E = M; // E é a Anomalia Excêntrica. Começamos com uma estimativa inicial (M). let delta = 1; // Diferença para o critério de convergência. // Método de Newton-Raphson para encontrar a raiz da equação. while (Math.abs(delta) > tol) { delta = (E - e * Math.sin(E) - M) / (1 - e * Math.cos(E)); E -= delta; // Refina a estimativa de E. } return E; } // Converte elementos orbitais clássicos e tempo para coordenadas X, Y no plano da órbita. function orbitalElementsToXY(el, timeDays = 0) { const { a_AU, eccentricity: e, M_deg, period_days } = el; // Calcula a velocidade angular média (movimento médio) const n = 2 * Math.PI / period_days; // Calcula a Anomalia Média (M) no tempo atual. const M = deg2rad(M_deg) + n * timeDays; // Resolve M para obter a Anomalia Excêntrica (E). const E = solveKepler(M, e); // Calcula as coordenadas cartesianas (X, Y) no plano da elipse, com o Sol em um dos focos. const x = a_AU * (Math.cos(E) - e); const y = a_AU * Math.sqrt(1 - e * e) * Math.sin(E); return { x, y }; // Retorna em Unidades Astronômicas (AU) } return { orbitalElementsToXY }; }38:T4df,// Usa as funções da Célula 15 para pré-calcular pontos que desenham o caminho da órbita (path SVG). function generateOrbitPathPoints(planetData, orbitalFunctions, scaleFunction) { // Encontra os elementos orbitais estáticos para o planeta específico const el = mutable staticOrbits.planets[planetData.name]; if (!el) return []; const points = []; const totalDays = el.period_days; const numPoints = 360; // 1 ponto para cada passo na órbita for (let i = 0; i < numPoints; i++) { const timeInDays = (i / numPoints) * totalDays; // Obtém a posição em AU. const posAU = orbitalFunctions.orbitalElementsToXY(el, timeInDays); // Converte de AU para KM (constante de conversão). const AU_TO_KM = 149597870; const x_km = posAU.x * AU_TO_KM; const y_km = posAU.y * AU_TO_KM; // Transforma a posição real (KM) na posição visual (Pixels) usando a escala logarítmica. const rKM = Math.sqrt(x_km**2 + y_km**2); const angleRad = Math.atan2(y_km, x_km); // Calcula a posição final em pixels para o SVG const x_px = scaleFunction(rKM) * Math.cos(angleRad); const y_px = scaleFunction(rKM) * Math.sin(angleRad); points.push([x_px, y_px]); } return points; }39:Tbc0,// Cria a interface do usuário (UI) para o "diferencial do projeto": o planejamento de rotas de trânsito espacial. makeMissionUI = function(container) { // Cria o painel HTML flutuante usando template literals (`html` do Observable). const missionDiv = html`

🚀 PLANEJADOR DE MISSÃO

`; container.appendChild(missionDiv); // === Lógica dos Controladores === // Botão Confirmar: Define a variável 'mutable mission', que acionará a lógica // de cálculo de transferência de Hohmann em células subsequentes. missionDiv.querySelector("#btnConfirm").onclick = () => { const origin = missionDiv.querySelector("#origin").value; const target = missionDiv.querySelector("#target").value; if (origin && target && origin !== target) { // Esta atualização de mutable causa reatividade em outras partes do notebook. mutable mission = { origin, target }; missionDiv.querySelector("#missionStats").style.display = "block"; } else { alert("Selecione planetas de origem e destino diferentes."); } }; // Botão Reset: Limpa a missão atual. missionDiv.querySelector("#btnReset").onclick = () => { mutable mission = null; missionDiv.querySelector("#origin").value = ""; missionDiv.querySelector("#target").value = ""; missionDiv.querySelector("#missionStats").style.display = "none"; }; return missionDiv; }3a:T669c,// A célula 'viewof' combina a visualização com um valor reativo no Observable. viewof solarSystem = { transferData; // Dependência reativa: força a atualização se a rota de missão mudar. mutable livePositions; // Armazena as coordenadas reais vindas da API para uso em outros gráficos. mutable mission; // Estado da missão ativa (Origem/Destino). // === Inicialização de Dados === // Garante que os elementos orbitais da JPL sejam carregados antes de iniciar a cena. if (!mutable staticOrbits) { mutable staticOrbits = await fetchStaticOrbits(); } // === Controle de Tempo e Performance === let lastRawElapsed = 0; // Tempo total decorrido desde o início. let lastFrameTime = performance.now(); // Delta time para manter 60 FPS estáveis. let liveInterval = null; // Gerenciamento de Transformação do D3.zoom para permitir foco em planetas específicos. let currentTransform = d3.zoomIdentity; // === Instanciação da Interface === // Cria o palco (SVG) e injeta os componentes de UI (Missão, Estrelas, Botões). const { container, svg } = makeContainerCell(containerAndDimensions.width + 350, containerAndDimensions.height); // === Injeção da UI de Missão === const missionUI = makeMissionUI(container); // === Fundo Estrelado === makeStarfield(svg, containerAndDimensions.width, containerAndDimensions.height); // === Lógica de Navegação e Câmera === // Função que reseta o zoom e centraliza o sistema solar quando o usuário fecha o painel lateral. const closePanelAndResetView = () => { mutable selectedObject = null; // Reseta o estado de seleção // Transição suave para retornar a escala 1:1 no centro original. systemGroup.transition() .duration(800) .attr("transform", `translate(${containerAndDimensions.center.x},${containerAndDimensions.center.y}) scale(1)`); infoPanel.style.display = "none"; // Esconde o painel visualmente // Resiliência de Animação: Se o sistema estava pausado para inspeção, retoma o fluxo do tempo. if (!mutable isRunning) { mutable isRunning = true; buttonText.text("Pause"); // Ajusta o tempo acumulado para evitar "pulo" na animação quando retomar mutable accumulatedPauseTime += lastRawElapsed - mutable pauseStart; } }; // === Gerenciamento de UI e Painéis === // === Botão Play/Pause === const {text: buttonText } = makePlayPauseButton(svg, () => { mutable isRunning = !mutable isRunning; // Alterna o estado (Play/Pause) if (!mutable isRunning) { mutable pauseStart = lastRawElapsed; // Marca início da pausa buttonText.text("Play"); } else { // Calcule a duração dessa última pausa e adicione ao total acumulado mutable accumulatedPauseTime += lastRawElapsed - mutable pauseStart; buttonText.text("Pause"); } }); // === Menu de Velocidade === makeSpeedMenu(container, svg); // Cria o Painel Lateral de Informações que conterá os gráficos Vega-Lite. const infoPanel = makeInfoPanel(container, containerAndDimensions.width, closePanelAndResetView); // === Integração Multivariada (Dashboard) === // Função que atualiza o painel lateral com metadados e gráficos comparativos do planeta clicado. const updateInfoPanel = (obj) => { if(!obj){ infoPanel.style.display = "none"; return; } // 1. Busca dados técnicos de planetas. //const pData = planets.find(p => p.name === obj.name); let data; if (obj.type === 'Sol') { data = { realRadius: 696340, period: 0, orbit: 0, img: "https://static.escolakids.uol.com.br/2025/01/1-sol-visto-do-universo.jpg" }; } else if (obj.type === 'moon') { data = moons.find(m => m.name === obj.name); } else { data = planets.find(p => p.name === obj.name); } // 2. Preenchimento de Cabeçalho infoPanel.querySelector("#objectName").textContent = obj.name; infoPanel.querySelector("#objectType").textContent = obj.type.toUpperCase(); if (data) { infoPanel.querySelector("#planetImg").src = data.img; infoPanel.querySelector("#objectRadius").innerHTML = `${data.realRadius.toLocaleString()} km`; infoPanel.querySelector("#objectPeriod").innerHTML = `${data.period.toLocaleString()} dias`; infoPanel.querySelector("#objectOrbit").innerHTML = obj.type === 'Sol' ? "Centro" : `${(data.orbit / 1e6).toFixed(1)} mi km`; } // 3. Orquestra a criação de 4 gráficos especializados (Bolhas, Barras, Log e Linhas) // para fornecer contexto astronômico comparativo. const area = infoPanel.querySelector("#chartArea"); area.innerHTML = ""; // Limpa os gráficos do planeta anterior if (obj.type === 'planet') { const sections = [ { title: "Comparaçao de Raio (Escala Real)", fn: createComparisonBubbleChart }, { title: "Distribuição de Massa (Log)", fn: createMassChart }, { title: "Mapeamento de Distância", fn: createOrbitLineChart }, { title: "Duração do Ano (Translação)", fn: createHorizontalBarChart } ]; // Renderização dos cards de gráficos sections.forEach(s => { const card = document.createElement("div"); card.style.cssText = "background: #111; padding: 15px; border-radius: 8px; border: 1px solid #222;"; card.innerHTML = `

${s.title}

`; // Passamos o nome do planeta e a largura do painel (ajustada para as margens) const chartElement = s.fn(obj.name, 370); card.appendChild(chartElement); area.appendChild(card); }); } else { // Mensagem amigável para Sol e Luas (já que os gráficos comparativos são baseados na lista de planetas) area.innerHTML = `

Informações detalhadas de gráficos disponíveis apenas no comparativo de planetas.

`; } infoPanel.style.display = "block"; }; // === Projeção Matemática de Dados Reais === // Esta função é vital: ela converte coordenadas cartesianas (X, Y) reais do espaço // para a posição visual logarítmica no SVG, mantendo a precisão angular. const projectLivePosition = (pos) => { const r = Math.sqrt(pos.x * pos.x + pos.y * pos.y); // Distância Euclidiana Real const scaledR = scaleOrbits.planetScale(r); // Mapeamento Logarítmico const angle = Math.atan2(pos.y, pos.x); // Ângulo real preservado return { x: scaledR * Math.cos(angle), y: scaledR * Math.sin(angle) }; }; // === Motor de Posicionamento Estático === // Calcula a posição teórica de planetas e luas caso os dados da API falhem ou o modo LIVE esteja off. const getObjectPosition = (d, currentTime) => { // (lógica de hierarquia: lua rotaciona ao redor do planeta, que rotaciona ao redor do sol) let angle, orbitRadius; if(d.type === 'planet' || d.type === 'Sol'){ angle = (currentTime / (d.period * 100)) * 2 * Math.PI; orbitRadius = scaleOrbits.planetScale(d.orbit); // Garante que o retorno seja (0, 0) se for o Sol if(d.type === 'Sol') return {x: 0, y: 0}; return { x: orbitRadius * Math.cos(angle), y: orbitRadius * Math.sin(angle) }; } else if(d.type === 'moon'){ // Encontra os dados do planeta pai const parentPlanet = planets.find(p => p.name === d.planet); if(!parentPlanet) return {x: 0, y: 0}; // 1. Posição do planeta pai (relativo ao Sol) const planetAngle = (currentTime / (parentPlanet.period * 100)) * 2 * Math.PI; const planetOrbitRadius = scaleOrbits.planetScale(parentPlanet.orbit); const planetX = planetOrbitRadius * Math.cos(planetAngle); const planetY = planetOrbitRadius * Math.sin(planetAngle); // 2. Posição da lua (relativa ao planeta pai) const moonAngle = (currentTime / (d.period * 50)) * 2 * Math.PI; const moonOrbitRadius = scaleOrbits.moonScale(d.orbit); const moonX = moonOrbitRadius * Math.cos(moonAngle); const moonY = moonOrbitRadius * Math.sin(moonAngle); // Posição final da lua (relativa ao Sol) return { x: planetX + moonX, y: planetY + moonY }; } return { x: 0, y: 0 }; // Fallback }; // === Gerenciador de Dados em Tempo Real (NASA JPL Mode) === const { statusIndicator } = makeLiveButton(svg, async () => { mutable isLiveMode = !mutable isLiveMode; // Adicione uma referência global para as órbitas (se ainda não tiver) const orbitPaths = svg.selectAll("path.orbit-sun"); if (mutable isLiveMode) { // UX: Esconde órbitas estáticas para focar na posição exata atual. orbitPaths.style("display", "none"); statusIndicator.attr("fill", "yellow"); // Amarelo: Carregando liveStatusText.text("Carregando..."); // Fetch assíncrono das efemérides reais via JPL Horizons. mutable livePositions = await fetchAllLivePositions(status => { liveStatusText.text(status); if (status.includes("Erro")) { liveStatusText.attr("fill", "red"); statusIndicator.attr("fill", "red"); // Vermelho: Erro } else { liveStatusText.attr("fill", "lightgreen"); statusIndicator.attr("fill", "green"); // Verde: Ativo } }); // Pooling: Atualiza a posição real a cada 15 segundos para manter a precisão. liveInterval = setInterval(async () => { liveStatusText.text("Atualizando..."); statusIndicator.attr("fill", "yellow"); // Amarelo: Atualizando mutable livePositions = await fetchAllLivePositions(status => { liveStatusText.text("LIVE Ativo: " + status.toLowerCase().replace("sucesso!", "dados atualizados.")); statusIndicator.attr("fill", "green"); // Verde: Ativo }); }, 15000); } else { // Retorna ao modo de simulação matemática. orbitPaths.style("display", "block"); // Modo Simulação (desliga o LIVE) clearInterval(liveInterval); liveInterval = null; liveStatusText.text("Simulação Ativa"); // Limpa o status liveStatusText.attr("fill", "gray"); statusIndicator.attr("fill", "red"); // Vermelho: Inativo } }); // === Indicador de Status LIVE === const liveStatusText = svg.append("text") .attr("x", 220) .attr("y", 673) .attr("fill", "gray") .attr("text-anchor", "start") .style("font-size", "12px") .text(""); const orbitPaths = svg.selectAll("path.orbit-sun"); // === Inicialização do Scenegraph (Sistema Solar) === const { planetGroups, moonsByPlanet, systemGroup } = makeSolarSystem( svg, planets, moons, scaleOrbits, containerAndDimensions.center, (event, d, type) => { // Callback de Clique (Interação) event.stopPropagation(); // Ao selecionar um corpo, pausamos o tempo para permitir o estudo dos gráficos. if (mutable isRunning) { mutable isRunning = false; buttonText.text("Play"); mutable pauseStart = lastRawElapsed; } mutable selectedObject = { ...d, type: type }; updateInfoPanel(mutable selectedObject); // Aciona o Dashboard Vega-Lite // --- LÓGICA DE CÂMERA CINEMATOGRÁFICA --- // Determina o alvo do zoom baseado no modo ativo (Real ou Simulação). let targetX, targetY; if (type === 'moon') { // 1. Se estivermos em modo LIVE, pegamos a posição REAL da NASA para a Lua if (mutable isLiveMode && mutable livePositions?.[d.name]) { const livePos = mutable livePositions[d.name]; const projectedPos = projectLivePosition(livePos); targetX = projectedPos.x; targetY = projectedPos.y; } else { // 2. Se for Simulação, calculamos a posição da Lua somada à do Planeta Pai const parentPlanet = planets.find(p => p.name === d.planet); // Posição do Planeta Pai (Usando a mesma lógica do updatePositions) let pX, pY; if (mutable staticOrbits?.planets?.[parentPlanet.name]) { const el = mutable staticOrbits.planets[parentPlanet.name]; const posAU = auxiliaryOrbitalFunctions.orbitalElementsToXY(el, mutable currentAnimationTime / 100); const AU_TO_KM = 149597870; const rKM = Math.sqrt((posAU.x * AU_TO_KM)**2 + (posAU.y * AU_TO_KM)**2); const angleRad = Math.atan2(posAU.y, posAU.x); const pos = calculateXY(rKM, angleRad, scaleOrbits.planetScale); pX = pos.x; pY = pos.y; } else { const pAngle = (mutable currentAnimationTime / (parentPlanet.period * 100)) * 2 * Math.PI; const pPos = calculateXY(parentPlanet.orbit, pAngle, scaleOrbits.planetScale); pX = pPos.x; pY = pPos.y; } // Posição Relativa da Lua (Simulação) const mAngle = (mutable currentAnimationTime / (d.period * 50)) * 2 * Math.PI; const mR = scaleOrbits.moonScale(d.orbit); const mX = mR * Math.cos(mAngle); const mY = mR * Math.sin(mAngle); // Alvo final é a soma vetorial targetX = pX + mX; targetY = pY + mY; } } else if (d.name === 'Sol') { targetX = 0; targetY = 0; } else if (mutable isLiveMode && mutable livePositions?.[d.name]) { const projectedPos = projectLivePosition(mutable livePositions[d.name]); targetX = projectedPos.x; targetY = projectedPos.y; } else { // Lógica para Planetas (Estático/Simulação) const pos = getPos(d.name, mutable currentAnimationTime); targetX = pos.x; targetY = pos.y; } // Fator de zoom mais potente para Luas para não vermos apenas um borrão const scale = type === 'moon' ? 15 : (type === 'Sol' ? 2 : 5); // Aplica uma transição suave de Interpolação Geométrica para focar no objeto. // A matemática aqui compensa a escala para manter o planeta centralizado no zoom. systemGroup.transition() .duration(1000) .attr("transform", `translate(${containerAndDimensions.center.x}, ${containerAndDimensions.center.y}) scale(${scale}) translate(${-targetX}, ${-targetY})` ); } ); // Desabilita o zoom padrão do D3 para manter o controle total via código (Storytelling Guiado). svg.on(".zoom", null); // Chama a função para criar o cinturão de asteroides const asteroidGroups = makeAsteroidBelt(systemGroup, asteroidBeltData); // === Trajetória de Missão === // Elemento visual (path) que representa a Rota de Transferência de Hohmann // entre os planetas selecionados na UI de Missão. const routePath = systemGroup.append("path") .attr("class", "hohmann-route") .attr("fill", "none") .attr("stroke", "#ff4444") .attr("stroke-width", 2) .attr("stroke-dasharray", "5,5") .style("pointer-events", "none"); // === Utilitários Geométricos === // Converte distâncias lineares (KM) para o sistema de coordenadas SVG (Pixels) // aplicando a distorção Logarítmica para fins de visualização de dados. const calculateXY = (distanceKM, angleRad, scaleFunc) => { const scaledR = scaleFunc(distanceKM); return { x: scaledR * Math.cos(angleRad), y: scaledR * Math.sin(angleRad) }; }; // === Motor de Busca de Posição (Abstração) === // Função polimórfica que resolve a posição de qualquer corpo celeste // priorizando: 1. Dados LIVE (NASA) -> 2. Dados Estáticos (Kepler/GitHub) -> 3. Fallback (Matemático). const getPos = (planetName, time) => { const AU_TO_KM = 149597870; // (lógica de seleção de fonte de dados baseada no estado 'isLiveMode') if (mutable isLiveMode && mutable livePositions?.[planetName]) { return projectLivePosition(mutable livePositions[planetName]); } else if (mutable staticOrbits?.planets?.[planetName]) { const el = mutable staticOrbits.planets[planetName]; const posAU = auxiliaryOrbitalFunctions.orbitalElementsToXY(el, time / 100); const rKM = Math.sqrt((posAU.x * AU_TO_KM)**2 + (posAU.y * AU_TO_KM)**2); const angleRad = Math.atan2(posAU.y, posAU.x); return calculateXY(rKM, angleRad, scaleOrbits.planetScale); } else { const p = planets.find(x => x.name === planetName); return getObjectPosition(p, time); } }; // === Função Principal de Atualização (Frame Update) === // Responsável por calcular e aplicar as novas coordenadas a todos os elementos da cena. const updatePositions = (time) => { // 1. Atualização dos Planetas (Translação em torno do Sol) // No modo LIVE, as posições são fixas pela efeméride da JPL. // No modo Simulação, as posições seguem o cálculo da Equação de Kepler. planetGroups.attr("transform", d => { let x, y; // === LIVE (backend) === if(mutable isLiveMode && mutable livePositions?.[d.name]){ const posKM = mutable livePositions[d.name]; // Posição X/Y em KM const rKM = Math.sqrt(posKM.x * posKM.x + posKM.y * posKM.y); const angleRad = Math.atan2(posKM.y, posKM.x); const pos = calculateXY(rKM, angleRad, scaleOrbits.planetScale); x = pos.x; y = pos.y; // === STATIC (GitHub JSON) === } else if(mutable staticOrbits && mutable staticOrbits.planets?.[d.name]){ // Acessa o objeto do planeta usando a chave correta const el = mutable staticOrbits.planets[d.name]; // Calcula posição orbital em AU (Unidades Astronômicas) const posAU = auxiliaryOrbitalFunctions.orbitalElementsToXY( el, mutable currentAnimationTime / 100 // Ajuste o divisor para a velocidade da simulação ); // CONVERTE DE AU PARA KM (1 AU = ~149.6 milhões de KM) const AU_TO_KM = 149597870; const x_km = posAU.x * AU_TO_KM; const y_km = posAU.y * AU_TO_KM; const rKM = Math.sqrt(x_km * x_km + y_km * y_km); const angleRad = Math.atan2(y_km, x_km); const pos = calculateXY(rKM, angleRad, scaleOrbits.planetScale); x = pos.x; y = pos.y; // === Fallback matemático (se o LIVE falhar) === }else{ const angleRad = (mutable currentAnimationTime / (d.period * 100)) * 2 * Math.PI; const orbitRadiusKM = d.orbit; // Valor em KM do array original const pos = calculateXY(orbitRadiusKM, angleRad, scaleOrbits.planetScale); x = pos.x; y = pos.y; } return `translate(${x}, ${y})`; }); // 2. Atualização das Luas (Hierarquia Local) // Implementa a transformação relativa: Se o Planeta se move, a Lua o acompanha. planetGroups.each(function(planetData) { const planetMoons = moonsByPlanet.get(planetData.name); if (!planetMoons) return; d3.select(this).selectAll("g.moon").attr("transform", d => { // No modo LIVE, subtraímos o vetor Sol-Lua do vetor Sol-Planeta para obter // a posição relativa da Lua em relação ao seu planeta pai. if (mutable isLiveMode && mutable livePositions[d.name] && mutable livePositions[d.planet]) { const liveMoonSun = mutable livePositions[d.name]; const liveParentSun = mutable livePositions[d.planet]; // 2.1 Calcular a posição da Lua relativa ao Planeta Pai (em KM) const moonRelX = liveMoonSun.x - liveParentSun.x; const moonRelY = liveMoonSun.y - liveParentSun.y; // 2.2 Calcular a distância (raio) e o ângulo relativos const rKM = Math.sqrt(moonRelX ** 2 + moonRelY ** 2); const angle = Math.atan2(moonRelY, moonRelX); // 2.3 Usamos a sua escala de luas definida na Célula 4 const scaledR = scaleOrbits.moonScale(rKM); // 2.4 Transformar em coordenadas X, Y escalonadas const x = scaledR * Math.cos(angle); const y = scaledR * Math.sin(angle); // 2.5 Aplicar a translação local return `translate(${x}, ${y})`; } // Fallback: Rotação matemática simples baseada no período sinódico. const moonAngle = (time / (d.period * 50)) * 2 * Math.PI; const moonOrbitRadius = scaleOrbits.moonScale(d.orbit); // Rotaciona primeiro em torno do Planeta (origem local), depois translada para a distância orbital. return `rotate(${moonAngle * 180 / Math.PI}) translate(${moonOrbitRadius}, 0)`; }); }); // 3. Movimento do Cinturão de Asteroides // Animação procedural baseada na distância orbital (orbit_km). // Asteroides mais próximos do Sol movem-se mais rápido (3ª Lei de Kepler simplificada). asteroidGroups.attr("transform", d => { // Ajuste o multiplicador 0.0005 para aumentar ou diminuir a velocidade geral dos asteroides const angleRad = (time * 0.0005 * d.speed) + d.angle; const scaledR = scaleOrbits.planetScale(d.orbit_km); const x = scaledR * Math.cos(angleRad); const y = scaledR * Math.sin(angleRad); return `translate(${x}, ${y})`; }); // === LÓGICA DA ROTA DE TRANSFERÊNCIA (HOHMANN) === // Este bloco calcula a trajetória elíptica de menor energia entre dois planetas. const currentTransfer = transferData; // Verifica se transferData existe e se contém os planetas antes de prosseguir if (currentTransfer && currentTransfer.p1 && currentTransfer.p2) { const { p1, p2, aTrans, e, phaseAngle, r1, r2, transferTime } = currentTransfer; const AU_TO_KM = 149597870; // Obtém a posição angular atual dos planetas de origem e destino. const pos1 = getPos(p1.name, time); const pos2 = getPos(p2.name, time); // 1. Cálculo do Ângulo de Fase: Determina a posição relativa entre os planetas. const angle1Rad = Math.atan2(pos1.y, pos1.x); const angle2Rad = Math.atan2(pos2.y, pos2.x); // Ângulo de fase atual considerando o sentido anti-horário do sistema solar let currentPhase = ((angle2Rad - angle1Rad) * (180 / Math.PI) + 360) % 360; // 2. Detecção de Janela de Lançamento: // Compara o ângulo de fase atual com o ângulo teórico ideal para a transferência. // A rota muda de cor (Vermelho -> Verde) quando a janela de 5 graus é atingida. const isWindowOpen = Math.abs(currentPhase - phaseAngle) < 5 || Math.abs(currentPhase - phaseAngle) > 355; routePath.style("display", "block"); routePath.attr("stroke", isWindowOpen ? "#00ff88" : "#ff4444") .attr("opacity", isWindowOpen ? 1 : 0.4); const direction = r1 > r2 ? -1 : 1; // Ajusta o sentido da órbita (para dentro ou para fora) const rotation = Math.atan2(pos1.y, pos1.x); // 3. Geração da Geometria da Elipse de Transferência: // Mapeia a equação polar da elipse para pontos cartesianos projetados na escala log. const points = d3.range(0, Math.PI + 0.1, 0.1).map(theta => { const angleAdjustment = r1 > r2 ? Math.PI : 0; const r_km = (aTrans * (1 - e * e)) / (1 + e * Math.cos(theta + angleAdjustment)) * AU_TO_KM; const scaledR = scaleOrbits.planetScale(r_km); return [scaledR * Math.cos(direction * theta + rotation), scaledR * Math.sin(direction * theta + rotation)]; }); routePath.attr("d", d3.line()(points)); // 4. Interface em Tempo Real (HUD - Heads-Up Display): // Atualiza o painel de missão com dados dinâmicos sobre a viagem. const statsDiv = document.querySelector("#missionStats"); if (statsDiv) { statsDiv.style.display = "block"; statsDiv.innerHTML = `

Voo estimado: ${Math.round(transferTime)} dias

Distância: ${(aTrans * 149.6).toFixed(1)}M km

Janela: ${isWindowOpen ? "ABERTA" : "AGUARDANDO"}

`; } } else { // Se não houver missão, esconda a rota if (routePath) routePath.style("display", "none"); const statsDiv = document.querySelector("#missionStats"); if (statsDiv) statsDiv.style.display = "none"; } }; // === MOTOR DE ANIMAÇÃO (D3.TIMER) === // O d3.timer funciona como um requestAnimationFrame otimizado para o Observable. const timer = d3.timer(rawElapsed => { // Mantém o último tempo bruto para lógica de pausa/play lastRawElapsed = rawElapsed; // Cálculo do delta entre frames (garante animação suave) const currentFrameTime = performance.now(); const deltaTime = currentFrameTime - lastFrameTime; lastFrameTime = currentFrameTime; // Incrementa o tempo da simulação apenas se o sistema não estiver pausado ou em zoom de inspeção. if(!mutable selectedObject && mutable isRunning){ mutable currentAnimationTime += deltaTime * mutable speed; } // Ciclo de atualização de todos os elementos gráficos. updatePositions(mutable currentAnimationTime); }); // Gerenciamento de Memória: Para o timer e intervalos se a célula for destruída ou reavaliada. invalidation.then(() => { timer.stop(); if (liveInterval) clearInterval(liveInterval); }); return container; }3b:Tb3f,// Componente de interface responsável por exibir os metadados e gráficos Vega-Lite. makeInfoPanel = function(container, width, onCloseHandler) { const infoPanel = document.createElement("div"); // Estilização via DOM API para garantir que o painel flutue à direita com scroll independente. infoPanel.style.position = "absolute"; infoPanel.style.top = "10px"; infoPanel.style.right = "0px"; infoPanel.style.height = "95%"; infoPanel.style.width = "420px"; infoPanel.style.background = "#1a1a1a"; infoPanel.style.padding = "20px"; infoPanel.style.color = "white"; infoPanel.style.boxShadow = "-4px 0 8px rgba(0,0,0,0.5)"; infoPanel.style.display = "none"; infoPanel.style.overflowY = "auto"; infoPanel.style.zIndex = "1000"; infoPanel.style.transition = "right 0.5s ease-in-out"; // Template HTML: Define a estrutura de cabeçalho, imagem do planeta e grid de detalhes técnicos. infoPanel.innerHTML = `

---

RAIO EQUATORIAL

PERÍODO ORBITAL

DISTÂNCIA DO SOL

`; container.appendChild(infoPanel); // Vincula o evento de fechar, que dispara o reset da câmera no sistema solar. infoPanel.querySelector("#closePanelBtn").addEventListener("click", onCloseHandler); return infoPanel; }3c:T73e,// Função assíncrona que consome o backend (Vercel) para obter efemérides em tempo real. async function fetchAllLivePositions(setStatus = () => {}) { setStatus("Carregando..."); // Define o status inicial // Lista de corpos suportados const bodies = [ "Mercury","Venus","Earth","Mars", "Jupiter","Saturn","Uranus","Neptune", "Moon", "Io", "Europa", "Ganymede", "Callisto", "Titan" ]; // Executa múltiplas requisições HTTP em paralelo (Promise.all) para otimizar o tempo de carga. const requests = bodies.map(p => fetch(`https://data-visualization-solar-viz.vercel.app/api/live?body=${p}`) .then(r => r.json()) .then(j => ({ name: p, data: j })) .catch(() => null) ); const results = await Promise.all(requests); const positions = {}; // Mapeamento de nomes: Traduz os termos da API (inglês) para os termos da visualização (português). const nameMap = { "Mercury": "Mercúrio", "Venus": "Vênus", "Earth": "Terra", "Mars": "Marte", "Jupiter": "Júpiter", "Saturn": "Saturno", "Uranus": "Urano", "Neptune": "Netuno", "Moon": "Lua", "Io": "Io", "Europa": "Europa", "Ganymede": "Ganimedes", "Callisto": "Calisto", "Titan": "Titã" }; for (const r of results) { if (!r || !r.data?.position) continue; const ptName = nameMap[r.name]; // Converte para o nome usado no array bodies // Extrai as coordenadas cartesianas heliocêntricas (km) do dia atual. positions[ptName] = { x: r.data.position.x_km, y: r.data.position.y_km }; } // Validação de integridade dos dados e feedback visual via setStatus. const fetchedCount = Object.keys(positions).length; if (fetchedCount === bodies.length) { setStatus("Sucesso!"); } else { setStatus(`Erro: ${fetchedCount} corpos carregados.`); } return positions; }3d:T418,// Cria o controle visual para alternar entre simulação e dados reais. makeLiveButton = function(svg, onToggle){ const g = svg.append("g") .attr("transform","translate(150,660)") .style("cursor","pointer") .on("click", onToggle); // Fundo do botão (agora neutro, a cor do status é o indicador) g.append("rect") .attr("width", 60) .attr("height", 25) .attr("fill", "#333") // Cor de fundo escura .attr("rx", 5); // Texto "LIVE" const text = g.append("text") .attr("x", 27) .attr("y", 17) .attr("fill", "white") .attr("text-anchor","middle") .text("LIVE"); // Indicador de Status: Pequeno LED virtual que muda de cor (Vermelho/Amarelo/Verde). // Permite ao usuário saber se a conexão com a API está ativa ou se houve falha. const statusIndicator = g.append("circle") .attr("cx", 55) .attr("cy", 7) .attr("r", 4) .attr("fill", "red"); // Cor inicial: Inativo // Retornamos a referência ao indicador para uso externo return { g, text, statusIndicator }; };3e:T13dc,// Componente que gera um gráfico de bolhas linear para comparação de escala física. createComparisonBubbleChart = (focusPlanetName, containerWidth) => { // 1. Configurações Adaptáveis: Garante que o gráfico se ajuste à largura do painel lateral. const width = containerWidth || 400; const height = 220; const margin = { top: 50, right: 30, bottom: 40, left: 30 }; // 2. Escala de Tamanho (Linear): // Diferente da visualização principal, aqui usamos d3.scaleLinear para que a // área visual dos círculos represente fielmente a proporção real entre os planetas. const chartHeight = height - margin.top - margin.bottom; const maxRadius = d3.max(planets, d => d.realRadius); const sizeScale = d3.scaleLinear() .domain([0, maxRadius]) .range([3, chartHeight / 2]); // 3. Escala de Posicionamento (Point Scale): // Distribui os planetas uniformemente ao longo do eixo X. const xScale = d3.scalePoint() .domain(planets.map(d => d.name)) .range([margin.left, width - margin.right]) .padding(0.6); // 4. Construção do SVG: const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .style("overflow", "visible") .style("display", "block"); svg.append("line") .attr("x1", margin.left - 10) .attr("x2", width - margin.right + 10) .attr("y1", height - margin.bottom) .attr("y2", height - margin.bottom) .attr("stroke", "#333") .attr("stroke-width", 1); // 5. Renderização dos Planetas: // Os planetas são desenhados como círculos apoiados em uma linha de base comum. const planetGroups = svg.selectAll("g.planet-visual") .data(planets) .join("g") .attr("class", "planet-visual") .attr("transform", d => `translate(${xScale(d.name)}, ${height - margin.bottom})`); planetGroups.append("circle") .attr("class", "planet-circle") .attr("r", d => sizeScale(d.realRadius)) .attr("cy", d => -sizeScale(d.realRadius)) // Garante que a base do círculo toque a linha .attr("fill", d => d.name === focusPlanetName ? d.color : "#444") // Destaque para o planeta selecionado .attr("fill-opacity", d => d.name === focusPlanetName ? 0.85 : 0.4) .attr("stroke", d => d.name === focusPlanetName ? "white" : "#666") .attr("stroke-width", d => d.name === focusPlanetName ? 2 : 1) .style("transition", "all 0.2s ease"); // Transição suave para o hover planetGroups.append("text") .attr("y", 25) .attr("text-anchor", "middle") .attr("fill", d => d.name === focusPlanetName ? "white" : "#888") .style("font-size", "11px") .style("font-family", "sans-serif") .style("font-weight", d => d.name === focusPlanetName ? "600" : "400") .text(d => d.name.substring(0, 3).toUpperCase()); // 6. Camada de Interatividade (Zonas de Captura): // Cria retângulos invisíveis (rect) sobre cada planeta para facilitar a interação // do usuário com o mouse (mouseover/mouseout) e exibição de Tooltips. const tooltip = d3.select("body").selectAll(".bubble-tooltip").data([null]).join("div") .attr("class", "bubble-tooltip") .style("position", "absolute") .style("visibility", "hidden") .style("background", "rgba(15,15,15,0.95)") .style("color", "white") .style("padding", "8px 12px") .style("border", "1px solid #444") .style("border-radius", "4px") .style("font-size", "12px") .style("pointer-events", "none") .style("z-index", "3000") // Z-index alto para sobrepor o painel lateral .style("box-shadow", "0 4px 10px rgba(0,0,0,0.5)"); const step = (width - margin.left - margin.right) / (planets.length - 1 || 1); svg.append("g") .selectAll("rect") .data(planets) .join("rect") .attr("x", d => xScale(d.name) - step / 2) .attr("y", 0) .attr("width", step) .attr("height", height) .attr("fill", "transparent") .style("cursor", "pointer") .on("mouseover", (event, d) => { const targetGroup = svg.selectAll(".planet-visual").filter(p => p.name === d.name); targetGroup.select(".planet-circle") .attr("stroke-width", 3) .attr("stroke", "white") .attr("fill-opacity", 1); targetGroup.select("text").attr("fill", "white"); tooltip.style("visibility", "visible") .html(`${d.name}
Raio: ${d.realRadius.toLocaleString()} km`); }) .on("mousemove", (event) => { tooltip .style("top", (event.pageY - 45) + "px") .style("left", (event.pageX + 15) + "px"); }) .on("mouseout", (event, d) => { const targetGroup = svg.selectAll(".planet-visual").filter(p => p.name === d.name); const isFocus = d.name === focusPlanetName; targetGroup.select(".planet-circle") .attr("stroke", isFocus ? "white" : "#666") .attr("stroke-width", isFocus ? 2 : 1) .attr("fill-opacity", isFocus ? 0.85 : 0.4); targetGroup.select("text").attr("fill", isFocus ? "white" : "#666"); tooltip.style("visibility", "hidden"); }); return svg.node(); }3f:T1259,// Componente que gera um gráfico de barras logarítmico para comparação de massas planetárias. createMassChart = (focusPlanetName, containerWidth) => { // 1. Configurações de Dimensão: Ajuste dinâmico para o layout lateral. const width = containerWidth || 400; const height = 220; const margin = { top: 20, right: 20, bottom: 40, left: 50 }; // 2. Escala Logarítmica (Vital): // A massa de Júpiter é ~5.700 vezes maior que a de Mercúrio. // Em uma escala linear, as barras dos planetas rochosos seriam invisíveis (pixels sub-unidade). // A escala logarítmica permite comparar ordens de grandeza na mesma visualização. const yScale = d3.scaleLog() .domain([0.1, d3.max(planets, d => d.mass)]) // Domínio baseado em 10^24 kg .range([height - margin.bottom, margin.top]); // Escala Band para distribuição categórica dos nomes no eixo X. const xScale = d3.scaleBand() .domain(planets.map(d => d.name)) .range([margin.left, width - margin.right]) .padding(0.3); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .style("overflow", "visible") .style("display", "block"); // 3. Eixos Estilizados: // O eixo Y (Log) exibe ticks formatados para refletir a escala de potências. svg.append("g") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(yScale).ticks(3, ".1f")) .call(g => { g.selectAll("text").attr("fill", "#888").style("font-size", "10px"); g.select(".domain").attr("stroke", "#444"); g.selectAll("line").attr("stroke", "#222"); }); svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(xScale)) .call(g => { g.selectAll("text").attr("fill", "#bbb").style("font-size", "10px"); g.select(".domain").attr("stroke", "#444"); }); // 4. Renderização das Barras: // As barras são coloridas para destacar o planeta selecionado no sistema solar principal. const planetGroups = svg.selectAll("g.planet-bar-group") .data(planets) .join("g") .attr("class", "planet-bar-group"); planetGroups.append("rect") .attr("class", "visible-bar") .attr("x", d => xScale(d.name)) .attr("y", d => yScale(d.mass)) .attr("width", xScale.bandwidth()) .attr("height", d => height - margin.bottom - yScale(d.mass)) .attr("fill", d => d.name === focusPlanetName ? d.color : "#808080") .attr("fill-opacity", 0.7) .attr("stroke", d => d.name === focusPlanetName ? d.color : "none") .attr("stroke-width", 1.5) .style("transition", "fill 0.2s, stroke 0.2s, fill-opacity 0.2s"); // 5. Camada de Interação (UX): // Implementação de overlays transparentes mais largos que as barras. // Isso melhora a Fitts's Law, facilitando o hover em barras muito finas ou pequenas. const tooltip = d3.select("body").selectAll(".mass-tooltip").data([null]).join("div") .attr("class", "mass-tooltip") .style("position", "absolute") .style("visibility", "hidden") .style("background", "rgba(0,0,0,0.95)") .style("color", "white") .style("padding", "8px 12px") .style("border", "1px solid #444") .style("border-radius", "4px") .style("font-size", "12px") .style("pointer-events", "none") .style("z-index", "3000"); planetGroups.append("rect") .attr("x", d => xScale(d.name) - (xScale.step() * xScale.paddingInner() / 2)) .attr("y", margin.top) .attr("width", xScale.step()) .attr("height", height - margin.top - margin.bottom) .attr("fill", "transparent") .style("cursor", "pointer") .on("mouseover", (event, d) => { // Exibe a massa real em escala de 10^24 kg no tooltip. tooltip.style("visibility", "visible") .html(`${d.name}
Massa: ${d.mass.toLocaleString()} × 10²⁴ kg`); // Feedback visual de destaque (stroke white) ao interagir. d3.select(event.currentTarget.parentNode).select(".visible-bar") .attr("stroke", "white") .attr("stroke-width", 2) .attr("fill-opacity", 1); }) .on("mousemove", (event) => { tooltip.style("top", (event.pageY - 45) + "px") .style("left", (event.pageX + 15) + "px"); }) .on("mouseout", (event, d) => { tooltip.style("visibility", "hidden"); // Retorna ao estado original (com destaque se for o planeta focado). const isFocus = d.name === focusPlanetName; d3.select(event.currentTarget.parentNode).select(".visible-bar") .attr("stroke", isFocus ? d.color : "none") .attr("stroke-width", isFocus ? 1.5 : 0) .attr("fill-opacity", 0.7); }); return svg.node(); }40:T1519,// Gera um gráfico de linha (slope chart) para visualizar a progressão das distâncias orbitais. createOrbitLineChart = (focusPlanetName, containerWidth) => { // 1. Configurações de Dimensão: Adaptadas para o painel de detalhes (Dashboard). const width = containerWidth || 400; const height = 220; const margin = { top: 30, right: 30, bottom: 40, left: 60 }; const maxOrbitKM = 4.5e9; // Limite baseado na órbita de Netuno (~4.5 bilhões de km). // 2. Escala Linear de Distância: // Diferente da simulação principal, aqui a escala linear revela a verdadeira // disparidade de distância entre os planetas internos (amontoados perto do zero) // e os externos (vastamente distribuídos). const yScale = d3.scaleLinear() .domain([0, maxOrbitKM]) .range([height - margin.bottom, margin.top]); const xScale = d3.scalePoint() .domain(planets.map(d => d.name)) .range([margin.left, width - margin.right]) .padding(0.5); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .style("overflow", "visible") .style("display", "block"); /// 3. Eixos e Grade: // Formatação em Bilhões de km (B km) para facilitar a leitura de grandes magnitudes. const yTickValues = [0, 1.5e9, 3e9, 4.5e9]; const yAxis = d3.axisLeft(yScale) .tickValues(yTickValues) .tickFormat(d => d === 0 ? "0" : (d / 1e9).toFixed(1) + "B km"); svg.append("g") .attr("transform", `translate(${margin.left},0)`) .call(yAxis) .call(g => { g.selectAll("text").attr("fill", "#888").style("font-size", "9px"); g.selectAll("line").attr("stroke", "#222"); g.select(".domain").attr("stroke", "#444"); // Linhas de grade horizontais g.selectAll(".tick line") .attr("x2", width - margin.left - margin.right) .attr("stroke-opacity", 0.1); }); svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(xScale)) .call(g => { g.selectAll("text").attr("fill", "#bbb").style("font-size", "9px"); g.select(".domain").attr("stroke", "#444"); }); // 4. Linha de Conexão Orbital (Path): // O uso de d3.line() aqui serve para enfatizar a tendência de crescimento orbital. svg.append("path") .datum(planets) .attr("fill", "none") .attr("stroke", "#333") .attr("stroke-width", 2) .attr("d", d3.line() .x(d => xScale(d.name)) .y(d => yScale(d.orbit)) ); const dots = svg.append("g") .selectAll("circle") .data(planets) .join("circle") .attr("class", "visible-dot") .attr("cx", d => xScale(d.name)) .attr("cy", d => yScale(d.orbit)) .attr("r", 4) .attr("fill", d => d.name === focusPlanetName ? d.color : "#444") .attr("stroke", d => d.name === focusPlanetName ? d.color : "#666") .attr("stroke-width", d => d.name === focusPlanetName ? 2 : 1) .attr("fill-opacity", d => d.name === focusPlanetName ? 1 : 0.5); // 5. Pontos de Dados e Ênfase no Foco: // Adiciona um "halo" ou aro de destaque (stroke-dasharray) ao redor do planeta selecionado. const focusData = planets.find(p => p.name === focusPlanetName); if (focusData) { svg.append("circle") .attr("cx", xScale(focusData.name)) .attr("cy", yScale(focusData.orbit)) .attr("r", 10) .attr("fill", "none") .attr("stroke", focusData.color) .attr("stroke-width", 1.5) .attr("stroke-dasharray", "2,2") .style("filter", "drop-shadow(0 0 3px " + focusData.color + ")"); } // 6. Camada de Interação: // Zonas de captura verticais (rect) facilitam a ativação de tooltips em telas de alta densidade. const tooltip = d3.select("body").selectAll(".orbit-tooltip").data([null]).join("div") .attr("class", "orbit-tooltip") .style("position", "absolute") .style("visibility", "hidden") .style("background", "rgba(0,0,0,0.95)") .style("color", "white") .style("padding", "8px 12px") .style("border", "1px solid #444") .style("border-radius", "4px") .style("font-size", "12px") .style("pointer-events", "none") .style("z-index", "3000"); const step = (width - margin.left - margin.right) / (planets.length - 1 || 1); svg.append("g") .selectAll("rect") .data(planets) .join("rect") .attr("x", d => xScale(d.name) - step / 2) .attr("y", 0) .attr("width", step) .attr("height", height) .attr("fill", "transparent") .style("cursor", "pointer") .on("mouseover", (event, d) => { tooltip.style("visibility", "visible") .html(`${d.name}
Distância: ${(d.orbit / 1e6).toFixed(1)} mi km`); svg.selectAll(".visible-dot") .filter(p => p.name === d.name) .attr("stroke", "white") .attr("stroke-width", 2) .attr("fill-opacity", 1); }) .on("mousemove", (event) => { tooltip.style("top", (event.pageY - 45) + "px") .style("left", (event.pageX + 15) + "px"); }) .on("mouseout", (event, d) => { tooltip.style("visibility", "hidden"); const isFocus = d.name === focusPlanetName; svg.selectAll(".visible-dot") .filter(p => p.name === d.name) .attr("stroke", isFocus ? d.color : "#666") .attr("stroke-width", isFocus ? 2 : 1) .attr("fill-opacity", isFocus ? 1 : 0.5); }); return svg.node(); }41:T121d,// Gera um gráfico de barras horizontais para comparar o tempo de translação (ano) de cada planeta. createHorizontalBarChart = (focusPlanetName, containerWidth) => { // 1. Configurações de Dimensão: Altura ligeiramente maior (250px) para acomodar todos os labels no eixo Y. const width = containerWidth || 400; const height = 250; const margin = { top: 10, right: 50, bottom: 40, left: 80 }; // 2. Processamento de Dados e Escalas: // Ordena os dados pelo período orbital para criar um ranking visual intuitivo. const data = [...planets].sort((a, b) => a.period - b.period); const xScale = d3.scaleLinear() .domain([0, d3.max(data, d => d.period)]) .range([0, width - margin.left - margin.right]); // d3.scaleBand para o eixo Y facilita a leitura dos nomes por extenso à esquerda. const yScale = d3.scaleBand() .domain(data.map(d => d.name)) .range([height - margin.top - margin.bottom, 0]) .padding(0.2); const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .style("display", "block") .style("overflow", "visible"); const g = svg.append("g") .attr("transform", `translate(${margin.left},${margin.top})`); // 3. Eixos Estilizados: // Formata os valores do eixo X com 'd' (dias) para contexto imediato da métrica temporal. g.append("g") .attr("transform", `translate(0,${height - margin.top - margin.bottom})`) .call(d3.axisBottom(xScale).ticks(4).tickFormat(d => `${d.toLocaleString()}d`)) .call(g => g.selectAll("text").attr("fill", "#666").style("font-size", "10px")) .call(g => g.select(".domain").attr("stroke", "#333")); g.append("g") .call(d3.axisLeft(yScale)) .call(g => g.selectAll("text").attr("fill", "#bbb").style("font-size", "10px")) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line").remove()); // 4. Tooltip Dinâmico: // Exibe o valor exato em dias terrestres, auxiliando na compreensão das enormes escalas // de tempo de Netuno em comparação aos planetas internos. const tooltip = d3.select("body").selectAll(".chart-tooltip").data([null]).join("div") .attr("class", "chart-tooltip") .style("position", "absolute") .style("visibility", "hidden") .style("background", "rgba(0,0,0,0.95)") .style("color", "white") .style("padding", "8px 12px") .style("border", "1px solid #444") .style("border-radius", "4px") .style("font-size", "12px") .style("pointer-events", "none") .style("z-index", "3000"); // 5. Renderização e Interatividade: // Implementa "Zonas de Captura" largas (rect transparentes) para melhorar a experiência // de interação (Fitts's Law), permitindo o hover em qualquer lugar da linha do planeta. const interactionGroups = g.selectAll(".interact-group") .data(data) .join("g") .attr("class", "interact-group"); // Barras Visíveis interactionGroups.append("rect") .attr("class", "visible-bar") .attr("x", 0) .attr("y", d => yScale(d.name)) .attr("height", yScale.bandwidth()) .attr("width", d => xScale(d.period)) .attr("fill", d => d.name === focusPlanetName ? d.color : "#333") // Destaque por cor .attr("fill-opacity", d => d.name === focusPlanetName ? 1 : 0.6) .style("transition", "fill 0.2s, stroke 0.2s"); // Retângulos de Captura (Invisíveis e largos para facilitar o hover) interactionGroups.append("rect") .attr("x", 0) .attr("y", d => yScale(d.name)) .attr("width", width - margin.left - margin.right) .attr("height", yScale.bandwidth()) .attr("fill", "transparent") .style("cursor", "pointer") .on("mouseover", (event, d) => { const isFocus = d.name === focusPlanetName; d3.select(event.currentTarget.parentNode).select(".visible-bar") .attr("fill", isFocus ? d.color : "#666") .attr("stroke", "white") .attr("stroke-width", 1.5) .attr("fill-opacity", 1); tooltip.style("visibility", "visible") .html(`${d.name}
Translação: ${d.period.toLocaleString()} dias`); }) .on("mousemove", (event) => { tooltip.style("top", (event.pageY - 45) + "px") .style("left", (event.pageX + 15) + "px"); }) .on("mouseout", (event, d) => { const isFocus = d.name === focusPlanetName; d3.select(event.currentTarget.parentNode).select(".visible-bar") .attr("fill", isFocus ? d.color : "#333") .attr("stroke", "none") .attr("fill-opacity", isFocus ? 1 : 0.6); tooltip.style("visibility", "hidden"); }); return svg.node(); }42:T7c3,// Este objeto encapsula a física por trás das trajetórias interplanetárias. orbitalPhysics = { // Constante Gravitacional do Sol (μ) em unidades astronômicas e dias. const muSun = 0.000295912208; // AU³/dia² // Implementa a Manobra de Transferência de Hohmann: a rota de menor energia (Delta-V) // para transitar entre duas órbitas circulares coplanares. function calculateHohmann(r1, r2) { const aTrans = (r1 + r2) / 2; // Semi-eixo maior da elipse de transferência // Cálculo de velocidades orbitais e impulsos necessários (Delta-V) const v1 = Math.sqrt(muSun / r1); const v2 = Math.sqrt(muSun / r2); const vTrans1 = Math.sqrt(muSun * (2 / r1 - 1 / aTrans)); const vTrans2 = Math.sqrt(muSun * (2 / r2 - 1 / aTrans)); const deltaV1 = Math.abs(vTrans1 - v1); // Queima na partida const deltaV2 = Math.abs(v2 - vTrans2); // Tempo de voo: metade do período orbital da elipse de transferência (Leis de Kepler) const transferTime = Math.PI * Math.sqrt(Math.pow(aTrans, 3) / muSun); // Ângulo de Fase Ideal: Posição relativa em que o alvo deve estar no momento do lançamento. const omega2 = Math.sqrt(muSun / Math.pow(r2, 3)); const phaseAngle = (180 - omega2 * transferTime * (180 / Math.PI)) % 360; return { deltaV1, deltaV2, transferTime, phaseAngle, aTrans, e: Math.abs(r1 - r2) / (r1 + r2) }; } // Estima em quantos dias ocorrerá a próxima janela de lançamento ideal, // baseando-se na velocidade angular relativa entre os dois corpos. function getLaunchWindow(currentAngle, idealAngle, r1, r2) { const n1 = Math.sqrt(muSun / Math.pow(r1, 3)); const n2 = Math.sqrt(muSun / Math.pow(r2, 3)); const relativeVelocity = Math.abs(n1 - n2); let diffRad = (idealAngle - currentAngle) * (Math.PI / 180); while (diffRad < 0) diffRad += 2 * Math.PI; return diffRad / relativeVelocity; // Retorna dias } return { calculateHohmann, getLaunchWindow }; }43:T464,// Processador que transforma a intenção de missão em dados geométricos para o SVG. transferData = { if (!mission) return null; const p1 = planets.find(p => p.name === mission.origin); const p2 = planets.find(p => p.name === mission.target); if (!p1 || !p2) return null; const r1 = p1.a_AU; const r2 = p2.a_AU; const aTrans = (r1 + r2) / 2; const e = Math.abs(r1 - r2) / (r1 + r2); // Excentricidade da elipse de transferência // Cálculo robusto do ângulo de fase ideal (Phase Angle). // Determina onde o planeta de destino precisa estar em relação ao de origem // para que a sonda o encontre no periastro/apoastro da elipse. const phaseAngle = (180 * (1 - Math.pow(aTrans / r2, 1.5))) % 360; // Ajuste de direção: Viagens para fora (Ex: Terra -> Marte) vs para dentro (Ex: Terra -> Vênus). const correctedPhaseAngle = r1 < r2 ? (phaseAngle + 360) % 360 : (360 - phaseAngle); // Tempo de transferência em dias terrestres. const transferTime = 365.25 * 0.5 * Math.pow(aTrans, 1.5); return { p1, p2, aTrans, e, phaseAngle: correctedPhaseAngle, r1, r2, transferTime }; }44:[] 30:{"id":"aba6f5ac5d71c9f3","slug":null,"title":"SolarViz: Visualização Interativa do Sistema Solar e Rotas de Navegação Espacial","thumbnail":"9aa68cfae9508d51c60121a50c6738f1aa9324dabb6c3e9d87b846d08cd38a13","access_level":"unlisted","create_time":"$D2025-11-22T00:13:05.312Z","update_time":"$D2026-01-21T07:06:38.003Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"52358096756b93e4","login":"data-visualization100","name":"Data Visualization","avatar_url":"https://avatars-next.observableusercontent.com/7faa48c6d1eea950839ae2b21e940b96018aa50b0f6b6f6bdd787bc498e3f589","tier":"starter_2024","bio":""},"version":840,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"6594513d258c5538","login":"davi-teixeira","name":"Davi Teixeira","avatar_url":"https://avatars-next.observableusercontent.com/a71795452f4ffc706d70dc7216622b240c10affeeff781c4c94e7bfdbcbb903b","tier":null,"bio":""}],"members":[{"type":"individual","id":"6594513d258c5538","login":"davi-teixeira","name":"Davi Teixeira","avatar_url":"https://avatars-next.observableusercontent.com/a71795452f4ffc706d70dc7216622b240c10affeeff781c4c94e7bfdbcbb903b","tier":null,"role":"editor"},{"type":"team","id":"52358096756b93e4","login":"data-visualization100","name":"Data Visualization","avatar_url":"https://avatars-next.observableusercontent.com/7faa48c6d1eea950839ae2b21e940b96018aa50b0f6b6f6bdd787bc498e3f589","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"SolarViz: Visualização Interativa do Sistema Solar e Rotas de Navegação Espacial","cells":[{"id":257,"value":"# SolarViz: Visualização Interativa do Sistema Solar e Rotas de Navegação Espacial\n\nGitHub: https://github.com/daviteixeira-dev/Data-Vizualization-SolarViz","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":601,"value":"## 01 Importação do D3","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":14,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":274,"value":"## 02. Planetas","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":18,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"## 03. Luas","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":77,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":269,"value":"## 04. Escalas das orbitas dos planetas e das luas","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":21,"value":"// Define as funções de mapeamento matemático para converter distâncias astronômicas reais em pixels.\nscaleOrbits = {\n const minOrbitKM = 5e7; // Limite inferior para escala (pericentro de Mercúrio aprox.)\n const maxOrbitKM = 4.5e9; // Limite superior (órbita de Netuno)\n\n // d3.scaleLog é essencial aqui: as distâncias no sistema solar crescem exponencialmente.\n // O logaritmo permite que Mercúrio e Netuno sejam visíveis na mesma tela sem que \n // os planetas internos fiquem \"espremidos\" no centro.\n const planetScale = d3.scaleLog()\n .domain([minOrbitKM, maxOrbitKM])\n .range([30, 300]); // Mapeia km para um raio visual de 30px a 300px no SVG.\n\n // Escala para as órbitas das luas em relação ao seu planeta pai.\n const moonScale = d3.scaleLog()\n .domain([1e5, 4e6])\n .range([8, 25]);\n\n return { planetScale, moonScale };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"## 05. Variáveis de estado da animação","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":791,"value":"// Controle de fluxo da simulação. \n// No Observable, 'mutable' permite que células externas modifiquem esses valores \n// e outras células reajam a essas mudanças (reatividade).","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":583,"value":"### 05.1 Controle de reprodução (play/pause)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":209,"value":"// Booleano que determina se o tempo da simulação está avançando.\nmutable isRunning = true;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":586,"value":"### 05.2 Timestamp do início da pausa","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":215,"value":"// Registra o momento exato em que o usuário clicou em 'Pause'.\nmutable pauseStart = 0;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":588,"value":"### 05.3 Soma de pausas anteriores","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":217,"value":"// Acumula o tempo total que o sistema ficou pausado. \n// Subtraímos este valor do timestamp global para que os planetas não \"saltem\" \n// de posição ao despausar.\nmutable accumulatedPauseTime = 0;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"## 06. Container e dimensões","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":140,"value":"// Define as propriedades espaciais da cena principal.\ncontainerAndDimensions = {\n const width = 1160; // Largura otimizada para o layout do Observable\n const height = 700; // Altura da área de visualização\n const center = { x: width/2, y: height/2 }; // Ponto (0,0) astronômico (Sol) no centro da tela\n\n return { width, height, center };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"## 07. Criação do Container + SVG","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":152,"value":"// Função responsável por gerar os elementos de interface (DOM e SVG).\nmakeContainerCell = function(width, height) {\n // Cria uma div pai para permitir sobreposição de elementos (como tooltips).\n const container = document.createElement(\"div\");\n container.style.position = \"relative\";\n\n // Inicializa o elemento SVG onde as órbitas e planetas 2D serão desenhados.\n const svg = d3.create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .style(\"background\", \"#000033\") // Azul marinho profundo para representar o espaço\n .node()\n\n container.appendChild(svg);\n\n // Retorna o container DOM e a seleção D3 do SVG para encadeamento de métodos.\n return { container, svg: d3.select(svg) };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"## 08. Fundo Estrelado","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":174,"value":"// Gera uma camada estética de estrelas procedurais para aumentar a imersão.\nmakeStarfield = function(svg, width, height, n = 300) {\n // Cria um array de 300 pontos com coordenadas e tamanhos aleatórios.\n const stars = d3.range(n).map(() => ({\n x: Math.random() * width,\n y: Math.random() * height,\n r: Math.random() * 1.5 // Variação leve no tamanho para simular brilho/distância\n }));\n\n // Renderiza as estrelas como círculos estáticos no fundo do SVG.\n svg.selectAll(\"circle.star\")\n .data(stars)\n .join(\"circle\")\n .attr(\"class\", \"star\")\n .attr(\"cx\", d => d.x)\n .attr(\"cy\", d => d.y)\n .attr(\"r\", d => d.r)\n .attr(\"fill\", \"white\")\n .attr(\"opacity\", 0.8);\n\n return { stars, svg }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":255,"value":"## 09. Botão Play/Pause","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":185,"value":"// Cria a interface de controle de execução da simulação.\nmakePlayPauseButton = function(svg, onToggle) {\n // Grupo (g) que agrupa os elementos visuais do botão para facilitar o posicionamento e eventos.\n const group = svg.append(\"g\")\n .attr(\"transform\", \"translate(10, 660)\") // Posiciona no canto inferior esquerdo\n .style(\"cursor\", \"pointer\")\n .on(\"click\", onToggle); // Callback que alterna o estado da variável 'isRunning'\n\n // Desenha o corpo do botão com cantos arredondados.\n group.append(\"rect\")\n .attr(\"width\", 55)\n .attr(\"height\", 25)\n .attr(\"fill\", \"#555\")\n .attr(\"rx\", 5);\n\n // Rótulo de texto centralizado no botão.\n const text = group.append(\"text\")\n .attr(\"x\", 27.5)\n .attr(\"y\", 17)\n .attr(\"fill\", \"white\")\n .attr(\"text-anchor\", \"middle\")\n .attr(\"dominant-baseline\", \"middle\")\n .style(\"font-size\", \"12px\")\n .text(\"Pause\"); // Estado inicial (simulação começando ativa)\n\n return { group, text };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":306,"value":"## 10. Menu de Velocidade","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":597,"value":"### 10.1 Variável de velocidade","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":289,"value":"// Fator de escala para o tempo. \n// 1 = Tempo real da simulação; >1 = Aceleração temporal; <1 = Câmera lenta.\nmutable speed = 1;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":599,"value":"### 10.2 Controles","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":279,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":322,"value":"## 11. Encapsulamento do Sistema Solar","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":310,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":344,"value":"## 12. Geração dos dados para os asteroides","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":328,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":346,"value":"## 13. Renderização dos asteroides","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":330,"value":"// Renderiza visualmente os asteroides gerados na Célula 12 no grupo principal do sistema.\nmakeAsteroidBelt = (systemGroup, asteroids) => {\n // Cria um grupo () para cada asteroide, que será usado posteriormente para aplicar a transformação (translação).\n const asteroidGroups = systemGroup.selectAll(\"g.asteroid\")\n .data(asteroids)\n .join(\"g\")\n .attr(\"class\", \"asteroid\");\n\n // Adiciona o elemento visual (círculo) dentro de cada grupo.\n asteroidGroups.append(\"circle\")\n .attr(\"cx\", 0)\n .attr(\"cy\", 0)\n .attr(\"r\", d => d.radius)\n .attr(\"fill\", \"gray\")\n .attr(\"fill-opacity\", d3.randomUniform(0.2, 0.7)()); // Opacidade variável para efeito de profundidade.\n\n return asteroidGroups;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":512,"value":"## 14. Carregar Elementos Orbitais do GitHub","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":508,"value":"// Esta célula garante que os dados orbitais detalhados e atualizados da JPL (via GitHub Actions) \n// estejam disponíveis no ambiente do Observable antes que as funções Keplerianas sejam executadas.\nasync function fetchStaticOrbits() {\n const url = \"https://raw.githubusercontent.com/daviteixeira-dev/Data-Visualization-SolarViz/main/data/planets_static.json\";\n return fetch(url).then(r => r.json());\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":517,"value":"## 14.1 Cache dos Elementos Orbitais","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":515,"value":"// Guarda o resultado do Fetch\nmutable staticOrbits = null;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":522,"value":"## 15. Funções Orbitais Auxiliares","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":520,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":571,"value":"### 15.1 Tempo atual da animação","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":569,"value":"// Variável de estado para rastrear o tempo decorrido da simulação.\nmutable currentAnimationTime = 0;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":627,"value":"## 16. Gerar Pontos da Órbita","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":625,"value":"$38","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":745,"value":"## 17. Tela de Planejamento da Missão","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":713,"value":"$39","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":325,"value":"## 18. Viewof Sistema Solar + Animação","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":26,"value":"$3a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":407,"value":"### 18.1 Estado da Seleção","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":371,"value":"// Singleton que gerencia qual corpo celeste está em foco no sistema.\n// Atua como gatilho reativo para a abertura do painel de detalhes.\nmutable selectedObject = null;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":405,"value":"### 18.2 Estado do painel lateral","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":373,"value":"// Booleano de controle de visibilidade da interface de dados Vega-Lite.\nmutable isPanelOpen = false;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":403,"value":"## 19. Painel de Informações Lateral","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":377,"value":"$3b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":433,"value":"## 20. Estado global do modo LIVE","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":617,"value":"### 20.1 Modo de operação","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":429,"value":"// Controle mestre do modo de operação. \n// false = Simulação Kepleriana; true = Sincronização real com a NASA.\nmutable isLiveMode = false;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":620,"value":"### 20.2 Cache local das posições LIVE","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":431,"value":"// Estrutura de dados que armazena as últimas coordenadas (x, y) recebidas da API.\n// Serve como fonte de verdade para a renderização no modo LIVE.\nmutable livePositions = {};","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":436,"value":"## 21. Fetch LIVE para TODOS os corpos","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":438,"value":"$3c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":452,"value":"## 22. Botão LIVE","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":454,"value":"$3d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":680,"value":"## 23. Dashboard Analítico","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":682,"value":"### 23.1 Gráfico de bolhas comparativo","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":663,"value":"$3e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":684,"value":"### 23.2 Gráfico de massa","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":665,"value":"$3f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":686,"value":"### 23.3 Gráfico de linha orbital","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":667,"value":"$40","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":689,"value":"### 23.4 Gráfico de barras horizontais","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":669,"value":"$41","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":691,"value":"## 25. Mission Planner","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":695,"value":"### 25.1 Física Orbital","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":693,"value":"$42","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":701,"value":"### 25.2 Estado da Missão","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":711,"value":"// Variável reativa que armazena a intenção de viagem do usuário (Origem -> Destino).\nmutable mission = null;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":705,"value":"### 25.3 Lógica da Rota de Transferência","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":703,"value":"$43","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W44","stdlib":"1"}} 31:"$30:body"