Начните здесь
Короткие пути в атлас — выберите один и пройдите семь разделов.
Популярное в Всё о визуализации
FAQ визуализации
Студия заменяет полный дизайн-сьют?
Оценки коронуют «лучший» график?
Студия гарантирует прохождение WCAG?
Круговые всегда плохи?
Студия
Смотреть атлас
📊 Графики
Столбцы, линии, круги, рассеяние, тепло, каскад, воронка, treemap.
▮ Столбчатая диаграмма
Сравнение категорий на общей базовой линии — честный график по умолчанию.
Открыть →
📈 Линейный график
Показывает изменение во времени непрерывной линией.
Открыть →
◐ Круговая и кольцевая
Соблазнительная форма «часть–целое» — сильна в рекламе, опасна при многих секторах.
Открыть →
⚬ Диаграмма рассеяния
Две измеряемые переменные облаком точек — честный разговор о корреляции.
Открыть →
▦ Тепловая карта
Матрица интенсивности — плотная, соблазнительная и легко лжёт радужной шкалой.
Открыть →
📶 Каскадная диаграмма
Как собрана сумма: старт, плюсы, минусы, финиш.
Открыть →
▽ Воронка
Сужающиеся этапы — маркетинг любит; наука должна спросить, честны ли ширины.
Открыть →
▭ Древовидная карта
Иерархия вложенными прямоугольниками — файлы, бюджеты, портфели.
Открыть →
📶 Гистограмма
Счётчики по интервалам: где копится измерение, а не сравнение категорий.
Открыть →
🔀 Схемы
Поток, оргструктура, интеллект-карта, Венн, лента времени.
⇨ Блок-схема
Рамки и стрелки для процесса — школьная классика, живая в операционных слайдах.
Открыть →
🌳 Оргструктура
Кто кому подчиняется — дерево для компании или школьного проекта.
Открыть →
✦ Интеллект-карта
Радиальная выгрузка идей — сильна для конспекта, слаба как готовый довод.
Открыть →
◯ Диаграмма Венна
Пересекающиеся множества — школьный любимец, в рекламе избитый.
Открыть →
— Лента времени
События на рельсе времени — история, запуски, календари кампаний.
Открыть →
⬡ Фигуры
Геометрия, стрелки, выноски, блоки.
▲ Геометрические фигуры
Круги, квадраты, треугольники, шестиугольники — алфавит рекламы и иконок.
Открыть →
→ Стрелки и соединители
Направление — довод: реклама и слайды живут стрелкой.
Открыть →
💬 Выноски и бейджи
Крик макета — бейджи скидок, пузыри, нумерованные шаги.
Открыть →
▣ Блоки инфографики
Страница из плиток — журналы, лендинги, школьные стенды.
Открыть →
🎯 Ремесло
Цвет, чернила данных, доступность.
🎨 Цветовые системы
Оттенок — инструмент, не декор: категориальные, последовательные и расходящиеся шкалы.
Открыть →
✒️ Чернила данных
Каждый пиксель должен окупаться — тест Тафти для отчётов.
Открыть →
♿ Доступная визуализация
Если работает только тон — не работает: паттерны, контраст и текст в сером.
Открыть →
✦ Студия
Отчёты, реклама, школа, питч.
📁 Рабочие отчёты
Недельный и квартальный пакет — столбцы, каскады и плитки за четыре минуты.
Открыть →
📣 Реклама и креатив
Формы, которые должны сработать с первого взгляда — бейджи, стрелки, кропы, одно число.
Открыть →
📚 Школьные задания
Рисунки, которые учитель может оценить — оси, источник, график по вопросу.
Открыть →
🎬 Питч-деки
Десять–пятнадцать слайдов-доводов: рынок, клин, доказательство, ask.
Открыть →
W Способы
Двадцать практических пособий — контрастность, сетки, Русалка, ECharts, D3, Lucide и другие — с лицензиями и ссылками на GitHub.
A11Y Проверка контрастности WCAG
Перед отправкой проверьте контрастность текста и фона — это самый быстрый способ обеспечить доступность слайдов, сайтов и плакатов.
Открыть →
PAL Конструктор палитр и масштабов
Создавайте категориальные, последовательные и разнообразные палитры, которые выдержат печать и просмотр с дальтонизмом.
Открыть →
Aa Типографический масштаб
Выберите модульную шкалу, чтобы заголовки, основная часть и подписи не конфликтовали друг с другом на слайдах и одностраничных страницах.
Открыть →
GRID Слайд и сетка документа
Выровняйте каждый блок по простой сетке, чтобы отчеты, презентации и плакаты выглядели продуманно без участия дизайнера.
Открыть →
CHOOSE Решение по преобразованию данных в диаграмму
Прежде чем открывать какой-либо инструмент, сопоставьте вопрос с кодировкой (сравнение, тенденция, часть к целому, корреляция).
Открыть →
MM Текстовые диаграммы русалок
Напишите блок-схему или последовательность действий в виде обычного текста — с возможностью версии, просмотра и бесплатно через Mermaid.
Открыть →
SEQ Шаблоны диаграмм последовательности
Покажите, кто с кем разговаривает во времени — шаблон офиса и класса для API, передачи обслуживания и протоколов.
Открыть →
SKETCH Каркасы эскизов Excalidraw
Нарисуйте идею с помощью Excalidraw перед полировкой — четкость рисунка лучше, чем преждевременная пиксельная обработка.
Открыть →
EC Панели мониторинга Apache ECharts
Поставляйте интерактивные офисные информационные панели с Apache ECharts — Apache-2.0, огромный каталог диаграмм, без использования собственных средств очистки.
Открыть →
CJ Быстрые диаграммы Chart.js
Перетащите Chart.js на страницу для честных баров и линий, если вам сегодня нужен веб-диаграмма, а не платформа.
Открыть →
D3 D3 индивидуальный ремесло
Используйте D3, когда кодировка не существует в шаблоне — полный контроль, более высокая стоимость разработки.
Открыть →
VL Грамматика Вега-Лайт
Объявляйте кодировки в формате JSON с помощью Vega-Lite — воспроизводимых диаграмм, обучающих грамматике графики.
Открыть →
PLOT Набор наблюдаемых графиков
Стройте аккуратные таблицы с помощью Observable Plot — лаконичного, лицензированного ISC и удобного для объяснения анализа анализа.
Открыть →
ROUGH Аннотация Rough.js
Используйте штрихи Rough.js, чтобы комментировать и подчеркивать — убедительность с помощью человечных знаков, а не хрома.
Открыть →
SANK Истории потока Санки
Расскажите, как количество перемещается между этапами с помощью Санки — бюджеты, воронки и истории энергии.
Открыть →
NET Карты сетевых графов
Отображайте отношения в виде узлов и связей (команды, цитаты, зависимости) с помощью открытых библиотек графов.
Открыть →
MAP Карты-истории Choropleth
Затеняйте регионы по ставкам — выборы, здоровье, продажи — с помощью открытых геостеков и честных цветовых шкал.
Открыть →
ICO Открытые системы иконок
Выберите один открытый набор значков и придерживайтесь его — последовательные метафоры превосходят смешанный клипарт в колодах и продуктах.
Открыть →
CV Возобновить инфографический рецепт
Создайте одностраничное визуальное резюме: сетка, масштаб шрифта, честные панели навыков, открытые значки — без дампа клипартов.
Открыть →
QBR Визуализация квартального отчета
Повторяемый квартальный пакет: водопадный мост, линии тренда, контрастный шрифт, одна идея на слайд.
Открыть →