Канал strokeWidth

Канал strokeWidth управляет толщиной линий и контуров в графических примитивах, основанных на обводке (stroke). В отличие от параметров, задающих геометрию (position, size), он относится к визуальному оформлению и влияет на восприятие веса элементов в визуализации.

В Vega-Lite этот канал применяется к маркам, поддерживающим обводку: line, area (контур), rule, tick, rect (в некоторых режимах), а также к точечным маркам с обводкой (point при использовании filled: false или комбинированных стилей).

Основная задача — кодирование количественных или категориальных данных через толщину линии, что позволяет добавлять дополнительное измерение в визуализацию без изменения пространственной структуры графика.

Базовое использование strokeWidth

Канал задаётся через encoding и может принимать:

  • числовое значение (константа)
  • поле данных (field)
  • агрегированное значение
  • выражение или условное правило

Простейший пример:

{
  "mark": "line",
  "encoding": {
    "x": { "field": "year", "type": "temporal" },
    "y": { "field": "value", "type": "quantitative" },
    "strokeWidth": { "value": 2 }
  }
}

В этом случае толщина линии фиксирована и не зависит от данных.

Использование strokeWidth как канала данных

Когда strokeWidth связан с полем, он превращается в визуальный канал кодирования.

{
  "mark": "line",
  "encoding": {
    "x": { "field": "time", "type": "temporal" },
    "y": { "field": "temperature", "type": "quantitative" },
    "strokeWidth": {
      "field": "confidence",
      "type": "quantitative"
    }
  }
}

Здесь толщина линии отражает уровень уверенности. Более высокие значения делают линию визуально доминирующей, что усиливает восприятие надёжных сегментов данных.

Масштабирование strokeWidth

Как и другие количественные каналы, strokeWidth проходит через scale. Vega-Lite автоматически применяет масштабирование, но его можно настроить.

"strokeWidth": {
  "field": "value",
  "type": "quantitative",
  "scale": {
    "range": [1, 8]
  }
}

Особенности масштабирования:

  • минимальные значения предотвращают исчезновение линий
  • максимальные значения ограничивают визуальную перегрузку
  • нелинейные шкалы редко применяются, но возможны через преобразования данных

Агрегированные значения

strokeWidth часто используется с агрегатами, чтобы подчеркнуть статистические характеристики.

{
  "mark": "line",
  "encoding": {
    "x": { "field": "category", "type": "nominal" },
    "y": { "aggregate": "mean", "field": "value", "type": "quantitative" },
    "strokeWidth": { "aggregate": "count" }
  }
}

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

Условное управление strokeWidth

Vega-Lite поддерживает условные конструкции через condition, позволяя динамически менять толщину линии в зависимости от логики.

{
  "mark": "line",
  "encoding": {
    "x": { "field": "x", "type": "quantitative" },
    "y": { "field": "y", "type": "quantitative" },
    "strokeWidth": {
      "condition": {
        "test": "datum.value > 100",
        "value": 4
      },
      "value": 1
    }
  }
}

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

Взаимодействие с другими каналами

strokeWidth редко используется изолированно и часто комбинируется с другими визуальными каналами:

  • color — разделение категорий
  • opacity — дополнительная степень важности
  • size — для точек и областей
  • strokeDash — различение типов линий

Комбинация strokeWidth и color особенно эффективна в многосерийных временных рядах, где необходимо одновременно показать категорию и значимость.

Ограничения и особенности восприятия

Использование толщины линии как канала данных имеет ряд ограничений:

  1. Низкая точность восприятия Человеческий глаз хуже различает небольшие изменения толщины, чем, например, изменения длины или положения.

  2. Перегрузка при больших диапазонах Слишком широкий диапазон значений приводит к визуальному дисбалансу.

  3. Конфликт с плотными графиками В насыщенных line chart толстые линии могут перекрывать друг друга.

Поэтому strokeWidth лучше применять для:

  • вторичных показателей
  • индикаторов уверенности
  • бинарных или категориальных различий

Различие между Vega и Vega-Lite

В Vega-Lite strokeWidth задаётся через декларативный канал encoding, тогда как в Vega (низкоуровневом языке) он определяется непосредственно в marks.

Vega-Lite:

"mark": "line",
"encoding": {
  "strokeWidth": { "value": 3 }
}

Vega (core spec):

{
  "type": "line",
  "encode": {
    "update": {
      "strokeWidth": { "value": 3 }
    }
  }
}

Vega предоставляет больше контроля, включая динамические сигналы (signals), но требует более детальной настройки.

Использование с point и rule марками

point

При использовании point strokeWidth управляет толщиной обводки точек:

{
  "mark": {
    "type": "point",
    "filled": false
  },
  "encoding": {
    "x": { "field": "x", "type": "quantitative" },
    "y": { "field": "y", "type": "quantitative" },
    "strokeWidth": { "field": "importance", "type": "quantitative" }
  }
}

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

rule

Для rule strokeWidth особенно важен, так как правило обычно представлено тонкой линией:

{
  "mark": "rule",
  "encoding": {
    "y": { "value": 0 },
    "strokeWidth": { "value": 2 }
  }
}

Работа с преобразованиями данных

strokeWidth может зависеть от трансформированных данных:

  • binning (группировка значений)
  • aggregate (сумма, среднее)
  • calculate (выражения)
  • density (оценка плотности)

Пример с вычисляемым полем:

{
  "transform": [
    { "calculate": "datum.a / datum.b", "as": "ratio" }
  ],
  "mark": "line",
  "encoding": {
    "strokeWidth": {
      "field": "ratio",
      "type": "quantitative"
    }
  }
}

Типичные паттерны использования

1. Уровень уверенности

Толщина линии отражает достоверность прогнозов или моделей.

2. Объём выборки

Чем больше данных в группе, тем толще линия.

3. Приоритет или важность

Основные серии выделяются более толстой линией.

4. Сравнение сценариев

Разные сценарии отображаются разной толщиной для визуальной иерархии.

Практические ограничения при проектировании

  • минимальная толщина не должна быть ниже 1px
  • максимальная редко превышает 6–8px
  • желательно избегать перекрытия линий с высоким strokeWidth
  • при большом числе серий предпочтительнее использовать цвет вместо толщины

Поведение при взаимодействии

strokeWidth может динамически изменяться при взаимодействии:

  • hover-подсветка увеличивает толщину
  • selection (interval/point selection) изменяет strokeWidth выбранных элементов
  • фильтрация может переключать толщину между состояниями

Пример:

"strokeWidth": {
  "condition": {
    "selection": "hover",
    "value": 5
  },
  "value": 2
}

Такие эффекты повышают читаемость интерактивных графиков, не перегружая базовую визуализацию.

Оглавление