Previsão de mortalidade

Previsão da taxa central de mortalidade para os anos 2024-2070

Gráfico

prev_ibge = await FileAttachment('dados/base_dados/projecoes_ibge.csv').csv()
prev_arima_ets = await FileAttachment('dados/arima-ets/previsoes_2020_2070.csv').csv()
prev_lm = await FileAttachment('dados/lc-lm/previsoes_lm.csv').csv()
prev_lc = await FileAttachment('dados/lc-lm/previsoes_lc.csv').csv()
prev_comb = await FileAttachment('dados/combinado/previsoes_2020_2070_comb.csv').csv()

modelos = ["ARIMA+ETS", "Lee-Carter", "Lee-Miller", "IBGE", "MLP-Shallow"]
regioes = ["Brasil", "Centro-Oeste", "Nordeste", "Norte", "Sudeste", "Sul", "Acre", "Alagoas", "Amapá", "Amazonas", "Bahia", "Ceará", "Distrito Federal", "Espírito Santo", "Goiás", "Maranhão", "Mato Grosso", "Mato Grosso do Sul", "Minas Gerais", "Pará", "Paraíba", "Paraná", "Pernambuco", "Piauí", "Rio de Janeiro", "Rio Grande do Norte", "Rio Grande do Sul", "Rondônia", "Roraima", "Santa Catarina", "São Paulo", "Sergipe", "Tocantins"]

// Definição do componente reativo
// Define o componente de seleção
viewof seletores2 = {
  const form = html`<form style="
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
  ">
    <!-- Select para Região -->
    <div style="min-width: 200px; max-width: 300px;">
      <label style="display: block; text-align: center; margin-bottom: 8px;">Local:</label>
      <select name="regiao" style="
        display: block;
        margin: 0 auto;
        padding: 6px 12px;
        border: 1px solid #ccc;
        border-radius: 20px;
        font-size: 16px;
        text-align: center;
        width: fit-content;
        min-width: 180px;
        background-color: #f8f9fa;
      ">
        ${regioes.map(r => `<option value="${r}">${r}</option>`).join('')}
      </select>
    </div>
    
    <!-- Checkboxes para Modelos -->
    <div style="min-width: 200px; max-width: 300px;">
      <label style="display: block; text-align: center; margin-bottom: 8px;">Modelo:</label>
      <select name="modelo" style="
        display: block;
        margin: 0 auto;
        padding: 6px 12px;
        border: 1px solid #ccc;
        border-radius: 20px;
        font-size: 16px;
        text-align: center;
        width: fit-content;
        min-width: 180px;
        background-color: #f8f9fa;
      ">
        ${modelos.map(r => `<option value="${r}">${r}</option>`).join('')}
      </select>
    </div>
    
    <!-- Radio para Sexo -->
    <div style="min-width: 200px; max-width: 300px;">
      <label style="display: block; text-align: center; margin-bottom: 8px;">Sexo:</label>
      <div style="
        display: flex;
        gap: 15px;
        justify-content: center;
      ">
        <label style="display: flex; align-items: center; gap: 5px;">
          <input type="radio" name="sexo" value="Ambos" checked>
          Ambos
        </label>
        <label style="display: flex; align-items: center; gap: 5px;">
          <input type="radio" name="sexo" value="Homens">
          Homens
        </label>
        <label style="display: flex; align-items: center; gap: 5px;">
          <input type="radio" name="sexo" value="Mulheres">
          Mulheres
        </label>
      </div>
    </div>
  </form>`;
  
  // Definir valor inicial
  form.value = {
    regiao: regioes[0],
    modelo: 'ARIMA+ETS',
    sexo: 'Ambos'
  };
  
  // Atualizar valor ao modificar select
  form.querySelector('select[name="regiao"]').addEventListener('change', e => {
    form.value = {
      ...form.value,
      regiao: e.target.value
    };
    form.dispatchEvent(new Event('input'));
  });
  
  // Atualizar valor ao modificar checkboxes
  form.querySelector('select[name="modelo"]').addEventListener('change', e => {
    form.value = {
      ...form.value,
      modelo: e.target.value
    };
    form.dispatchEvent(new Event('input'));
  });
  
  // Atualizar valor ao modificar radios
  const radios = form.querySelectorAll('input[name="sexo"]');
  for (const radio of radios) {
    radio.addEventListener('change', () => {
      form.value = {
        ...form.value,
        sexo: radio.value
      };
      form.dispatchEvent(new Event('input'));
    });
  }
  
  return form;
}

// Extrair valores individuais em células separadas
regiao2 = seletores2.regiao
modelo2 = seletores2.modelo
sexo = seletores2.sexo

