Visualização de dados,
do básico ao muito avançado

# Ambiente isolado por projeto (padrão de mercado)
python -m venv .venv
source .venv/bin/activate        # Windows: .venv\Scripts\activate

pip install pandas numpy matplotlib seaborn plotly streamlit altair
pip freeze > requirements.txt    # sempre versione as dependências

import pandas as pd

# Formato "largo" (comum em planilhas de empresa)
largo = pd.DataFrame({
    "produto": ["A", "B"],
    "jan": [100, 80],
    "fev": [120, 95],
    "mar": [140, 90],
})

# melt() converte para o formato longo (tidy)
tidy = largo.melt(id_vars="produto", var_name="mes", value_name="vendas")
print(tidy)
#   produto  mes  vendas
# 0       A  jan     100
# 1       B  jan      80
# 2       A  fev     120  ...

# O caminho inverso: pivot() — útil para heatmaps
matriz = tidy.pivot(index="produto", columns="mes", values="vendas")

df = pd.read_csv("vendas.csv", parse_dates=["data"])

# 1. Filtrar
df_2025 = df[df["data"].dt.year == 2025]

# 2. Agregar (a base de quase todo gráfico de negócio)
por_regiao = (df.groupby("regiao", as_index=False)
                .agg(receita=("valor", "sum"),
                     ticket_medio=("valor", "mean"),
                     pedidos=("valor", "size")))

# 3. Ordenar (ranking correto ANTES de plotar)
por_regiao = por_regiao.sort_values("receita", ascending=False)

# 4. Reamostrar séries temporais
mensal = df.set_index("data")["valor"].resample("ME").sum()

# 5. Janela móvel (suavização honesta de tendência)
mensal_suave = mensal.rolling(3, center=True).mean()

# 6. Tratar nulos de forma explícita
df["categoria"] = df["categoria"].fillna("Não informado")

import matplotlib.pyplot as plt
import numpy as np

x = np.linspace(0, 12, 200)
fig, ax = plt.subplots(figsize=(8, 4.5), dpi=110)

ax.plot(x, np.sin(x), label="Receita", linewidth=2)
ax.plot(x, np.sin(x) * 0.6 + 0.3, label="Custo", linewidth=2, linestyle="--")

ax.set_title("Interface orientada a objetos", loc="left", fontweight="bold")
ax.set_xlabel("Mês")
ax.set_ylabel("R$ milhões")
ax.legend(frameon=False)
ax.spines[["top", "right"]].set_visible(False)   # data-ink ratio!
fig.tight_layout()
fig.savefig("grafico.png", dpi=200, bbox_inches="tight")

# Grade simples com eixos compartilhados (small multiples)
fig, axs = plt.subplots(2, 3, figsize=(11, 6), sharex=True, sharey=True)
for ax, regiao in zip(axs.flat, ["N", "NE", "CO", "SE", "S", "BR"]):
    ax.set_title(regiao, loc="left", fontsize=10, fontweight="bold")

# Layout irregular declarativo (recurso moderno e elegante)
fig, axd = plt.subplot_mosaic(
    """
    AAB
    AAC
    """,
    figsize=(10, 5), layout="constrained",
)
axd["A"].set_title("Gráfico principal")
axd["B"].set_title("KPI 1")
axd["C"].set_title("KPI 2")

import matplotlib as mpl

# Tema global do projeto (coloque num módulo theme.py e importe em todo notebook)
mpl.rcParams.update({
    "figure.dpi": 110,
    "font.family": "sans-serif",
    "font.sans-serif": ["Inter", "Arial"],
    "axes.spines.top": False,
    "axes.spines.right": False,
    "axes.grid": True,
    "grid.alpha": 0.25,
    "axes.prop_cycle": mpl.cycler(color=[
        "#0D0887", "#8006A8", "#CB4679", "#D66B00", "#3B7A57",
    ]),
})
# Alternativa: salve como arquivo .mplstyle e use plt.style.use("empresa.mplstyle")

fig, ax = plt.subplots(figsize=(9, 4.5))
serie = mensal_suave  # do capítulo 2

ax.plot(serie.index, serie.values, color="#B9BDC7", lw=1.6)          # contexto em cinza
ax.plot(serie.index[-6:], serie.values[-6:], color="#0D0887", lw=3)  # foco em cor

