Галерея примеров

Здесь представлены спецификации для разных видов диаграмм. Пример кода встраивания визуализации в веб-страницу приведён в документации по встраиванию.

• Отдельные диаграммы
  • Столбчатые диаграммы
  • Гистограммы, плотности и точечные диаграммы
  • Диаграммы рассеяния и полосовые диаграммы
  • Линейные графики
  • Диаграммы с областями и потоковые диаграммы
  • Тепловые карты и табличные диаграммы
  • Круговые и радиальные диаграммы
  • Сложные вычисления
• Составные графические элементы
  • Погрешности и доверительные интервалы
  • Ящики с усами
• Многослойные диаграммы
  • Подписи и аннотации
  • Другие многослойные диаграммы
• Комбинации диаграмм
  • Панельные диаграммы
  • Повторение и объединение
• Карты
• Интерактивные диаграммы
  • Интерактивные диаграммы
  • Интерактивные комбинации диаграмм

Отдельные диаграммы

Столбчатые диаграммы

Простая столбчатая диаграммаАдаптивная столбчатая диаграммаСтолбчатая диаграмма с агрегированиемСтолбчатая диаграмма с агрегированием и сортировкойСгруппированные столбцыСгруппированные столбцы для нескольких показателей с repeatСтолбцы с накоплениемСтолбцы с накоплением и скруглёнными угламиГоризонтальные столбцы с накоплениемНормированные столбцы с накоплением в процентахНормированные столбцы с накоплением в процентах и подписямиДиаграмма Ганта со столбцами, задающими интервалыЦвета столбцов из данныхМногослойная столбчатая диаграммаДвусторонняя диаграмма с накоплением: пирамида населенияДвусторонняя диаграмма с накоплением и нейтральными частямиСтолбчатая диаграмма с подписямиПодписи поверх столбцовСтолбцы с начальными буквами месяцевСтолбцы по центру временных интерваловСтолбчатая диаграмма с отрицательными значениями и линией нуляГоризонтальные столбцы с отрицательными значениями и подписямиСтолбчатая диаграмма с компактной осью YТепловые полосы

Гистограммы, плотности и точечные диаграммы

ГистограммаГистограмма по данным, заранее разбитым на интервалыГистограмма с логарифмической шкалойГистограмма с нелинейной шкалойГистограмма относительных частотГрафик плотности распределенияОценки плотности распределения с накоплениемДвумерная гистограмма с кругамиДвумерная гистограмма в виде тепловой картыНакопленное распределение частотНаложение гистограммы и накопленной гистограммыТочечная диаграмма УилкинсонаИзотипная точечная диаграммаИзотипная диаграмма с эмодзиСтолбцы в долях от общей суммы

Диаграммы рассеяния и полосовые диаграммы

Диаграмма рассеянияОдномерная полосовая диаграммаПолосовая диаграммаДиаграмма рассеяния с цветовым кодированиемДвумерная гистограмма с кругамиПузырьковая диаграммаДиаграмма рассеяния с пропущенными значениями серого цветаДиаграмма рассеяния с заполненными кругамиПузырьковая диаграмма GapminderПузырьковая диаграмма природных катастрофДиаграмма рассеяния с текстовыми меткамиДиаграмма рассеяния с изображениямиПолосовая диаграмма с особыми подписями осиТочечная диаграмма со случайным смещением

Линейные графики

Линейный графикЛинейный график с точкамиЛинейный график с точками и обводкойЛинейный график с несколькими рядами данныхЛинейный график с несколькими рядами и оператором repeatЛинейный график с несколькими рядами и обводкой в виде ореолаГрафик наклоновСтупенчатый графикЛиния с монотонной интерполяциейЛиния с условным оформлением осиСоединённая диаграмма рассеяния с заданным порядком точекГрафик изменения ранговЛинейный график переменной толщины с примитивом trailКометная диаграмма изменений между двумя состояниямиЛиния с точками и пропущенными значениямиКонцентрация углекислого газа в атмосфереИзменение рангов во времениСинус и косинус из сгенерированной последовательностиЛинейный график с разными штриховыми обводкамиЛинейный график с пунктирным участком