data_filter0 = prev_ibge.filter(d => d.regiao === regiao2 && d.Sexo === sexo).map(d => ({
  ano: +d.Ano,
  faixa: d.faixa_etaria,
  prev: Math.log(d.nqx)
}))

data_filter1 = prev_arima_ets.filter(d => d.LOCAL === regiao2 && d.SEXO === sexo).map(d => ({
  ano: +d.ANO,
  faixa: d.IDADE,
  prev: Math.log(d.Previsao)
}))

data_filter2 = prev_lm.filter(d => d.regiao === regiao2 && d.taxa === sexo).map(d => ({
  ano: +d.ano,
  faixa: d.Faixa_Etaria,
  prev: Math.log(d.previsto)
}))

data_filter3 = prev_lc.filter(d => d.regiao === regiao2 && d.taxa === sexo).map(d => ({
  ano: +d.ano,
  faixa: d.Faixa_Etaria,
  prev: Math.log(d.previsto)
}))

data_filter4 = prev_comb.filter(d => d.LOCAL === regiao2 && d.SEXO === sexo).map(d => ({
  ano: +d.ANO,
  faixa: d.IDADE,
  prev: Math.log(d.Previsao)
}))

// Função principal para criar gráficos
function createChart(data, title) {

  const ptBRLocaleDefinition = {
    decimal: ",",
    thousands: "",
    grouping: [3],
    currency: ["R$", ""]
  };
  d3.formatDefaultLocale(ptBRLocaleDefinition);

  const width = 760;
  const height = 500;
  const margin = {top: 30, right: 20, bottom: 40, left: 50};
  
  const svg = d3.create("svg")
    .attr("viewBox", [0, 0, width, height])
      .attr("width", width)
      .attr("height", height)
      .attr("style", "max-width: 100%; height: auto; height: intrinsic; font: 10px sans-serif;")
      .style("-webkit-tap-highlight-color", "transparent")
      .style("overflow", "visible");

  // Escalas
  const x = d3.scalePoint()
    .domain([...new Set(data.map(d => d.faixa))])
    .range([margin.left, width - margin.right])
    .padding(0.5);

  const y = d3.scaleLinear()
    .domain([-11, 0])
    .range([height - margin.bottom, margin.top]);

  // Eixos
  svg.append("g")
    .attr("transform", `translate(0,${height - margin.bottom})`)
    .call(d3.axisBottom(x))
    .selectAll("text")
    .style("text-anchor", "end")
    .attr("dx", "-.8em")
    .attr("dy", ".15em")
    .attr("transform", "rotate(-45)");

  svg.append("text")
    .attr("text-anchor", "middle")
    .attr("x", width / 2)
    .attr("y", height) // Posição abaixo do eixo
    .style("font-size", "14px")
    .style("fill", "currentColor")
    .text("Faixa Etária");
    

  svg.append("g")
    .attr("transform", `translate(${margin.left},0)`)
    .call(d3.axisLeft(y).ticks(height / 40))
    .call(g => g.select(".domain").remove())
    .style("font-size", "12px")
    .call(g => g.selectAll(".tick line").clone()
      .attr("x2", width - margin.left - margin.right)
      .attr("stroke-opacity", 0.1))
    .call(g => g.append("text")
      .attr("transform", "rotate(-90)")
      .attr("x", -(height / 2))
      .attr("y", -margin.left + 15)
      .attr("fill", "currentColor")
      .attr("text-anchor", "middle")
      .style("font-size", "18px")
      .text("log(Mx)"));
  

  // Gradiente e cores
  const colorScale = d3.scaleSequential(d3.interpolateViridis)
    .domain([2024, 2070]);

  const defs = svg.append("defs");
  const nestedData = d3.groups(data, d => d.ano);

  nestedData.forEach(([year, values]) => {
    const gradientId = `gradient-${title}-${year}`;
    
    const gradient = defs.append("linearGradient")
      .attr("id", gradientId)
      .attr("gradientUnits", "userSpaceOnUse")
      .attr("x1", margin.left)
      .attr("y1", 0)
      .attr("x2", width - margin.right)
      .attr("y2", 0);

    gradient.append("stop")
      .attr("offset", "0%")
      .attr("stop-color", colorScale(year));

    gradient.append("stop")
      .attr("offset", "100%")
      .attr("stop-color", colorScale(Math.min(year + 10, 2070)));
  });

  // Linhas
  const line = d3.line()
    .x(d => x(d.faixa))
    .y(d => y(d.prev));

  nestedData.forEach(([year, values]) => {
    svg.append("path")
      .datum(values)
      .attr("fill", "none")
      .attr("stroke", `url(#gradient-${title}-${year})`)
      .attr("stroke-width", 2.5)
      .attr("d", line);
  });

  // Legenda
  const legendWidth = 200;
  const legendHeight = 20;
  const legendX = width - margin.right - legendWidth;
  const legendY = 400;

  const legendGradient = defs.append("linearGradient")
    .attr("id", `legend-${title}`)
    .attr("x1", "0%")
    .attr("y1", "0%")
    .attr("x2", "100%")
    .attr("y2", "0%");

  const years = [2024, 2035, 2045, 2055, 2070];
  years.forEach((year, i) => {
    legendGradient.append("stop")
      .attr("offset", `${i * 100 / (years.length - 1)}%`)
      .attr("stop-color", colorScale(year));
  });

  svg.append("rect")
    .attr("x", legendX)
    .attr("y", legendY)
    .attr("width", legendWidth)
    .attr("height", legendHeight)
    .style("fill", `url(#legend-${title})`);

  svg.append("text")
    .attr("x", legendX)
    .attr("y", legendY - 5)
    .attr("font-size", "12px")
    .text("Anos (2024-2070)");

  years.forEach((year, i) => {
    svg.append("text")
      .attr("x", legendX + (i * legendWidth / (years.length - 1)))
      .attr("y", legendY + legendHeight + 15)
      .attr("text-anchor", "middle")
      .attr("font-size", "10px")
      .text(year);
  });

  // Título
  svg.append("text")
    .attr("x", width / 2)
    .attr("y", 20)
    .attr("text-anchor", "middle")
    .style("font-size", "1.2em")
    .text(title);

  return svg.node();
}