pico = serie.idxmax()
ax.annotate(
    "Pico após campanha\nde Black Friday",
    xy=(pico, serie.max()),                 # ponto anotado
    xytext=(30, -40), textcoords="offset points",
    arrowprops=dict(arrowstyle="->", color="#444"),
    fontsize=10,
)
ax.axvspan(serie.index[-6], serie.index[-1], alpha=0.08, color="#0D0887")
ax.set_title("Receita mensal: destaque no último semestre",
             loc="left", fontweight="bold")

import matplotlib.dates as mdates
import matplotlib.ticker as mticker

fig, ax = plt.subplots()
ax.set_yscale("log")                          # crescimento exponencial vira reta
ax.yaxis.set_major_formatter(
    mticker.FuncFormatter(lambda v, _: f"R$ {v:,.0f}".replace(",", "."))
)
ax.xaxis.set_major_locator(mdates.MonthLocator(interval=2))
ax.xaxis.set_major_formatter(mdates.DateFormatter("%b/%y"))

# Eixo duplo — use com parcimônia e cores casadas com as séries
ax2 = ax.twinx()
ax2.set_ylabel("Conversão (%)", color="#CB4679")
ax2.tick_params(axis="y", labelcolor="#CB4679")

import seaborn as sns
sns.set_theme(style="whitegrid", context="notebook")

tips = sns.load_dataset("tips")

# Cada coluna vira um canal visual — mesma gramática em toda a lib
ax = sns.scatterplot(
    data=tips, x="total_bill", y="tip",
    hue="time",          # cor  = categoria
    size="size",         # área = nº de pessoas
    style="smoker",      # forma = fumante
    palette="plasma",
)
ax.set_title("Gorjetas: 5 variáveis num único gráfico", loc="left")

fig, axs = plt.subplots(1, 3, figsize=(13, 3.6))

sns.histplot(data=tips, x="total_bill", kde=True, ax=axs[0])
sns.boxplot(data=tips, x="day", y="total_bill", ax=axs[1])
sns.violinplot(data=tips, x="day", y="total_bill",
               inner="quart", ax=axs[2])

axs[0].set_title("Histograma + KDE")
axs[1].set_title("Boxplot (mediana/quartis)")
axs[2].set_title("Violino (forma completa)")

# col/row criam a grade automaticamente a partir dos DADOS
g = sns.relplot(
    data=tips, x="total_bill", y="tip",
    col="time", row="smoker",       # 2×2 painéis
    hue="day", kind="scatter", height=3,
)
g.set_titles("{row_name} · {col_name}")
g.figure.suptitle("Faceting: a força do formato tidy", y=1.03)

corr = tips.select_dtypes("number").corr()

sns.heatmap(
    corr, annot=True, fmt=".2f",
    cmap="RdBu_r", center=0,        # divergente centrada no zero!
    square=True, linewidths=.5,
)

import plotly.express as px

gap = px.data.gapminder().query("year == 2007")

fig = px.scatter(
    gap, x="gdpPercap", y="lifeExp",
    size="pop", color="continent",
    hover_name="country",
    log_x=True, size_max=55,
    labels={"gdpPercap": "PIB per capita (log)",
            "lifeExp": "Expectativa de vida"},
    title="Gapminder 2007 — cada bolha é um país",
)
fig.show()                                   # abre interativo
fig.write_html("gapminder.html",             # arquivo standalone p/ portfólio
               include_plotlyjs="cdn")

import plotly.graph_objects as go
from plotly.subplots import make_subplots

fig = make_subplots(rows=1, cols=2, subplot_titles=("Receita", "Margem %"),
                    column_widths=[0.65, 0.35])

fig.add_trace(go.Bar(x=meses, y=receita, name="Receita",
                     marker_color="#0D0887"), row=1, col=1)
fig.add_trace(go.Scatter(x=meses, y=margem, mode="lines+markers",
                         name="Margem", line=dict(color="#CB4679", width=3)),
              row=1, col=2)

fig.update_layout(
    template="plotly_white",
    font_family="Inter",
    hovermode="x unified",                    # tooltip único por posição x
    legend=dict(orientation="h", y=1.12),
    margin=dict(t=70, r=20),
)
# Tooltip customizado — detalhe que separa amador de profissional
fig.update_traces(
    hovertemplate="<b>%{x}</b><br>R$ %{y:,.0f}<extra></extra>",
    row=1, col=1,
)

