tick

tick — специализированный тип графического элемента в Vega-Lite, предназначенный для отображения отдельных значений вдоль одной оси. Визуально tick представляет собой короткую линию, ориентированную вертикально или горизонтально. Такой тип визуализации особенно полезен для компактного отображения распределений, сравнений категорий и построения минималистичных статистических графиков.

Tick-графики занимают промежуточное положение между точечными диаграммами (point) и столбчатыми диаграммами (bar):

  • в отличие от point, tick имеет длину;
  • в отличие от bar, tick не кодирует величину площадью.

Базовая структура tick-графика

Минимальный пример:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"category": "A", "value": 10},
      {"category": "B", "value": 25},
      {"category": "C", "value": 18}
    ]
  },
  "mark": "tick",
  "encoding": {
    "x": {"field": "category", "type": "nominal"},
    "y": {"field": "value", "type": "quantitative"}
  }
}

В данном примере:

  • по оси x располагаются категории;
  • по оси y — числовые значения;
  • каждая категория отображается короткой вертикальной линией.

Принцип работы tick

Tick всегда строится вокруг одной координаты:

  • вертикальный tick фиксируется по оси x;
  • горизонтальный tick фиксируется по оси y.

Фактически tick — это короткий сегмент линии, центрированный относительно координаты значения.

Вертикальные и горизонтальные tick

Вертикальный tick

По умолчанию tick вертикален:

{
  "mark": "tick",
  "encoding": {
    "x": {"field": "month", "type": "ordinal"},
    "y": {"field": "temperature", "type": "quantitative"}
  }
}

Горизонтальный tick

Для горизонтального отображения используется свойство orient.

{
  "mark": {
    "type": "tick",
    "orient": "horizontal"
  },
  "encoding": {
    "x": {"field": "salary", "type": "quantitative"},
    "y": {"field": "department", "type": "nominal"}
  }
}

В этом случае tick становится горизонтальной линией.

Настройка размера tick

Свойство size

Размер tick регулируется параметром size.

{
  "mark": {
    "type": "tick",
    "size": 30
  }
}

Чем больше значение size, тем длиннее отметка.

Динамический размер через encoding

Размер можно кодировать данными:

{
  "mark": "tick",
  "encoding": {
    "x": {"field": "category", "type": "nominal"},
    "y": {"field": "value", "type": "quantitative"},
    "size": {"field": "importance", "type": "quantitative"}
  }
}

Такой подход позволяет визуально выделять более важные элементы.

Цвет tick

Статический цвет

{
  "mark": {
    "type": "tick",
    "color": "darkred"
  }
}

Цвет через данные

{
  "mark": "tick",
  "encoding": {
    "x": {"field": "country", "type": "nominal"},
    "y": {"field": "population", "type": "quantitative"},
    "color": {"field": "region", "type": "nominal"}
  }
}

Каждый регион получает собственный цвет.

Толщина линии tick

Толщина задаётся через thickness.

{
  "mark": {
    "type": "tick",
    "thickness": 3
  }
}

По сути это аналог strokeWidth для tick.

Прозрачность

Общая прозрачность

{
  "mark": {
    "type": "tick",
    "opacity": 0.5
  }
}

Прозрачность через encoding

{
  "mark": "tick",
  "encoding": {
    "x": {"field": "name", "type": "nominal"},
    "y": {"field": "score", "type": "quantitative"},
    "opacity": {"field": "confidence", "type": "quantitative"}
  }
}

Tick и агрегирование

Tick отлично подходит для отображения агрегированных статистик.

Средние значения

{
  "mark": "tick",
  "encoding": {
    "x": {"field": "group", "type": "nominal"},
    "y": {
      "aggregate": "mean",
      "field": "value",
      "type": "quantitative"
    }
  }
}

Минимум и максимум

{
  "layer": [
    {
      "mark": {
        "type": "tick",
        "color": "red"
      },
      "encoding": {
        "x": {"field": "category", "type": "nominal"},
        "y": {
          "aggregate": "min",
          "field": "price",
          "type": "quantitative"
        }
      }
    },
    {
      "mark": {
        "type": "tick",
        "color": "green"
      },
      "encoding": {
        "x": {"field": "category", "type": "nominal"},
        "y": {
          "aggregate": "max",
          "field": "price",
          "type": "quantitative"
        }
      }
    }
  ]
}

Tick как элемент box plot

Tick часто используется внутри box plot для отображения медианы.

Пример:

{
  "mark": {
    "type": "boxplot",
    "median": {
      "color": "black",
      "size": 8
    }
  }
}

Хотя медиана визуально напоминает tick, внутри Vega-Lite она реализуется как часть составной визуализации.

Tick для отображения распределений

Rug plot

Один из наиболее распространённых сценариев использования tick — rug plot.

{
  "mark": {
    "type": "tick",
    "orient": "vertical"
  },
  "encoding": {
    "x": {"field": "value", "type": "quantitative"}
  }
}

Такой график показывает плотность распределения значений вдоль оси.

Комбинация с density plot

{
  "layer": [
    {
      "transform": [
        {
          "density": "value"
        }
      ],
      "mark": "line",
      "encoding": {
        "x": {"field": "value", "type": "quantitative"},
        "y": {"field": "density", "type": "quantitative"}
      }
    },
    {
      "mark": {
        "type": "tick",
        "orient": "vertical",
        "color": "black"
      },
      "encoding": {
        "x": {"field": "value", "type": "quantitative"},
        "y": {
          "value": 0
        }
      }
    }
  ]
}