// Renderização dos gráficos
{
  const container = document.createElement('div');
  container.style.display = "grid";
  container.style.gap = "2rem";
  container.style.justifyContent = "center";

  if (modelo2.includes("ARIMA+ETS")) {
    container.appendChild(createChart(data_filter1, "ARIMA+ETS"));
  }
  if (modelo2.includes("Lee-Miller")) {
    container.appendChild(createChart(data_filter2, "Lee-Miller"));
  }
  if (modelo2.includes("Lee-Carter")) {
    container.appendChild(createChart(data_filter3, "Lee-Carter"));
  }
  if (modelo2.includes("IBGE")) {
    container.appendChild(createChart(data_filter0, "IBGE"));
  }
  if (modelo2.includes("MLP-Shallow")) {
    container.appendChild(createChart(data_filter4, "MLP-Shallow"));
  }

  return modelo2.length === 0 
    ? html`<p>Nenhum dado selecionado.</p>`
    : container;
}

{  
  if (modelo2.includes("ARIMA+ETS")) {
    return html`<p>Para acessar a metodologia utilizada nas projeções do modelo combinado ARIMA com ETS, <a href="metodologia.html#modelo-combinado-arima-ets">clique aqui</a>.</p>`;
  }
  else if (modelo2.includes("Lee-Miller")) {
    return html`<p>Para acessar a metodologia utilizada nas projeções do Lee-Miller, <a href="metodologia.html#modelo-lee-miller">clique aqui</a>.</p>`;
  }
  else if (modelo2.includes("Lee-Carter")) {
    return html`<p>Para acessar a metodologia utilizada nas projeções do Lee-Carter, <a href="metodologia.html#modelo-lee-carter">clique aqui</a>.</p>`;
  }
  else if (modelo2.includes("IBGE")) {
    return html`<p>Para acessar a metodologia utilizada nas projeções do IBGE, <a href="metodologia.html#proje%C3%A7%C3%B5es-oficiais-do-ibge-at%C3%A9-2070">clique aqui</a>.</p>`;
  }
  else if (modelo2.includes("MLP-Shallow")) {
    return html`<p>Para acessar a metodologia utilizada nas projeções do MPL, <a href="metodologia.html#modelo-combinado-arima-ets-mlp-shallow-nnar">clique aqui</a>.</p>`;
  }
}

Tabela

html`<h2>Tabela de previsão modelo ARIMA+ETS</h2>`

Inputs.table(prev_arima_ets)

html`<h2>Tabela de previsão modelo Lee-Miller</h2>`

Inputs.table(prev_lm)

html`<h2>Tabela de previsão modelo Lee-Carter</h2>`

Inputs.table(prev_lc)

html`<h2>Tabela de previsão modelo MPL-Shallow</h2>`

Inputs.table(prev_comb)

