Visualizações em Transportes

Como comunicar informação complexa de forma elegante

Dados elegantes

O mundo dos transportes lida com multiplas dimensões e quantidades enormes de variáveis e dados. Felizmente grandes mentes dedicaram-se a desenvolver visualizações especializadas que permitem comunicar de forma clara, precisa e simples toda essa complexidade.
Neste artigo vamos explorar algumas visualizações notáveis que tiveram e ainda têm, um impacto extraordinário na forma como é comunicada informação em transportes.

O meu top 3 de visualizações no mundo dos transportes

Para encontrar o meu top, ponderei vários factores:

1. utilidade
2. factor de simplificação de complexidade
3. clareza
4. elegância
5. adopção

Photo by Dennis Kummer on Unsplash

Medalha de Bronze

Em transportes é recorrente a necessidade de representar fluxos mas ninguém o fez melhor do que o Engenheiro Civil Francês Charles Joseph Minard na sua representação da campanha falhada de invasão de Napoleão à Russia em 1812 - 1813.

A quantidaded de informação apresentada nesta visualização é incrível. Por um lado, temos o trajecto geográfico do exército francês até chegar a Moscovo. Estão representadas as localidades e os rios cuja travessia representava um perigo. Podemos ver o tamanho do exército de soldados franceses, que vai diminuindo de tamanho com as baixas sucessivas (o autor adiciona os números para facilitar a extração da informação). Ainda no mesmo gráfico temos o regresso das tropas (fluxo a negro), com duas informações adicionais, temos as datas de alguns pontos críticos da viagem de regresso bem como a temperatura nesses dias, precisamente para evidenciar as temperaturas extremas. Apesar da quantidade de informação de diferente natureza, o uso de apenas uma cor direciona o observador para o conteúdo principal.

Não é demais notar a genialidade da mente brilhante que idealizou esta visualização há mais de 200 anos!!!

Fluxos em transportes

Na sua essência a representação de Minard corresponde a um diagrama de Sankey (utilizado primordialmente em termodinâmica), mas cujo uso não é muito habitual em transportes. Os gráficos de fluxos habitualmente utilizados em transportes são significativamente mais simples. Habitualmente representa-se a distância no eixo das abcissas e a variável de interesse nas ordenadas. Por exemplo, podemos representar o número de passageiros a bordo de um veículo, criando o denominado diagrama de carga.

Diagrama de Carga

Exemplo de um diagrama de carga de 1862 do próprio Minard, para diferentes linhas do caminho de ferro francês.

Enquanto nessa altura era necessário um esforço enorme para produzir estas autênticas obras de arte, hoje em dia está ao nosso alcance fazê-lo. Deixo aqui um exemplo interactivo e o código usado para o gerar.

import plotly.graph_objects as go
import pandas as pd

# Example data: stops and passenger activity
data = {
    "Stop": ["A", "B", "C", "D", "E", "F"],
    "Boarding": [20, 5, 12, 3, 15, 0],
    "Alighting": [0, 10, 5, 13, 2, 25]
}

df = pd.DataFrame(data)

# Compute passenger load at each segment
df["Load"] = df["Boarding"].cumsum() - df["Alighting"].cumsum()

# Create Figure
fig = go.Figure()

# Line for load
fig.add_trace(go.Scatter(
    x=df["Stop"],
    y=df["Load"],
    mode="lines+markers",
    name="A bordo",
    line=dict(width=3),
    marker=dict(size=8)
))

# Bars showing boarding
fig.add_trace(go.Bar(
    x=df["Stop"],
    y=df["Boarding"],
    name="Entram",
    opacity=0.6
))

# Bars showing alighting
fig.add_trace(go.Bar(
    x=df["Stop"],
    y=df["Alighting"],
    name="Saem",
    opacity=0.6
))

fig.update_layout(
    title="Diagrama de carga de passageiros",
    xaxis_title="Paragens",
    yaxis_title="Passageiros",
    barmode="relative",
    template="plotly_white",
    legend=dict(orientation="h", y=-0.2)
)

Medalha de Prata

Continuando por terras francesas, é incontornável não mencionar os diagramas espaço-tempo também designados por diagramas de Marey. Étienne Jules Marey foi um inventor e fotógrafo francês com contribuições em vários domínios da ciência, curiosamente este método foi inicialmente desenvolvido por Charles Ibry um Engenheiro dos Caminhos de Ferro franceses do qual pouco se sabe.

Esta representação tornou-se reconhecida após a proposta da sua aplicação por Marey para a linha Paris-Lyon em 1880.

Tal como o nome indica, o diagrama representa a distância nas ordenadas e o tempo no eixo das abcissas. As estações estão colocadas de acordo com a sua distância à origem, assim é possível obter imensa informação útil. Onde e quando se cruzam os comboios, horários de saida em cada estação, a velocidade média entre cada estação, o posicionamento de cada comboio a uma determinada hora, o tempo de espera nas estações, etc.

Esta representação é ainda hoje (150 anos depois) uma representação de muito utilizada nos transportes. É particularmente útil na gestão de slots em infraestruturas ferroviárias.

Diagrama espaço-tempo

import pandas as pd
import plotly.graph_objects as go
from datetime import datetime

# -------- Example station list with approximate distances --------
stations = [
    ("Paris", 0),
    ("Melun", 50),
    ("Montereau", 80),
    ("Sens", 115),
    ("Montargis", 150),
    ("Nevers", 270),
    ("Moulins", 350),
    ("Roanne", 480),
    ("Lyon", 465)
]

stations_df = pd.DataFrame(stations, columns=["station", "distance_km"])
dist_map = stations_df.set_index("station")["distance_km"].to_dict()

