Своим опытом делятся дата-журналист, аналитик исследований Яндекса Алексей Смагин и графический дизайнер, преподаватель НИУ ВШЭ Алексей Новичков.
Оглавление
Задача 1. Создание простого графика
Задача 2. Поэтапное создание визуализации
Задача 3. Поэтапное создание сложной визуализации
Задача 4. Вопросы к нейросети на тему визуализации данных
Как создать график с помощью нейросети
Задача 1. Создание простого графика
Описание задачи
На основе данных из таблицы необходимо было построить график, показывающий динамику трат.
Промпт
Возьми данные из этой таблицы (ссылка). На основе этих данных сделай график, который покажет динамику трат: 1. График на белом фоне. Основные буквы чёрные. 2. Тип графика — Stacked Bar Chart. 3. Используй колонку «Из них жильё (Р)» — это будет нижний сектор столбика с цветом #3C152F. 4. Верхний сектор — Жизнь всего (Р) — Из них жильё (Р), это будет сектор с цветом #C18A88. 5. Заголовок — Стоимость жизни в кругосветке без билетов. 6. Подзаголовок Сумма на двоих в сутки, тыс. Р. В частности — жильё. У слова жильё надо сделать цвет фона #C18A88. 7. В верхней части графика подписываем страну из колонки Страна, если в стране провели от трёх и более дней. Подпись страны — тонким шрифтом заглавными буквами. 8. Чередуй подложку под столбиками как границы каждой стран. Либо белая (нет подложки), либо серая с большой прозрачностью. 9. Даты на оси Х надо подписать на русском языке, месяц тремя буквами. Месяц подписываем только в первую отображаемую дату месяца, потом только цифру.
Результат выдачи
Комментарий
Нейросети не сразу понимают, что ты от них хочешь. До результата надо идти поэтапно, детально формулируя требования. Вы быстро сделаете прототип, но увязнете в деталях. Сложные приложения и сложный код лучше писать не в чатовых нейросетях.
Задача 2. Поэтапное создание визуализации
Описание задачи
Для создания более сложных и детализированных визуализаций использовался Cursor. Повторим визуализацию ниже, используя только нейросеть.
Промпт 1
Возьми данные из covid cases. Напиши график на React. Стиль — минималистичный, белый фон. Заголовок — количество кейсов COVID-19 в Берлине. Тип графика — Stacked Bar Chart. Столбики сделай заливкой с прозрачностью 30%. Для черного столбика используй колонку Deaths. Для зелёного — Cases.
Результат выдачи нейросети 1
Комментарий
Нужно было видоизменить полученную визуализацию. Уточнения я указываю в новом промпте.
Промпт 2
Исправим заголовок: COVID-19 в Берлине: смерти и заражения по дням. Заголовок выровняй по левому краю и сделай жирным. Шрифт всего графика — Inter. Под словом «смерти» и «заражения» надо сделать фон такого же цвета, каким сделаны столбики. А также убери легенду.
Результат выдачи нейросети 2
Комментарий
Нейросеть агрегирует данные до месяца, но мне нужно посуточное отображение. Прошу исправить это в следующем промпте.
Промпт 3
У меня в файле посуточные данные — оставь их. Давай покажем даты с 2020-03-01 по 2020-07-07.
Результат выдачи нейросети 3
Комментарий
Нужно, чтобы смерти были внизу. Есть также замечания и уточнения по осям X и Y.
Промпт 4
Убери обводку, промежутки между столбиками и сделай столбики более прозрачными — пусть прозрачность будет на уровне 40%. Ось Y почему-то нужно начать с 0 и вести сетку через каждые 50. Подписи на оси X запрещено делать диагональными. Подписывай число и месяц в два ряда — сначала число, во второй строчке месяц. Месяц подписывай только первый раз — последующие дни того же месяца подписывай только днём. Подписи на оси X должны быть такого же размера, как на оси Y.
Результат выдачи нейросети 4
Комментарий
Засечки должны идти через равное количество дней. Оптимально — через каждую неделю или две. Также нет подписи месяца. Заголовок и самая левая часть подписи на оси Y должны начинаться на одной линии.
Промпт 5
Почему после какого-то месяца пропадают подписи месяцев? Сделай хотя бы пару недель на месяц, тут явно влезет больше цифр. Первая засечка на графике должна присутствовать и не должна быть далеко от начала.
Результат выдачи нейросети 5
Комментарий
Уже намного лучше, но все равно есть замечания и правки, которые я указываю в следующем промпте.
Промпт 6
Несколько правок по внешнему виду графика. 1. Сетку сделаем не пунктиром, а сплошной линией. 2. Уберём засечки на оси X. 3. Сделаем чёрную линию по Y на 0. 4. Отступ между заголовком и графиком сократим в 4 раза. 5. Сделаем сетку на оси X. 6. Пусть график заканчивается в самой верхней точке — выше самого верхнего столбика ничего быть не должно. 7. Сделаем числа на осях серого цвета.
Результат выдачи нейросети 6
Комментарий
Все правки учтены. Теперь приступаем к созданию дополнительных элементов.
Промпт 7
Поверх столбиков нарисуй на этом же графике линейный по колонке 7-day average. Линия должна быть тёмно-зелёного цвета. От точки 2020-04-09 на линии проведи горизонтальную прямую линию (для аннотации) и напиши текст: «заражения».
Результат выдачи нейросети 7
Комментарий
Линию необходимо откорректировать, как и формат аннотации.
Промпт 8
Линия должна быть прямой. И недлинной — пусть подпись будет рядом. Перенеси текст: в среднем за семь дней Сделай его жирным.
Результат выдачи нейросети 8
Задача 3. Поэтапное создание сложной визуализации
Описание задачи
Этот кейс (как и сама визуализация) интереснее и сложнее.
Промпт 1
Ты работаешь строго в папке smartphones. Тебе надо считать данные из файла smart_data.xlsx и построить бамп-чарт, используя d3.js и React. По оси X — год. По оси Y — рейтинг производителя (model) по import (первое место вверху). На их пересечении нарисованы круги, их площадь пропорциональна import, внутри каждого круга подписано число. Каждый производитель (model) обозначен своим цветом. Круги одного производителя соединены между собой линией. Заголовок — Как изменился импорт смартфонов в 2022 году, млн штук (жирным по левому краю). Подзаголовок (чуть меньше нежирным) — Площадь круга — объём импорта. Шрифт графика — Inter.
Результат выдачи нейросети 1
Комментарий
В исправлении нуждается размер графика.
Промпт 2
Нужно, чтобы график был по ширине экрана. Убери круглый контейнер.
Результат выдачи нейросети 2
Комментарий
Круги заходят друг на друга, такого быть не должно. Также нужно использовать другие цвета для самих кругов.
Промпт 3
Цвета: Samsung - 5B9CD9 Xiaomi — CF4344 Apple — 61BDEE Realme — FE5454 Tecno — FF9A9B Другие — D0D0D0. Круги очень большие и могут налезать друг на друга. Сделай без налезаний.
Результат выдачи нейросети 3
Комментарий
Нужно убрать ранжирование по местам в рейтинге и вместо этого указать названия компаний. Также не нужна легенда.
Промпт 4
1. Слева от первого (где сейчас места в рейтинге) и справа от последнего надо написать названия компаний, к которым относится круг. Выравнивание всех компаний — строго по левому краю, все названия компаний должны начинаться в одной точке по горизонтали. 2. Места в рейтинге убери. 3. Легенду убери.
Результат выдачи нейросети 4
Комментарий
Есть строчки рейтинга, которые начинаются не с первого года, так быть не должно.
Промпт 5
Есть строчки рейтинга, которые начинаются не с первого года. Подписывай там производителя, который встречается первым.
Результат выдачи нейросети 5
Комментарий
Почти готово. Осталось доработать круги и соединительные линии.
Промпт 6
Уменьши отступ после подзага до 10px. Десятичные числа разделяй запятой. Числа меньше четырёх подписывай под кружочками, а не внутри. Убери обводку у кругов. Если получается 0,0 — округляй до сотых, а не десятых. Соединительные линии сделай в два раза тоньше. Сделай эти линии закруглёнными, а не прямыми. Сделай площадь кругов поменьше.
Результат выдачи нейросети 6
Со всеми ли задачами справляется ИИ?
На этот вопрос сложно ответить прямо. ИИ редко что-то сразу делает, как ты хочешь — это всегда совместное творчество. Ты накидываешь первое видение задачи, ИИ предлагает решение. Ты начинаешь лучше понимать ограничения, объясняешь модели ошибки. Результат может стать лучше. А может и не стать — тогда приходится доделывать его «руками».
Иногда решение задачи превращается в ад. В работе над плагином для Figma я часто очень долго решал простые, казалось бы, задачи: например, смену десятичного разделителя в числе. Модель очень плохо ориентировалась в коде и начинала дописывать нерабочий код, который никогда не выполнялся и ничего не менял. Мне приходилось глубоко погружаться в работу программы, выводя на каждом этапе результаты в консоль, чтобы определить, на каком моменте все ломается.
В моей практике не существует каких-то «волшебных» промптов, которые позволяли бы решить целый класс задач. Чаще всего мой стиль работы с чатом — это последовательное обсуждение проекта с моделью — сначала первичное ТЗ, затем десятки корректировок.
Главный совет: ставить модели задачу так, как вы бы ставили ее стажеру. Стоит подробно описать все нюансы, технологии или последовательность действий, которые необходимы для достижения идеального результата.
Как работать с ИИ для визуализации данных: подходы и рекомендации
Вы можете отправить ChatGPT табличку с данными. База — это описать, какие поля из нее надо взять, и для чего использовать на графике. К примеру:
У тебя есть таблица с данными, из нее необходимо взять поля year | country | count. Построй линейный график, где по оси X будет year, по оси Y — count, а каждая country будет отдельной линией.
Для работы с графиками ChatGPT будет писать код — скорее всего, на Python или JS. Чтобы добиться хороших результатов, я рекомендую указывать конкретные библиотеки и технологии. Лучше всего писать код на JS, а в среде визуализаторов данных стандартом уже давно является библиотека d3. Также недавно я обнаружил, что ChatGPT отлично рисует графики, используя React — там по умолчанию получается хороший дизайн. Корректировка в таком случае будет выглядеть так:
Используя React, построй линейный график…
Также полезно сразу указывать все детали, которые повлияют на внешний вид графика. Нужна ли сетка? Какой будет шрифт? Какие цвета можно использовать для линий? Все это можно в дальнейшем уточнять в последующих сообщениях, но иногда бывает такое, что чат «забывает» предыдущие инструкции, и вы входите в бесконечный цикл правок — ломается то одно, то другое.
Когда сообщений становится слишком много, модель начинает «терять контекст» — забывать часть из того, что вы ей сказали. В таком случае можно попросить модель описать все требования в графику, которые вы давали, в одном сообщении в виде ТЗ, а затем перенести это ТЗ в другой чат.
Автор: Алексей Смагин
Нейросеть как консультант
Я энтузиаст ИИ и всячески приветствую умелое его использование. Я применяю нейросети как для создания учебных материалов, так и для заказов. Вот несколько примеров недавних задач:
- Написать код для автоматической визуализации.
- Забрать данные из изображения.
- Сделать серию единообразных иллюстрация для мастер-класса.
- Преобразование табличных данных в формат CSV.
- Создание вымышленного контента для прототипирования.
- Написание скрипта для Google Таблиц.
Я использую коллекторы ИИ-сервисов:
- Leonardo AI для генерации изображений.
- ChadGPT для работы с текстом или кодом.
- Mistral или DeepSeek, если нужно сэкономить средства.
Еще я экспериментирую с локальными нейронками, но пока только могу порекомендовать связку Krita + Stable Diffusion.
Использовал Comfy UI для экспериментов генерации изображений.
Локальные нейронки требуют мощных компьютеров и много места на диске. Сейчас я эти эксперименты прекратил, дешевле пользоваться облачными сервисами. Однако после приобретения мощного системника планирую вернуться.
Задача 4. Вопросы к нейросети на тему визуализации данных
Описание задачи
Очень часто я использую бесплатную нейросеть Mistral, чтобы получить быстрый ответ на технический вопрос, связанный с конкретной настройкой, кодом или оформлением. Например, я прибегал к такой помощи, когда работал с Python-библиотекой Altair.
Промпт
alt.Chart(dt).mark_tick().encode(
x=’AMOUNT_2’,
)
Как добавить прозрачность засечками в Altair?
Выдача нейросети
Со всеми ли задачами справляется ИИ?
Качество обычно низкое: плохо работающий код, неоптимальные решения, неточные или бракованные изображения, текст с недостоверными фактами. Все это нужно проверять или писать корректные запросы. Автоматизировать процессы я не рискую. Но кратко пересказать научную статью нейросеть может, но нужно обязательно просить ее не фантазировать.
Автор: Алексей Новичков