html`
<body>
    <br>
    <p>Baixar previsões do modelo combinado 
    <a href="dados/arima-ets/previsao_concatenados.csv" download>
        ARIMA+ETS.
    </a>
    </p>

    <p>Baixar previsões do modelo 
    <a href="dados/lc-lm/previsoes_lc.csv" download>
        Lee-Carter.
    </a>
    </p>

    <p>Baixar previsões do modelo
    <a href="dados/lc-lm/previsoes_lm.csv" download>
        Lee-Miller.
    </a>
    </p>
    <p>Baixar previsões do modelo
    <a href="dados/combinado/previsoes_2020_2070_comb.csv" download>
        MPL-Shallow.
    </a>
    </p>
</body>
`

Previsão da função sobrevivência para os anos 2024-2070

px_lm = await FileAttachment('dados/lc-lm/tabua_lm.csv').csv()
px_lc = await FileAttachment('dados/lc-lm/tabua_lc.csv').csv()


function createChart2(data, title) {

  const ptBRLocaleDefinition = {
    decimal: ",",
    thousands: "",
    grouping: [3],
    currency: ["R$", ""]
  };
  const dados = data.filter(d => d.local === regiao2 && d.sexo === sexo).map(d => ({
    ano: +d.ano,
    faixa: d.faixa_etaria,
    prev: d.px
  }))
  d3.formatDefaultLocale(ptBRLocaleDefinition);

  const width = 760;
  const height = 500;
  const margin = {top: 30, right: 20, bottom: 40, left: 50};
  
  const svg = d3.create("svg")
    .attr("viewBox", [0, 0, width, height])
      .attr("width", width)
      .attr("height", height)
      .attr("style", "max-width: 100%; height: auto; height: intrinsic; font: 10px sans-serif;")
      .style("-webkit-tap-highlight-color", "transparent")
      .style("overflow", "visible");

  // Escalas
  const x = d3.scalePoint()
    .domain([...new Set(dados.map(d => d.faixa))])
    .range([margin.left, width - margin.right])
    .padding(0.5);

  const y = d3.scaleLinear()
    .domain([0, 1])
    .range([height - margin.bottom, margin.top]);

  // Eixos
  svg.append("g")
    .attr("transform", `translate(0,${height - margin.bottom})`)
    .call(d3.axisBottom(x))
    .selectAll("text")
    .style("text-anchor", "end")
    .attr("dx", "-.8em")
    .attr("dy", ".15em")
    .attr("transform", "rotate(-45)");

  svg.append("text")
    .attr("text-anchor", "middle")
    .attr("x", width / 2)
    .attr("y", height) // Posição abaixo do eixo
    .style("font-size", "14px")
    .style("fill", "currentColor")
    .text("Faixa Etária");
    

  svg.append("g")
    .attr("transform", `translate(${margin.left},0)`)
    .call(d3.axisLeft(y).ticks(height / 40))
    .call(g => g.select(".domain").remove())
    .style("font-size", "12px")
    .call(g => g.selectAll(".tick line").clone()
      .attr("x2", width - margin.left - margin.right)
      .attr("stroke-opacity", 0.1))
    .call(g => g.append("text")
      .attr("transform", "rotate(-90)")
      .attr("x", -(height / 2))
      .attr("y", -margin.left + 15)
      .attr("fill", "currentColor")
      .attr("text-anchor", "middle")
      .style("font-size", "18px")
      .text("pₓ"));
  

  // Gradiente e cores
  const colorScale = d3.scaleSequential(d3.interpolateViridis)
    .domain([2024, 2070]);

  const defs = svg.append("defs");
  const nestedData = d3.groups(dados, d => d.ano);

  nestedData.forEach(([year, values]) => {
    const gradientId = `gradient-${title}-${year}`;
    
    const gradient = defs.append("linearGradient")
      .attr("id", gradientId)
      .attr("gradientUnits", "userSpaceOnUse")
      .attr("x1", margin.left)
      .attr("y1", 0)
      .attr("x2", width - margin.right)
      .attr("y2", 0);

    gradient.append("stop")
      .attr("offset", "0%")
      .attr("stop-color", colorScale(year));

    gradient.append("stop")
      .attr("offset", "100%")
      .attr("stop-color", colorScale(Math.min(year + 10, 2070)));
  });

  // Linhas
  const line = d3.line()
    .x(d => x(d.faixa))
    .y(d => y(d.prev));

  nestedData.forEach(([year, values]) => {
    svg.append("path")
      .datum(values)
      .attr("fill", "none")
      .attr("stroke", `url(#gradient-${title}-${year})`)
      .attr("stroke-width", 2.5)
      .attr("d", line);
  });

  // Legenda
  const legendWidth = 200;
  const legendHeight = 20;
  const legendX = width - margin.right - legendWidth;
  const legendY = 400;

  const legendGradient = defs.append("linearGradient")
    .attr("id", `legend-${title}`)
    .attr("x1", "0%")
    .attr("y1", "0%")
    .attr("x2", "100%")
    .attr("y2", "0%");

  const years = [2024, 2035, 2045, 2055, 2070];
  years.forEach((year, i) => {
    legendGradient.append("stop")
      .attr("offset", `${i * 100 / (years.length - 1)}%`)
      .attr("stop-color", colorScale(year));
  });

  svg.append("rect")
    .attr("x", legendX)
    .attr("y", legendY)
    .attr("width", legendWidth)
    .attr("height", legendHeight)
    .style("fill", `url(#legend-${title})`);

  svg.append("text")
    .attr("x", legendX)
    .attr("y", legendY - 5)
    .attr("font-size", "12px")
    .text("Anos (2024-2070)");

  years.forEach((year, i) => {
    svg.append("text")
      .attr("x", legendX + (i * legendWidth / (years.length - 1)))
      .attr("y", legendY + legendHeight + 15)
      .attr("text-anchor", "middle")
      .attr("font-size", "10px")
      .text(year);
  });

  // Título
  svg.append("text")
    .attr("x", width / 2)
    .attr("y", 20)
    .attr("text-anchor", "middle")
    .style("font-size", "1.2em")
    .text(title);

  return svg.node();
}