Диаграммы с областями и потоковые диаграммы

Диаграмма с областьюОбласть с градиентомОбласть с линией и точкамиОбласти с накоплениемНормированные области с накоплениемПотоковая диаграммаГоризонтная диаграмма

Тепловые карты и табличные диаграммы

Табличная тепловая картаТепловая карта погоды за годДвумерная гистограмма в виде тепловой картыТабличная пузырьковая диаграмма активности GitHubТепловая карта с подписямиДиаграмма «лазанья»: плотная тепловая карта временных рядовМозаичная диаграмма с подписямиКарта ветра с векторами

Круговые и радиальные диаграммы

Круговая диаграммаКруговая диаграмма с долями в подсказкеКольцевая диаграммаКруговая диаграмма с подписямиРадиальная диаграммаПирамидальная круговая диаграмма

Сложные вычисления

Столбцы в долях от общей суммыОтклонение от среднегоОтклонение от среднего за годРасчёт остатковИзменение рангов во времениКаскадная диаграмма ежемесячной прибыли и убытковОтбор первых K элементовПервые K элементов и категория «Остальные»Объединение наборов данных с помощью lookupНакопленное распределение частотНаложение гистограммы и накопленной гистограммыГрафик параллельных координатСтолбцы со значением argmaxСреднее поверх исходных значенийСкользящее среднее поверх исходных значенийЛинейный график результатов измерения производительностиГрафик «квантиль — квантиль» (Q–Q)Линейная регрессияРегрессия LOESSЗаполнение пропусков средним предыдущего и следующего значений с windowТреугольная диаграмма

Составные графические элементы

Погрешности и доверительные интервалы

Полосы погрешности с доверительным интерваломПолосы погрешности со стандартным отклонениемЛинейный график с полосой доверительного интервалаДиаграмма рассеяния с наложением среднего и стандартного отклонения

Ящики с усами

Ящик с усами от минимума до максимумаЯщик Тьюки с правилом 1,5 IQRЯщик с усами по готовым сводным данным

Многослойные диаграммы

Подписи и аннотации

Простая столбчатая диаграмма с подписямиПростая столбчатая диаграмма с подписями и эмодзиТекст поверх тепловой картыКонцентрация углекислого газа в атмосфереСтолбчатая диаграмма с выделением значений выше порогаСреднее поверх диаграммы осадковГистограмма с линией общего среднегоЛинейный график с выделенными прямоугольникамиСреднее поверх исходных значенийСкользящее среднее поверх исходных значенийРаспределения и медианы оценок по шкале ЛайкертаСравнение оценок по шкале Лайкерта

Другие многослойные диаграммы

Свечная диаграммаТочки с диапазонамиПулевые диаграммыМногослойная диаграмма с двумя осямиГоризонтная диаграммаПогода за неделюПшеница и заработная плата

Комбинации диаграмм

Панельные диаграммы

Панельная столбчатая диаграммаПанельные столбцы с накоплениемПанельная диаграмма рассеяния с переносомПанельные гистограммыПанельные диаграммы рассеяния с квартетом ЭнскомбаПанельная диаграмма Беккера с данными о ячменеПанельные диаграммы с областямиПанельные диаграммы с областями: температура в Сиэтле по годамПанельные графики плотностиКомпактная сетка столбчатых диаграмм

Повторение и объединение

Повторение и слои для разных показателей фильмовВертикальное объединение диаграммПовторённые диаграммы по горизонталиИнтерактивная матрица диаграмм рассеянияМаргинальные гистограммыДискретизация шкалВложенное объединение представлений с выравниванием по minExtent осиПирамида населения

Карты

Картограмма уровня безработицы по округамТочка для каждого почтового индекса СШАТочки аэропортов США поверх географических контуровОтрезки от аэропорта SEA к аэропортам с прямым сообщениемТри картограммы с разными данными из одной таблицыСтолицы штатов на карте СШАЛиния между аэропортами СШАДоходы в США по штатам с панелями для групп доходаЛинии лондонского метроВыбор картографической проекцииИнтерактивная карта землетрясенийПанельные карты ареалов видов на уровне округов