# Animação: uma linha extra transforma o scatter em "filme" por ano
fig = px.scatter(px.data.gapminder(),
                 x="gdpPercap", y="lifeExp", size="pop", color="continent",
                 animation_frame="year", animation_group="country",
                 log_x=True, size_max=55, range_y=[25, 90])

# Mapa coroplético mundial em 6 linhas
fig = px.choropleth(
    px.data.gapminder().query("year == 2007"),
    locations="iso_alpha", color="lifeExp",
    color_continuous_scale="Viridis",
    title="Expectativa de vida (2007)",
)

import altair as alt
from vega_datasets import data

cars = data.cars()

# Seleção interativa DECLARATIVA: brush liga dois gráficos sem callback
brush = alt.selection_interval()

pontos = alt.Chart(cars).mark_circle(size=60).encode(
    x="Horsepower:Q",
    y="Miles_per_Gallon:Q",
    color=alt.condition(brush, "Origin:N", alt.value("lightgray")),
).add_params(brush)

barras = alt.Chart(cars).mark_bar().encode(
    x="count():Q", y="Origin:N", color="Origin:N",
).transform_filter(brush)

(pontos & barras)   # & empilha; | põe lado a lado — composição por operador

from bokeh.plotting import figure, curdoc
from bokeh.models import Slider, ColumnDataSource

source = ColumnDataSource(dict(x=x, y=np.sin(x)))
p = figure(height=300, title="Bokeh server: Python reage no browser")
p.line("x", "y", source=source, line_width=3)

def atualizar(attr, old, novo):
    source.data = dict(x=x, y=np.sin(novo * x))   # muda dados, não redesenha

freq = Slider(start=0.5, end=5, value=1, step=0.1, title="Frequência")
freq.on_change("value", atualizar)
curdoc().add_root(p)   # rodar com: bokeh serve app.py

import streamlit as st
import plotly.express as px
import pandas as pd

st.set_page_config(page_title="Painel de Vendas", layout="wide")

@st.cache_data          # evita reler o CSV a cada interação — ESSENCIAL
def carregar():
    return pd.read_csv("vendas.csv", parse_dates=["data"])

df = carregar()

# --- Sidebar de filtros ---
st.sidebar.header("Filtros")
regioes = st.sidebar.multiselect("Região", df["regiao"].unique(),
                                 default=list(df["regiao"].unique()))
periodo = st.sidebar.date_input("Período",
                                (df["data"].min(), df["data"].max()))

f = df[df["regiao"].isin(regioes)]
f = f[f["data"].between(*map(pd.Timestamp, periodo))]

# --- KPIs ---
c1, c2, c3 = st.columns(3)
c1.metric("Receita", f"R$ {f['valor'].sum():,.0f}",
          delta=f"{f['valor'].sum()/df['valor'].sum():.0%} do total")
c2.metric("Pedidos", f"{len(f):,}")
c3.metric("Ticket médio", f"R$ {f['valor'].mean():,.2f}")

# --- Gráficos ---
esq, dir = st.columns([2, 1])
mensal = f.set_index("data")["valor"].resample("ME").sum().reset_index()
esq.plotly_chart(px.line(mensal, x="data", y="valor",
                         title="Receita mensal"), use_container_width=True)
top = f.groupby("regiao")["valor"].sum().sort_values().reset_index()
dir.plotly_chart(px.bar(top, x="valor", y="regiao", orientation="h",
                        title="Por região"), use_container_width=True)

from dash import Dash, dcc, html, Input, Output
import plotly.express as px

app = Dash(__name__)

app.layout = html.Div([
    html.H2("Painel de Vendas"),
    dcc.Dropdown(id="regiao",
                 options=sorted(df["regiao"].unique()),
                 value="Sudeste"),
    dcc.Graph(id="grafico"),
])

# Só ESTA função roda quando o dropdown muda — nada de re-executar tudo
@app.callback(Output("grafico", "figure"), Input("regiao", "value"))
def atualizar(regiao):
    f = df[df["regiao"] == regiao]
    mensal = f.set_index("data")["valor"].resample("ME").sum().reset_index()
    return px.line(mensal, x="data", y="valor",
                   title=f"Receita mensal — {regiao}")

if __name__ == "__main__":
    app.run(debug=True)   # produção: gunicorn app:server

FROM python:3.12-slim
WORKDIR /app
COPY requirements.txt .
RUN pip install --no-cache-dir -r requirements.txt
COPY . .
EXPOSE 8501
CMD ["streamlit", "run", "app.py", "--server.address=0.0.0.0"]