// Renderização dos gráficos
{
  const container = document.createElement('div');
  container.style.display = "grid";
  container.style.gap = "2rem";
  container.style.justifyContent = "center";

  if (modelo2.includes("ARIMA+ETS")) {
    container.appendChild(/*createChart(data_filter1, "ARIMA+ETS")*/);
  }
  if (modelo2.includes("Lee-Miller")) {
    container.appendChild(createChart2(px_lm, "Lee-Miller"));
  }
  if (modelo2.includes("Lee-Carter")) {
    container.appendChild(createChart2(px_lm, "Lee-Carter"));
  }
  if (modelo2.includes("IBGE")) {
    container.appendChild(/*createChart(data_filter0, "IBGE")*/);
  }
  if (modelo2.includes("MLP-Shallow")) {
    container.appendChild(/*createChart(data_filter4, "MLP-Shallow")*/);
  }

  return modelo2.length === 0 
    ? html`<p>Nenhum dado selecionado.</p>`
    : container;
}

Métricas de Erro

BoxPlot

html`<h3>BoxPlot dos erros na escala Logarítmica</h3>`

viewof erro_select = Inputs.select(["MAE", "MAPE", "RMSE"], {
  label: "Métrica de Erro",
  value: "MAE"
})
// Processar dados
erros_lc = erros.filter(d => d.regiao === regiao2 && d.taxa === sexo)
      .map(d => ({
      faixa: d.faixa_etaria,
      RMSE: Number(d.RMSE_LC),
      MAPE: Number(d.SMAPE_LC),
      MAE: Number(d.MAE_LC),
      modelo: "Lee-Carter"
    }));

erros_lm = erros.filter(d => d.regiao === regiao2 && d.taxa === sexo)
      .map(d => ({
      faixa: d.faixa_etaria,
      RMSE: Number(d.RMSE_LM),
      MAPE: Number(d.SMAPE_LM),
      MAE: Number(d.MAE_LM),
      modelo: "Lee-Miller"
    }));

erros_ae = erros2.filter(d => d.LOCAL === regiao2 && d.SEXO === sexo)
      .map(d => ({
      faixa: d.IDADE,
      RMSE: Number(d.RMSE),
      MAPE: Number(d.sMAPE),
      MAE: Number(d.MAE),
      modelo: "ARIMA+ETS"
    }));

erros_comb = erros3.filter(d => d.LOCAL === regiao2 && d.SEXO === sexo)
      .map(d => ({
      faixa: d.IDADE,
      RMSE: Number(d.RMSE),
      MAPE: Number(d.sMAPE),
      MAE: Number(d.MAE),
      modelo: "MLP-Shallow"
    }));

// Importar D3
d3 = require("d3@7")

// Unir dados
data1 = [...erros_ae, ...erros_lc, ...erros_lm, ...erros_comb]

// Preparar dados para o gráfico
plotData = data1.map(d => ({
  modelo: d.modelo,
  valor: Math.log(d[erro_select]),
  faixa: d.faixa
})).filter(d => !isNaN(d.valor)) // remover valores inválidos