Tick в нижней части графика показывает реальные наблюдения.

Смещение tick

dx и dy

Tick можно смещать относительно базовой позиции.

{
  "mark": {
    "type": "tick",
    "dx": 5,
    "dy": -3
  }
}

Угол поворота

Tick поддерживает вращение через angle.

{
  "mark": {
    "type": "tick",
    "angle": 45
  }
}

Это редко используется, но может быть полезно в специализированных визуализациях.

Tick и слои

Tick особенно эффективен в layered chart.

Поверх line chart

{
  "layer": [
    {
      "mark": "line",
      "encoding": {
        "x": {"field": "date", "type": "temporal"},
        "y": {"field": "price", "type": "quantitative"}
      }
    },
    {
      "mark": {
        "type": "tick",
        "color": "red",
        "size": 20
      },
      "encoding": {
        "x": {"field": "date", "type": "temporal"},
        "y": {"field": "price", "type": "quantitative"}
      }
    }
  ]
}

Tick позволяет выделить отдельные наблюдения поверх линии.

Tick и интерактивность

Tooltip

{
  "mark": "tick",
  "encoding": {
    "x": {"field": "product", "type": "nominal"},
    "y": {"field": "sales", "type": "quantitative"},
    "tooltip": [
      {"field": "product"},
      {"field": "sales"}
    ]
  }
}

Выделение при наведении

{
  "mark": {
    "type": "tick"
  },
  "encoding": {
    "x": {"field": "category", "type": "nominal"},
    "y": {"field": "value", "type": "quantitative"},
    "color": {
      "condition": {
        "param": "hover",
        "value": "orange"
      },
      "value": "steelblue"
    }
  },
  "params": [
    {
      "name": "hover",
      "select": {
        "type": "point",
        "on": "mouseover"
      }
    }
  ]
}

Tick и временные данные

Tick часто используется для временных шкал.

{
  "mark": "tick",
  "encoding": {
    "x": {
      "field": "timestamp",
      "type": "temporal"
    },
    "y": {
      "field": "event_count",
      "type": "quantitative"
    }
  }
}

Tick и логарифмические шкалы

{
  "mark": "tick",
  "encoding": {
    "x": {
      "field": "frequency",
      "type": "quantitative",
      "scale": {
        "type": "log"
      }
    }
  }
}

Tick хорошо работает с логарифмическими распределениями благодаря компактности.

Tick в faceting

Разделение по категориям

{
  "facet": {
    "field": "region",
    "type": "nominal"
  },
  "spec": {
    "mark": "tick",
    "encoding": {
      "x": {"field": "income", "type": "quantitative"}
    }
  }
}

Tick и transform

Фильтрация данных

{
  "transform": [
    {
      "filter": "datum.value > 50"
    }
  ],
  "mark": "tick",
  "encoding": {
    "x": {"field": "value", "type": "quantitative"}
  }
}

Вычисляемые поля

{
  "transform": [
    {
      "calculate": "datum.sales * datum.price",
      "as": "revenue"
    }
  ],
  "mark": "tick",
  "encoding": {
    "x": {"field": "product", "type": "nominal"},
    "y": {"field": "revenue", "type": "quantitative"}
  }
}

Стилизация tick

Скругления

Tick поддерживает свойства линий:

{
  "mark": {
    "type": "tick",
    "strokeCap": "round"
  }
}

Возможные значения:

  • butt
  • round
  • square

Ограничения tick

Tick плохо подходит для:

  • отображения больших объёмов категорий;
  • сложных многомерных сравнений;
  • визуализации накопительных величин;
  • отображения диапазонов.

Отличие tick от point

Свойство tick point
Форма линия точка
Длина есть нет
Компактность высокая средняя
Выразительность распределений высокая средняя

Отличие tick от bar

Свойство tick bar
Отображение величины позиция длина
Площадь отсутствует присутствует
Минимализм высокий средний
Нагрузка на восприятие низкая выше

Практический пример: финансовые котировки

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "url": "data/stocks.csv"
  },
  "mark": {
    "type": "tick",
    "thickness": 2,
    "color": "darkblue"
  },
  "encoding": {
    "x": {
      "field": "date",
      "type": "temporal"
    },
    "y": {
      "field": "price",
      "type": "quantitative"
    }
  }
}

Практический пример: rug plot распределения

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "data": {
    "values": [
      {"value": 5},
      {"value": 8},
      {"value": 9},
      {"value": 12},
      {"value": 13},
      {"value": 15},
      {"value": 18}
    ]
  },
  "mark": {
    "type": "tick",
    "orient": "vertical",
    "size": 15
  },
  "encoding": {
    "x": {
      "field": "value",
      "type": "quantitative"
    }
  }
}

Практический пример: статистические интервалы

{
  "layer": [
    {
      "mark": {
        "type": "rule",
        "strokeWidth": 2
      },
      "encoding": {
        "x": {"field": "category"},
        "y": {"field": "min"},
        "y2": {"field": "max"}
      }
    },
    {
      "mark": {
        "type": "tick",
        "color": "red",
        "size": 25,
        "thickness": 3
      },
      "encoding": {
        "x": {"field": "category"},
        "y": {"field": "mean"}
      }
    }
  ]
}

Tick в данном случае показывает среднее значение внутри диапазона.

Оглавление