<body>
  <header class="topo">
    <h1>Painel de Vendas</h1>
    <nav aria-label="Períodos">…</nav>
  </header>

  <main class="grade">
    <section class="kpi" aria-label="Receita total">
      <span class="kpi-rotulo">Receita</span>
      <span class="kpi-valor">R$ 4,2 mi</span>
      <span class="kpi-delta positivo">▲ 12% vs mês anterior</span>
    </section>

    <figure class="card grafico-principal">
      <figcaption>Receita mensal por região</figcaption>
      <div id="chart-receita"></div>  <!-- Plotly/D3 monta aqui -->
    </figure>
  </main>
</body>

.grade{
  display:grid;
  gap:1rem;
  grid-template-columns:repeat(4, 1fr);
  grid-template-areas:
    "kpi1 kpi2 kpi3 kpi4"
    "main main main lateral"
    "mapa mapa tabela tabela";
}
.grafico-principal{grid-area:main}
.painel-lateral{grid-area:lateral}

/* KPIs que se adaptam sozinhos, sem media query */
.linha-kpis{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:1rem;
}

@media (max-width:800px){
  .grade{
    grid-template-columns:1fr;
    grid-template-areas:"kpi1" "kpi2" "kpi3" "kpi4"
                        "main" "lateral" "mapa" "tabela";
  }
}