Интерактивные диаграммы

Интерактивные диаграммы

Столбчатая диаграмма с подсветкой при наведении и выбором по щелчкуГистограмма с областью наведения для подсказок на всю высотуИнтерактивная легендаДиаграмма рассеяния со ссылками и подсказкамиПрямоугольное выделениеДиаграмма с областью и прямоугольным выделениемВыделение точек кистьюПеремещение и масштабирование диаграммы рассеянияФильтрация через элементы управленияИнтерактивное среднееЛинейный график с несколькими рядами и интерактивной подсветкой линииЛинейный график с несколькими рядами и интерактивной подсветкой точкиНесколько линий с подписямиЛинейный график с несколькими рядами и подсказкой через pivotЛинейный график с несколькими рядами и подсказкойИзотипная сеткаВыделение на диаграмме рассеяния для показа данных в таблицеТепловая карта с выбором ячеекСтолбчатая диаграмма с миникартойИнтерактивный индексный графикФокус и контекст: плавное масштабирование гистограммыДинамическая цветовая легендаПоиск по вводимому текстуИзменение порядка слоёв при наведении

Интерактивные комбинации диаграмм

Обзор и детализацияПерекрёстная фильтрацияПерекрёстная подсветкаИнтерактивная матрица диаграмм рассеянияИнтерактивная панель со связанной подсветкойИсследование погоды в СиэтлеСеть крупных аэропортов СШАИнтерактивная диаграмма рассеяния мировой статистики здоровья по странам и годам

Примеры сообщества

Здесь перечислены примеры визуализаций Vega-Lite, созданных сообществом. Чтобы расширить оригинальную галерею, создайте свою копию шаблона примера и отправьте pull request, добавив свой пример в список.

• Многие визуализации в книге Making Data Visual Дэниела Фишера и Мириа Мейер созданы с помощью Vega-Lite.
• Столбчатая диаграмма с группировкой — @churtado.
• Столбчатая диаграмма с отрицательными значениями — @digi0ps.
• Выделение нескольких линий — @amitkaps.
• Диаграмма наклонов — @g3o2.
• Линия у ближайшей точки диаграммы рассеяния — @amitkaps.
• Линия по выделению на диаграмме рассеяния — @amitkaps.
• Прямоугольная диаграмма единиц — @amitkaps.
• Диаграмма единиц с накоплением — @amitkaps.
• Диаграмма единиц с малыми кратными — @amitkaps.
• Диаграмма «точки и штрихи» — @g3o2.
• Накопленная сумма пожертвований Википедии — @domoritz.
• Концентрация CO₂ в атмосфере — @domoritz.
• Горизонтальная столбчатая диаграмма с накоплением и подписями — @pratapvardhan.
• Интерактивные временные ряды с накоплением — @jakevdp.
• Временной ряд количества велосипедистов с динамической шкалой — @jakevdp.
• Загрузки Vega-Lite — @domoritz.
• Каскадная диаграмма — @italo-batista.
• Столбчатые диаграммы, малые кратные, тепловые карты и диаграммы Ганта: исследование разрешений на проведение мероприятий в Нью-Йорке — @hydrosquall.
• Отображение пикселей изображения — @amitkaps.
• Диаграмма первых K значений с группой «Остальные» — @manzt.
• Справочник интерактивной графики Vega-Lite от Trafford Data Lab — @trafforddatalab.
• Карта международных авиарейсов — @alhenry.
• Перенос сборника примеров визуальной журналистики и журналистики данных BBC в Vega-Lite — @aezarebski.
• Регистрации автомобилей в Португалии: три диаграммы с перекрёстной фильтрацией — @jlborges.
• Интерактивная диаграмма рангов — @jlborges.
• Интерактивная панель — @jlborges.
• Панель анализа влияния субсидий рынка труда в Австрии — @schmoigl.
• Рост людей в разных странах мира — @schmoigl.
• Расходящаяся точечная диаграмма — @shadfrigui.