function createboxplot(data, metrica) {
  // Configurações
  const margin = ({top: 30, right: 20, bottom: 40, left: 50})
  const width = 760
  const height = 500

  // Calcular domínio do Y baseado nos dados reais
  const yMin = d3.min(plotData, d => d.valor)
  const yMax = d3.max(plotData, d => d.valor)
  const yPadding = (yMax - yMin) * 0.1

  // Escalas
  const x = d3.scaleBand()
    .domain(["ARIMA+ETS", "Lee-Carter", "Lee-Miller", "MLP-Shallow"])
    .range([margin.left, width - margin.right])
    .padding(0.3)

  const y = d3.scaleLinear()
    .domain([yMin - yPadding, yMax + yPadding])
    .range([height - margin.bottom, margin.top])

  const color = d3.scaleOrdinal()
    .domain(["ARIMA+ETS", "Lee-Carter", "Lee-Miller", "MLP-Shallow"]) // Ordem explícita dos modelos
    .range(['#404788FF', '#238A8DFF', '#55C667FF', '#FDE725FF']); // ...para as cores desejadas.

  // Criar SVG
  const svg = d3.create("svg")
    .attr("width", width)
    .attr("height", height)
    .attr("viewBox", [0, 0, width, height])
    .attr("style", "max-width: 100%; height: auto; height: intrinsic; font: 10px sans-serif;")
    .style("-webkit-tap-highlight-color", "transparent")
    .style("background", "#fffdfdff");

  // Função para calcular estatísticas do boxplot
  function boxQuartiles(values) {
    const sorted = values.map(d => d.valor).sort(d3.ascending);
    const q1 = d3.quantile(sorted, 0.25);
    const q2 = d3.quantile(sorted, 0.5);
    const q3 = d3.quantile(sorted, 0.75);
    const iqr = q3 - q1;
    const min = Math.max(d3.min(sorted), q1 - 1.5 * iqr);
    const max = Math.min(d3.max(sorted), q3 + 1.5 * iqr);
    return {q1, q2, q3, min, max};
  }

  // Agrupar dados por modelo
  const grouped = d3.group(plotData, d => d.modelo);

  // Desenhar boxplots
  grouped.forEach((values, modelo) => {
    const stats = boxQuartiles(values);
    const xPos = x(modelo) + x.bandwidth() / 2;
    const boxWidth = x.bandwidth() * 0.6;
    
    const g = svg.append("g");
    
    // Whiskers
    g.append("line")
      .attr("x1", xPos).attr("x2", xPos)
      .attr("y1", y(stats.min)).attr("y2", y(stats.q1))
      .attr("stroke", "black").attr("stroke-width", 1.5); // <== Alterado para preto
      
    g.append("line")
      .attr("x1", xPos).attr("x2", xPos)
      .attr("y1", y(stats.max)).attr("y2", y(stats.q3))
      .attr("stroke", "black").attr("stroke-width", 1.5); // <== Alterado para preto
      
    // Caps dos whiskers
    g.append("line")
      .attr("x1", xPos - boxWidth/4).attr("x2", xPos + boxWidth/4)
      .attr("y1", y(stats.min)).attr("y2", y(stats.min))
      .attr("stroke", "black").attr("stroke-width", 1.5); // <== Alterado para preto
      
    g.append("line")
      .attr("x1", xPos - boxWidth/4).attr("x2", xPos + boxWidth/4)
      .attr("y1", y(stats.max)).attr("y2", y(stats.max))
      .attr("stroke", "black").attr("stroke-width", 1.5); // <== Alterado para preto
      
    // Caixa
    g.append("rect")
      .attr("x", xPos - boxWidth/2)
      .attr("y", y(stats.q3))
      .attr("width", boxWidth)
      .attr("height", y(stats.q1) - y(stats.q3))
      .attr("fill", color(modelo)) // Mantém o preenchimento colorido
      .attr("fill-opacity", 0.7)
      .attr("stroke", "black") // <== Alterado para preto
      .attr("stroke-width", 1.5);
      
    // Mediana
    g.append("line")
      .attr("x1", xPos - boxWidth/2).attr("x2", xPos + boxWidth/2)
      .attr("y1", y(stats.q2)).attr("y2", y(stats.q2))
      .attr("stroke", "black") // <== Alterado para preto
      .attr("stroke-width", 2);
      
    // Pontos individuais (jitter)
    values.forEach(d => {
      svg.append("circle")
        .attr("cx", xPos + (Math.random() - 0.5) * boxWidth * 0.8)
        .attr("cy", y(d.valor))
        .attr("r", 2.5)
        .attr("fill", "gray") // Mantém o preenchimento colorido
        .attr("fill-opacity", 0.5)
        .attr("stroke", "black") // <== Alterado para preto
        .attr("stroke-width", 0.5); // Espessura menor para o contorno dos pontos
    });
  });

  // Eixos
  svg.append("g")
    .attr("transform", `translate(0,${height - margin.bottom})`)
    .call(d3.axisBottom(x));

  svg.append("g")
    .attr("transform", `translate(${margin.left},0)`)
    .call(d3.axisLeft(y));

  // Título do eixo Y
  svg.append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", 0 - margin.left)
    .attr("x", 0 - (height / 2))
    .attr("dy", "1em")
    .style("text-anchor", "middle")
    .text(metrica);

  // Retornar o SVG
  return svg.node();
  
}
createboxplot(plotData, erro_select)