:root{
  --bg:#FBFBF8;  --ink:#151920;  --card:#FFFFFF;
  --serie-1:#0D0887; --serie-2:#CB4679; --positivo:#1B7A3D; --negativo:#B3261E;
  --raio:12px; --sombra:0 4px 16px rgb(0 0 0 / .07);
  --fonte-num:"JetBrains Mono", monospace;   /* números tabulares em KPIs */
}
@media (prefers-color-scheme: dark){
  :root{ --bg:#12151C; --ink:#E8ECF3; --card:#1B2029; }
}
.card{ background:var(--card); border-radius:var(--raio); box-shadow:var(--sombra); }
.kpi-valor{ font-family:var(--fonte-num); font-variant-numeric:tabular-nums; }

<svg viewBox="0 0 320 160" role="img" aria-label="Vendas por trimestre">
  <!-- eixo y=140 é a linha de base -->
  <line x1="30" y1="140" x2="310" y2="140" stroke="#999"/>

  <!-- ATENÇÃO: o y do SVG cresce para BAIXO.
       Barra de altura h começa em y = 140 - h -->
  <rect x="45"  y="60"  width="50" height="80"  fill="#0D0887"/>
  <rect x="115" y="40"  width="50" height="100" fill="#0D0887"/>
  <rect x="185" y="90"  width="50" height="50"  fill="#0D0887"/>
  <rect x="255" y="20"  width="50" height="120" fill="#CB4679"/>

  <text x="280" y="14" font-size="10" text-anchor="middle">recorde</text>
</svg>

const cv = document.querySelector("canvas");
const ctx = cv.getContext("2d");

// Nítido em telas retina: desenhe em resolução física
const dpr = window.devicePixelRatio || 1;
cv.width = 800 * dpr; cv.height = 500 * dpr;
ctx.scale(dpr, dpr);

ctx.fillStyle = "rgba(13, 8, 135, 0.25)";   // alpha revela densidade
for (let i = 0; i < 50_000; i++) {
  const x = Math.random() * 800;
  const y = 250 + (Math.random() - 0.5) * (x * 0.6);
  ctx.fillRect(x, y, 2, 2);                  // fillRect >> arc em volume
}

import * as d3 from "d3";

const dados = [
  { regiao: "SE", receita: 420 }, { regiao: "S",  receita: 260 },
  { regiao: "NE", receita: 200 }, { regiao: "CO", receita: 120 },
];
const m = { top: 20, right: 16, bottom: 28, left: 44 };
const W = 560, H = 300;

// ESCALAS: funções que mapeiam domínio (dados) → alcance (pixels)
const x = d3.scaleBand()
    .domain(dados.map(d => d.regiao))
    .range([m.left, W - m.right]).padding(0.2);
const y = d3.scaleLinear()
    .domain([0, d3.max(dados, d => d.receita)]).nice()
    .range([H - m.bottom, m.top]);          // invertido: y do SVG desce!

const svg = d3.select("#chart").append("svg")
    .attr("viewBox", [0, 0, W, H]);

// DATA JOIN: um <rect> para cada item do array
svg.selectAll("rect")
  .data(dados)
  .join("rect")
    .attr("x", d => x(d.regiao))
    .attr("y", d => y(d.receita))
    .attr("width", x.bandwidth())
    .attr("height", d => y(0) - y(d.receita))
    .attr("fill", "#0D0887");

// EIXOS: geradores que desenham ticks a partir das escalas
svg.append("g").attr("transform", `translate(0,${H - m.bottom})`)
   .call(d3.axisBottom(x));
svg.append("g").attr("transform", `translate(${m.left},0)`)
   .call(d3.axisLeft(y).ticks(5));

function render(dados) {
  y.domain([0, d3.max(dados, d => d.receita)]).nice();

  svg.selectAll("rect")
    .data(dados, d => d.regiao)          // chave estável = animação correta
    .join(
      enter => enter.append("rect")
        .attr("x", d => x(d.regiao))
        .attr("width", x.bandwidth())
        .attr("y", y(0)).attr("height", 0)          // nasce "do chão"
        .attr("fill", "#0D0887"),
      update => update,
      exit => exit.transition().duration(400)
        .attr("y", y(0)).attr("height", 0).remove()
    )
    .transition().duration(600).ease(d3.easeCubicOut)
      .attr("y", d => y(d.receita))
      .attr("height", d => y(0) - y(d.receita));
}

// Tooltip: um único div reutilizado (nunca crie um por ponto)
const tip = d3.select("body").append("div").attr("class", "tooltip");

svg.selectAll("rect")
  .on("pointermove", (evento, d) => {
    tip.style("opacity", 1)
       .html(`<b>${d.regiao}</b><br>R$ ${d.receita} mi`)
       .style("left", (evento.pageX + 12) + "px")
       .style("top",  (evento.pageY - 24) + "px");
  })
  .on("pointerleave", () => tip.style("opacity", 0));

// Zoom semântico: reescala os eixos, não estica os pixels
svg.call(d3.zoom()
  .scaleExtent([1, 8])
  .on("zoom", ({ transform }) => {
    const zx = transform.rescaleX(x0);   // x0 = escala original
    eixoX.call(d3.axisBottom(zx));
    pontos.attr("cx", d => zx(d.data));
  }));

// d3.brush() cria seleção retangular → filtre outros gráficos no evento "end"
// (é assim que se implementa crossfiltering "na mão")

// Grafo de rede: a simulação calcula posições, você só desenha
const sim = d3.forceSimulation(nos)
  .force("link", d3.forceLink(arestas).id(d => d.id).distance(60))
  .force("charge", d3.forceManyBody().strength(-180))
  .force("center", d3.forceCenter(W / 2, H / 2))
  .on("tick", () => {
    link.attr("x1", d => d.source.x).attr("y1", d => d.source.y)
        .attr("x2", d => d.target.x).attr("y2", d => d.target.y);
    no.attr("cx", d => d.x).attr("cy", d => d.y);
  });

// Mapa: projeção transforma lon/lat → pixels; path desenha GeoJSON
const proj = d3.geoMercator().fitSize([W, H], geojsonBrasil);
const path = d3.geoPath(proj);
svg.selectAll("path").data(geojsonBrasil.features).join("path")
   .attr("d", path)
   .attr("fill", d => escalaCor(taxaPorUF.get(d.properties.sigla)));

figs = [fig_kpi, fig_serie, fig_mapa]
partes = [f.to_html(full_html=False, include_plotlyjs="cdn" if i == 0
                    else False) for i, f in enumerate(figs)]
html = f"""<html><head><meta charset='utf-8'>
<link rel='stylesheet' href='tema.css'></head>
<body><h1>Relatório semanal</h1>{''.join(partes)}</body></html>"""
open("relatorio.html", "w").write(html)
# Agende com cron/GitHub Actions → relatório se atualiza sozinho

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware
import pandas as pd

app = FastAPI()
app.add_middleware(CORSMiddleware, allow_origins=["*"])  # restrinja em prod

df = pd.read_parquet("vendas.parquet")

@app.get("/api/receita-mensal")
def receita_mensal(regiao: str | None = None):
    f = df if regiao is None else df[df["regiao"] == regiao]
    serie = (f.set_index("data")["valor"].resample("ME").sum())
    # REGRA DE OURO: agregue no servidor, envie KB — nunca o dataset cru
    return [{"mes": k.strftime("%Y-%m"), "valor": round(v, 2)}
            for k, v in serie.items()]

async function desenhar(regiao = null) {
  const url = "/api/receita-mensal" + (regiao ? `?regiao=${regiao}` : "");
  const dados = await (await fetch(url)).json();

  Plotly.react("chart", [{
    x: dados.map(d => d.mes),
    y: dados.map(d => d.valor),
    type: "scatter", mode: "lines", line: { color: "#0D0887", width: 3 },
  }], { margin: { t: 24 }, yaxis: { tickprefix: "R$ " } });
  // Plotly.react atualiza sem recriar o gráfico — importante p/ UX
}

# servidor (FastAPI)
from fastapi import WebSocket
import asyncio, json, random

@app.websocket("/ws/metricas")
async def metricas(ws: WebSocket):
    await ws.accept()
    while True:
        await ws.send_text(json.dumps({"v": random.gauss(100, 8)}))
        await asyncio.sleep(1)

const ws = new WebSocket("ws://localhost:8000/ws/metricas");
const buffer = [];
ws.onmessage = (ev) => {
  buffer.push(JSON.parse(ev.data).v);
  if (buffer.length > 60) buffer.shift();          // últimos 60s
  Plotly.react("live", [{ y: [...buffer], type: "scatter" }],
               { yaxis: { range: [60, 140] } });    // eixo FIXO: sem "pulos"
};

# (a) Binning 2D: scatter gigante → mapa de densidade honesto
fig, ax = plt.subplots()
hb = ax.hexbin(df["x"], df["y"], gridsize=60, cmap="viridis",
               mincnt=1, bins="log")
fig.colorbar(hb, label="pontos por célula (log)")

# (b) Downsample de séries temporais: 10 mi de ticks → 1 ponto/minuto
ohlc = df.set_index("ts")["preco"].resample("1min").ohlc()

# (c) Percentis em vez de pontos: banda de incerteza
q = (df.groupby("dia")["latencia"]
       .quantile([.05, .5, .95]).unstack())
ax.fill_between(q.index, q[0.05], q[0.95], alpha=.2, label="p5–p95")
ax.plot(q.index, q[0.5], lw=2, label="mediana")

import datashader as ds, datashader.transfer_functions as tf
import colorcet

canvas = ds.Canvas(plot_width=900, plot_height=500)
agg = canvas.points(df, "lon", "lat")            # agrega N milhões → grade
img = tf.shade(agg, cmap=colorcet.fire, how="eq_hist")
# how="eq_hist": equalização de histograma revela estrutura
# em dados com cauda longa — o "truque" que faz os mapas famosos
tf.set_background(img, "black").to_pil().save("densidade.png")

import duckdb

agg = duckdb.sql("""
    SELECT date_trunc('day', ts) AS dia,
           quantile_cont(latencia, 0.5)  AS p50,
           quantile_cont(latencia, 0.95) AS p95
    FROM 'logs/*.parquet'          -- lê bilhões de linhas sem carregar tudo
    GROUP BY 1 ORDER BY 1
""").df()
# agg tem ~365 linhas: qualquer biblioteca plota instantaneamente

<section class="scrolly">
  <div class="grafico-fixo"><svg id="viz"></svg></div>
  <article>
    <div class="passo" data-passo="0"><p>Em 2015, as regiões eram parecidas…</p></div>
    <div class="passo" data-passo="1"><p>…até o Sudeste descolar em 2020…</p></div>
    <div class="passo" data-passo="2"><p>…e hoje concentrar 60% da receita.</p></div>
  </article>
</section>

<style>
.scrolly{ display:grid; grid-template-columns:1fr 1fr; }
.grafico-fixo{ position:sticky; top:0; height:100vh; }  /* o truque todo */
.passo{ min-height:90vh; display:flex; align-items:center; }
</style>

<script>
const obs = new IntersectionObserver((entradas) => {
  entradas.forEach(e => {
    if (e.isIntersecting) atualizarViz(+e.target.dataset.passo);
    // atualizarViz() usa o update pattern do cap. 10.2:
    // mesmo SVG, dados/destaques diferentes por passo
  });
}, { threshold: 0.6 });
document.querySelectorAll(".passo").forEach(p => obs.observe(p));
</script>