Visualization Design

Autumn 2025

Chart as Design

  • Visualization design: mais do que apenas uma tipologia de visualizations

Espaço de visualizations

Projetando com Data e Graphics

  • Vamos adotar uma abordagem mais granular para criar visualizations
  • Cada item de dado é codificado por um graphical mark
  • Como desenhamos o mark depende dos attributes, ou campos, do item de dado.
  • Uma abordagem estruturada para a criação de graphics nos ajuda a entender o espaço de design

Abordagem Declarativa para o Design

  • Escolha um mark marks
  • Para cada attribute: • Determine o type do attribute • Escolha um visual channel channels • Escolha um mapping: do data domain para o visual range • … desenhe! • (existem algumas variações dessa abordagem)

Graphical Marks, Visual Channels

Data: Attributes

  • Partindo dos data, como chegamos aos graphics?
  • Primeiro, precisamos determinar o attribute de um item de dado.

Scales

  • Em seguida: escolhemos um mapping do data domain para o visual range. Uma scale.
  • Distinguimos scales pelos attributes dos data. O data domain ou o visual range podem ser categorical, ordinal, ou quantitative.

Quantitative: Quantitative Linear Scale

  • O domain e o range são ambos quantitative. Primeiro consideramos uma scale linear.
  • Preliminares matemáticos:

    • Assuma que o data domain tem um valor mínimo e máximo \[ d_{min} \rightarrow d_{max}\]

    • Assuma que o data range tem um valor mínimo e máximo \[ r_{min} \rightarrow r_{max}\]

Quantitative: Quantitative Linear Scale

  • Buscamos uma função linear tal que: \[ f(d_{min}) = r_{min}\] e \[ f(d_{max}) = r_{max}\]

Quantitative: Quantitative Linear Scale

  • Processo de dois passos:

    • Normalizar os data no domain: \[ \alpha(d) = \frac{d - d_{min}}{d_{max} - d_{min}} \]

    • Interpolação linear no range: \[ f(\alpha(d)) = (1 - \alpha(d)) . r_{min} + \alpha(d) . r_{max} \]

Exemplo de Linear Scale

Outras Quantitative Scales

  • Podem ser usadas para diferentes funções, ex. quadratic, square root, etc.

  • Scale especial: log

    \[ \alpha(d) = \frac{log(d) - log(d_{min})}{log(d_{max}) - log(d_{min})} \\ f(\alpha(d)) = (1 - \alpha(d)) . r_{min} + \alpha(d) . r_{max} \]

Quantitative: Ordinal Quantized Scale

  • Nosso data domain é quantitative, nosso visual range é discrete - e em particular, ordered. \[ d_{min} \rightarrow d_{max} \\ R = [r_1, r_2, \dots, r_n] \]

  • Suposição comum: o range é dividido uniformemente pelo domain. \[ f(\alpha(d)) = r_i \text{ Onde } i = 1 + \lfloor n.\alpha_d \rfloor \]

Caso Especial: Binning Transformation

Ordinal: Quantitative Point Scale

  • Nosso data domain é ordinal, nosso visual range é quantitative. \[ D = [d_1, d_2, \dots, d_m] \text{ e } r_{min} \rightarrow r_{max} \]

\[ step = \frac{ r_{max} - r_{min} }{m-1} \\ f(d_i) = r_{min} + (i-1).step \]

Ordinal: Quantitative Band Scale

  • Também é comum introduzir padding no início e no fim.

\[ f(d_i) = r_{min} + (i-1).step \]

  • Usado para: bar marks, group transformations.

Exemplo

Resumo: Uma Receita para Criar Visualizations

  • Ingredientes: • Identificar os itens de dado. • Selecionar os data attributes. • Determinar um type para cada attribute. • Determinar um graphical mark para um item. • Selecionar um visual channel para cada attribute. • Selecionar uma scale para cada channel.

  • Referência: A Grammar of Graphics.