# ---------- Example timetable data (synthetic, Marey-style) ----------
trains = {
    "Express 1": [("Paris", "06:00"), ("Melun", "06:45"), ("Sens", "07:40"),
                  ("Nevers", "09:30"), ("Lyon", "12:00")],
    "Local A":   [("Paris", "06:20"), ("Melun", "07:10"), ("Montereau", "07:40"),
                  ("Montargis", "08:50"), ("Moulins", "11:45"), ("Lyon", "15:00")],
    "Express 2": [("Paris", "07:00"), ("Melun", "07:40"), ("Sens", "08:25"),
                  ("Nevers", "10:00"), ("Lyon", "12:30")],
    "Freight":   [("Paris", "05:30"), ("Melun", "06:40"), ("Montereau", "07:30"),
                  ("Montargis", "09:05"), ("Roanne", "13:00")],
    "Return 1":  [("Lyon", "07:10"), ("Roanne", "08:40"), ("Moulins", "10:50"),
                  ("Nevers", "12:05"), ("Paris", "15:30")]
}

# -------- Flatten timetable into a dataframe --------
records = []
for train, stops in trains.items():
    for station, time_str in stops:
        if station not in dist_map:
            continue
        hh, mm = map(int, time_str.split(":"))
        t = datetime(1880, 6, 1, hh, mm)  # example date
        records.append({
            "train": train,
            "station": station,
            "time": t,
            "distance_km": dist_map[station]
        })

df = pd.DataFrame(records)

# -------- Create Plotly figure --------
fig = go.Figure()

for train, g in df.groupby("train"):
    g_sorted = g.sort_values("time")
    fig.add_trace(go.Scatter(
        x=g_sorted["time"],
        y=g_sorted["distance_km"],
        mode="lines+markers",
        name=train,
        hovertemplate="<b>%{text}</b><br><br>Time: %{x}<br>Distance: %{y} km",
        text=[train]*len(g_sorted)
    ))

# -------- Add horizontal station lines --------
for _, row in stations_df.iterrows():
    fig.add_shape(
        type="line",
        x0=df["time"].min(),
        x1=df["time"].max(),
        y0=row["distance_km"],
        y1=row["distance_km"],
        line=dict(color="lightgray", width=1, dash="dot")
    )
    fig.add_annotation(
        x=df["time"].min(),
        y=row["distance_km"],
        text=row["station"],
        showarrow=False,
        xanchor="right",
        yanchor="middle",
        xshift=-10
    )

# -------- Layout styling --------
fig.update_layout(
    title="Gráfico de Marey — Paris ⇄ Lyon (fictício)",
    xaxis_title="Hora do dia",
    yaxis_title="Distância desde Paris (km)",
    yaxis=dict(autorange="reversed"),  # Paris on top, Lyon at bottom
    hovermode="closest",
    template="plotly_white",
    height=700
)

fig

Medalha de Ouro

Uma das peças de comunicação de um sistema de transportes é o Mapa de Rede e por isso mesmo a representação esquemática introduzida por Beck com o Mapa do metro de Londres em 1933 marcou um momento de viragem nas peças de comunicação ao público.

Estamos de tal forma habituados a esta representação que é difícil ter a real noção da transformação, por isso, deixo para comparação o Mapa de Londres de 1908 que representava o “state of the art” a nivel mundial.

Metro de Londres 1908

Metro de Londres 1933 - Beck

A representação idealizada por Beck foi apenas ligeiramente melhorada (nos quase 100 anos decorridos), principalmente ao nível de cores e contraste. Os conceitos básicos que diferenciam esta representação permanecem, detalhes como a grelha octilinear, a distinção entre estações principais e secundárias.

O mapa esquemático de rede é de tal forma poderoso que é considerado pelas populações uma melhor referência que o próprio mapa geográfico.

Dada ser vista e compreendida por todo o tipo de pessoas em todo o mundo, esta visualização tem de estar no topo.

Menção Honrosa

Qualquer planeador de transportes ficaria decepcionado por não ver aqui a representação mais útil para o seu trabalho diário. É de inteira justiça destacar os diagramas de Gantt e a seu papel no processo de optimização.

Nota final - curiosidades

Na preparação deste artigo, encontrei muitos detalhes e técnicas utilizadas para melhorar as visualizações, mas sobretudo fiquei fascinado com técnicas de organização da informação que encontrei. São uma espécie de códigos secretos e ocultos que facilitam a interpretação por parte do nosso cérebro de forma inconsciente.

Um exemplo engraçado, que só conhecia em parte é o mapa das autoestradas em Espanha. Sendo Madrid a capital e no centro do território, existem 6 autoestradas radiais. Estas autoestradas estão numeradas no sentido do ponteiro dos relógios, começando com a A1 (Autovia del Norte) e acabando com a A6 (Autovia del Noroeste).

Adicionalmente, em Madrid foram feitas autoestradas circulares a M30, M40 e M50. A parte curiosa vem com a sua numeração, o 30, o 40 e o 50 correspondem aproximadamente ao seu perímetro, dando assim de forma indirecta uma referência geográfica adicional. Na verdade a M30 tem uma extensão de 32.5 km, sendo que foi usado o zero, precisamente para ter a representação gráfica de um circulo (o zero à direita). Infelizmente, foi criada a M45 em momento posterior e tiveram de optar entre continuar a dar a concistência de referência de aneis concênctricos, ou seja entre a M40 e a M50 ou manter o zero no final… Ficou M45.

Destaco este ponto sobre a importância dos sistemas de códigos (ou cores), porque nos ajudam a navegar uma quantidade enorme de informação quase sem darmos conta. Saber que alguém parou para pensar nisso é na minha opinião, fascinante.

---

Pausa Técnica