d3-data-visualization

Навык OpenAI предназначен для кастомных браузерных визуализаций, когда SVG или DOM-семантика важнее готовой декларативной грамматики. Его рекомендуют для графиков с нестандартными marks, собственными шкалами и раскладками, подробными подписями, аннотациями, переходами, zoom, brush, drag и экспортом в векторный формат. D3 в этом workflow отвечает прежде всего за математику, геометрию и поведение визуализации, а не за архитектуру всего приложения. Если вокруг графика уже есть React или другой UI-фреймворк, структура интерфейса остаётся у фреймворка, а D3 можно ограничить небольшим императивным островком с ясной границей ответственности. Работа начинается с чистой модели данных. Инструкции предлагают отдельно держать parsing и normalization, построение шкал, вычисление производной геометрии, rendering и состояние взаимодействий. Для data joins следует использовать устойчивые ключи, чтобы добавление или удаление точек не разрушало соответствие элементов. Для средних объёмов marks подходят DOM и SVG; для очень большого числа элементов, непрерывной анимации или жёсткого frame budget источник советует рассмотреть Canvas2D или WebGL. Это важное ограничение: D3 не делает большой DOM автоматически быстрым и не заменяет выбор подходящего rendering layer. В SVG явно выделяются слои данных, подписей и аннотаций. Подписи могут быть прямыми end labels, встроенными ключами или panel labels, а callout должен прикрепляться к точке, диапазону, порогу или осмысленной геометрии предметной области, а не быть декоративным плавающим блоком. Для осей и gridlines рекомендуются спокойные штрихи, небольшие внешние ticks и удаление лишних доменов; для zoomable outlines, connectors и icons полезен non-scaling stroke. Настройки размеров шрифта, tick padding, толщины линий и выравнивания должны быть явными, особенно если SVG будет экспортироваться или печататься. Навык покрывает не только обычные charts. Его паттерны подходят для карт, flow и state diagrams, UML-подобных схем, scrollytelling, parallax-сцен и контекстных поверхностей вроде поля, трека, схемы помещения или другой геометрии предметной области. В таком случае фон держится отдельным слоем, исходные единицы и render scale задаются явно, а data marks, labels и annotation layers остаются inspectable и экспортируемыми. Для story-driven графики переходы должны показывать последовательность, направление, накопление, механизм или сравнение; reduced-motion режим должен показывать финальное состояние без обязательной анимации. Адаптивность здесь не сводится к уменьшению одного desktop viewBox. Источник требует пересчитывать layout, высоту plot, число ticks, размещение labels, правила collision и annotation placement для узкого экрана. На мобильном устройстве tap и focus должны заменять hover, интерактивные marks должны иметь увеличенную область попадания, а drag, pinch и zoom должны иметь однозначного владельца. Если фильтры или настройки открываются поверх графика, пользователь должен иметь очевидный путь вернуться к chart. Так сохраняются доступность, читаемость и возможность проверить данные без наведения мыши. Практический результат навыка — обоснованный выбор D3 как слоя рендеринга, семантичная inspectable-структура, явные reset controls и export path, если экспорт нужен задаче. Он не обещает автоматически готовый production chart: одновременно нужно оценить число экземпляров на странице, стоимость DOM и взаимодействий, размер dataset, мобильное поведение, доступность и отличие от Canvas или WebGL. Ссылки на дополнительные foundations и reference-файлы являются частью workflow самого источника; карточка описывает инженерный способ построения визуализации, а не гарантирует корректность конкретного набора данных или дизайна без проверки в целевом приложении.