Barras

html`<h3>Métricas de erro por Grupo Etário em escala Logarítmica</h3>`

{
  if(modelo2.includes("IBGE")) {
    return html`<p>Não existem métricas de erro para o modelo IBGE</p>`
  } else {
    const seletor = Inputs.select(["MAE", "MAPE", "RMSE"], {
      label: "Métrica de Erro",
      value: "MAE"
    });
    
    // Criar container que combina o seletor e o gráfico
    const container = html`<div></div>`;
    container.appendChild(seletor);
    
    // Aguardar mudanças no seletor
    seletor.addEventListener('input', () => {
      // Limpar conteúdo anterior do gráfico
      const graficoDiv = container.querySelector('.grafico');
      if (graficoDiv) graficoDiv.remove();
      
      const plotData2 = data1.map(d => ({
        modelo: d.modelo,
        valor: Math.log(d[seletor.value]),
        faixa: d.faixa
      })).filter(d => !isNaN(d.valor));
      
      const graficoContainer = html`<div class="grafico"></div>`;
      graficoContainer.appendChild(grafico_barra(plotData2));
      container.appendChild(graficoContainer);
    });
    
    // Gerar gráfico inicial
    const plotData2 = data1.map(d => ({
      modelo: d.modelo,
      valor: Math.log(d["MAE"]),
      faixa: d.faixa
    })).filter(d => !isNaN(d.valor));
    
    const graficoContainer = html`<div class="grafico"></div>`;
    graficoContainer.appendChild(grafico_barra(plotData2));
    container.appendChild(graficoContainer);

    function grafico_barra(data){
      const margin = ({top: 30, right: 20, bottom: 40, left: 50})
      const width = 500
      const height = 800

    

    // Lista dos subgrupos (modelos)
    const subgroups = [...new Set(data.map(d => d.modelo))].sort()

    // Lista dos grupos (faixas etárias) - mantendo a ordem original
    const groups = [...new Set(data.map(d => d.faixa))]

    // Criar o SVG
    const svg = d3.create("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .attr("style", "height: auto; height: intrinsic; font: 10px sans-serif;")
      .style("-webkit-tap-highlight-color", "transparent")

    const g = svg.append("g")
      .attr("transform", `translate(${margin.left},${margin.top})`)

    // Escalas
    // Escala Y para as faixas etárias (grupos)
    const y = d3.scaleBand()
      .domain(groups)
      .range([0, height])
      .padding(0.2)

    // Escala X para os valores
    const x = d3.scaleLinear()
      .domain([d3.min(data, d => d.valor)-0.5, d3.max(data, d => d.valor)])
      .range([0, width])

    // Escala Y para subgrupos (posição das barras dentro de cada faixa etária)
    const ySubgroup = d3.scaleBand()
      .domain(subgroups)
      .range([0, y.bandwidth()])
      .padding(0.05)

    // Escala de cores
    const color = d3.scaleOrdinal()
      .domain(["ARIMA+ETS", "Lee-Carter", "Lee-Miller", "MLP-Shallow"]) // Ordem explícita
      .range(['#404788FF', '#238A8DFF', '#55C667FF', '#FDE725FF'])

    // Adicionar eixo X
    g.append("g")
      .attr("transform", `translate(0,${height})`)
      .call(d3.axisBottom(x))

    // Adicionar eixo Y
    g.append("g")
      .call(d3.axisLeft(y))

    // Criar as barras
    g.append("g")
      .selectAll("g")
      .data(groups)
      .enter()
      .append("g")
      .attr("transform", d => `translate(0,${y(d)})`)
      .selectAll("rect")
      .data(faixa => {
        return subgroups.map(modelo => {
          const dataPoint = data.find(d => d.faixa === faixa && d.modelo === modelo);
          return {
            modelo: modelo,
            valor: dataPoint ? dataPoint.valor : 0,
            faixa: faixa
          };
        });
      })
      .enter()
      .append("rect")
      .attr("x", 0)
      .attr("y", d => ySubgroup(d.modelo))
      .attr("width", d => x(d.valor))
      .attr("height", ySubgroup.bandwidth())
      .attr("fill", d => color(d.modelo))

    // Adicionar rótulos dos eixos
    g.append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 0 - margin.left)
      .attr("x", 0 - (height / 2))
      .attr("dy", "1em")
      .style("text-anchor", "middle")
      .text("Faixa Etária")

    g.append("text")
      .attr("transform", `translate(${width / 2}, ${height + margin.bottom -10})`)
      .style("text-anchor", "middle")
      .text("Valor em log")

    const legendItemSpacing = 110; // Espaço que cada item da legenda ocupa
    const totalLegendWidth = subgroups.length * legendItemSpacing;
    const legendStartX = (width / 2) - (totalLegendWidth / 2);

    const legend = g.append("g")
        // --- 2. Aplicar o novo posicionamento ---
        // Posição X calculada para centralizar e Y movido mais para cima (-25)
        .attr("transform", `translate(${legendStartX}, -25)`) 
        .attr("font-family", "sans-serif")
        .attr("font-size", 10)
        .attr("text-anchor", "start")
        .selectAll("g")
        .data(subgroups) 
        .join("g")
          .attr("transform", (d, i) => `translate(${i * legendItemSpacing}, 0)`); 

    legend.append("rect")
        .attr("x", 0)
        .attr("width", 15)
        .attr("height", 15)
        .attr("fill", d => color(d)); 

    legend.append("text")
        .attr("x", 20) 
        .attr("y", 9.5)
        .attr("dy", "0.32em")
        .text(d => d);


    // Retornar o SVG
    return svg.node();
  }
  
  return container;
  }
}

Tabela

html`<h3>Tabela de Métricas de Erro</h3>`

erros = await FileAttachment("dados/lc-lm/erros.csv").csv({typed: true})
erros2 = await FileAttachment("dados/arima-ets/metricas_teste_2016_2019.csv").csv({typed: true})
erros3 = await FileAttachment("dados/combinado/metricas_teste_2016_2019_comb.csv").csv({typed: true})
regioes2 = [...new Set(erros.map(d => d.regiao))].sort()
anos2 = [...new Set(erros.map(d => d.ano))].sort()

Inputs.table(erros)

{
// Variável para guardar o resultado final
  let dadosTabela;
  if (seletores2.modelo === "Lee-Carter") {
    dadosTabela = erros.filter(d => d.regiao === regiao2 && d.taxa === sexo)
      .map(d => ({
      faixa: d.faixa_etaria,
      RMSE: Number(d.RMSE_LC).toFixed(5),
      MAPE: Number(d.MAPE_LC).toFixed(5),
      MAE: Number(d.MAE_LC).toFixed(5)
    }));
    }else if (seletores2.modelo === "Lee-Miller") {
      dadosTabela = erros.filter(d => d.regiao === regiao2 && d.taxa === sexo)
      .map(d => ({
      faixa: d.faixa_etaria,
      RMSE: Number(d.RMSE_LM).toFixed(5),
      MAPE: Number(d.MAPE_LM).toFixed(5),
      MAE: Number(d.MAE_LM).toFixed(5)
    }));
    }else if (seletores2.modelo === "ARIMA+ETS") {
      dadosTabela = erros2.filter(d => d.LOCAL === regiao2 && d.SEXO === sexo)
      .map(d => ({
      faixa: d.IDADE,
      RMSE: Number(d.RMSE).toFixed(5),
      MAPE: Number(d.sMAPE).toFixed(5),
      MAE: Number(d.MAE).toFixed(5)
    }));
    }else if(seletores2.modelo === "IBGE") {
      return html`<p>Não existem métricas de erro para o modelo IBGE</p>`
    }else if(seletores2.modelo === "MLP-Shallow") {
      dadosTabela = erros3.filter(d => d.LOCAL === regiao2 && d.SEXO === sexo)
      .map(d => ({
      faixa: d.IDADE,
      RMSE: Number(d.RMSE).toFixed(5),
      MAPE: Number(d.sMAPE).toFixed(5),
      MAE: Number(d.MAE).toFixed(5)
    }));
    }

  return Inputs.table(dadosTabela);
}

html`<p><a href="metodologia.html#m%C3%A9tricas-de-avalia%C3%A7%C3%A3o">Metodologia métricas de erro.</a></p>`