Навыки d3js-visualization
📦
d3js-visualization
Ревизия содержимого r1 Средний риск ⚙️ Внешние команды🌐 Доступ к сети
Создание визуализаций данных на D3.js
Пользовательские браузерные диаграммы часто требуют принять множество решений по D3 еще до появления данных. Этот навык предоставляет рекомендации по диаграммам, шаблоны, вспомогательные материалы и примеры для Claude, Codex и Claude Code.
Поддерживает: Claude Codex Code(CC)
Установить с помощью моего Агента
Скопируйте этот запрос в своего Агента. Он содержит каноническую страницу Skill и манифест.
Запрос агента
Review the Skillstore skill "d3js-visualization" from https://skillstore.io/skills/autumnsgrove-d3js-visualization.md and its manifest at https://skillstore.io/api/skills/autumnsgrove-d3js-visualization/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.Ваш Агент по-прежнему должен показать план и запросить все подтверждения, требуемые политикой безопасности.
Ресурсы для AI-агентов
Используйте эти ссылки, когда AI-агенту, crawler или script нужен чистый контекст вместо полной страницы.
Протестировать
Использование «d3js-visualization». Создайте адаптивную диаграмму временного ряда для ежемесячной выручки.
Ожидаемый результат:
- План диаграммы с использованием временных шкал, генератора линий, понятных осей и деталей при наведении.
- План адаптивности с использованием ширины контейнера, размера viewBox и обработки изменения размера с debounce.
- Чек-лист для меток доступности, контрастности и поддержки клавиатуры.
Использование «d3js-visualization». Сравните продажи трех продуктов и поддержите сгруппированные или накопительные представления.
Ожидаемый результат:
- Дизайн столбчатой диаграммы с band scales, сгруппированными и накопительными режимами и анимированными переходами.
- Модель взаимодействия с легендой для переключения видимости продуктов.
- План содержимого подсказок, который избегает небезопасного HTML для недоверенных меток.
Использование «d3js-visualization». Покажите связи между командами, проектами и зависимостями.
Ожидаемый результат:
- План сетевого графа с силовой укладкой, размерами узлов, раскраской групп, поведением перетаскивания и подсветкой при наведении.
- Заметка о производительности, охватывающая параметры симуляции и частоту обновления.
- Заметка об удобстве использования для масштабирования, панорамирования, меток и сводной статистики.
Аудит безопасности
Средний рискv8 • 05.07.2026 Открыть версионный отчет
Most static findings are false positives from JavaScript template literals, Markdown fences, identifiers named key, CSS grid text, and chart logic. The review confirms low-risk CDN script usage in examples and one medium browser XSS risk from raw tooltip HTML rendering. No prompt injection, credential access, shell execution, or malware intent was found.
15
Просканировано файлов
5,811
Проанализировано строк
5
Пункты проверки
0
Ложные срабатывания проигнорированы
Подтверждённые проблемы безопасности (1)
Средний
scripts/chart-templates.js:909-922SKILL.md:157SKILL.md:274examples/bar-chart.html:583-589examples/line-chart.html:461-468examples/network-graph.html:453-462
Unsanitized Tooltip HTML Rendering
Tooltip helpers and examples pass data-derived strings to D3 .html(). If reused with untrusted labels or values, this can inject HTML or scripts into browser visualizations.
The code directly calls .html() with caller-provided or data-derived content. The bundled sample data is controlled, so exploitability depends on reuse with untrusted data.
Пункты проверки возможностей (5)
Это реальные локальные возможности, которые могут ожидаться для этого навыка, поэтому они требуют проверки, но не считаются подтверждённым вредоносным поведением.
Низкий
Hardcoded URL
<script src="https://d3js.org/d3.v7.min.js"></script>
This example or documentation uses a runtime D3 CDN script tag. It is a legitimate setup option, but copied browser examples execute third-party JavaScript from the network.
Низкий
Hardcoded URL
<script src="https://d3js.org/d3.v7.min.js"></script>
This example or documentation uses a runtime D3 CDN script tag. It is a legitimate setup option, but copied browser examples execute third-party JavaScript from the network.
Низкий
Hardcoded URL
<script src="https://d3js.org/d3.v7.min.js"></script>
This example or documentation uses a runtime D3 CDN script tag. It is a legitimate setup option, but copied browser examples execute third-party JavaScript from the network.
Низкий
Hardcoded URL
<script src="https://d3js.org/d3.v7.min.js"></script>
This example or documentation uses a runtime D3 CDN script tag. It is a legitimate setup option, but copied browser examples execute third-party JavaScript from the network.
Низкий
Hardcoded URL
<script src="https://d3js.org/d3.v7.min.js"></script>
This example or documentation uses a runtime D3 CDN script tag. It is a legitimate setup option, but copied browser examples execute third-party JavaScript from the network.
Факторы риска
⚙️ Внешние команды (88)
examples/bar-chart.html:292 examples/bar-chart.html:337 examples/bar-chart.html:353 examples/bar-chart.html:451 examples/bar-chart.html:586-589 examples/bar-chart.html:676 examples/line-chart.html:309 examples/line-chart.html:325 examples/line-chart.html:464-468 examples/network-graph.html:254 examples/network-graph.html:259 examples/network-graph.html:271 examples/network-graph.html:276 examples/network-graph.html:291 examples/network-graph.html:306 examples/network-graph.html:307 examples/network-graph.html:397 examples/network-graph.html:457-462 examples/network-graph.html:568-571 references/advanced-patterns.md:41-45 references/advanced-patterns.md:45-104 references/advanced-patterns.md:180-184 references/advanced-patterns.md:208-222 references/advanced-patterns.md:244-251 references/common-pitfalls.md:113-114 references/d3-fundamentals.md:53-54 references/d3-fundamentals.md:253-255 references/d3-fundamentals.md:301-308 references/integration-patterns.md:23-45 references/integration-patterns.md:45-57 references/scales-and-axes.md:151-159 references/scales-and-axes.md:159-165 scripts/chart-templates.js:70 scripts/chart-templates.js:79 scripts/chart-templates.js:355 scripts/chart-templates.js:361 scripts/chart-templates.js:621 scripts/chart-templates.js:630 scripts/chart-templates.js:872 scripts/chart-templates.js:965 scripts/chart-templates.js:972 scripts/chart-templates.js:986 scripts/chart-templates.js:990 scripts/chart-templates.js:1005 scripts/data-helpers.js:702 scripts/data-helpers.js:703 SKILL.md:46-65 SKILL.md:65-69 SKILL.md:69-71 SKILL.md:71-73 SKILL.md:73-80 SKILL.md:80-84 SKILL.md:84-96 SKILL.md:96-116 SKILL.md:116-136 SKILL.md:136-142 SKILL.md:142-157 SKILL.md:157-167 SKILL.md:167-171 SKILL.md:171-177 SKILL.md:177-181 SKILL.md:181-204 SKILL.md:204-211 SKILL.md:211-214 SKILL.md:214-219 SKILL.md:219-220 SKILL.md:220-226 SKILL.md:226-250 SKILL.md:250-258 SKILL.md:258-267 SKILL.md:267-271 SKILL.md:271-274 SKILL.md:274-280 SKILL.md:280-284 SKILL.md:284-286 SKILL.md:286-290 SKILL.md:290-332 SKILL.md:332-339 SKILL.md:339-343 SKILL.md:343-346 SKILL.md:346-349 SKILL.md:349-352 SKILL.md:352-355 SKILL.md:355-358 SKILL.md:358-361 SKILL.md:361-364 SKILL.md:364-378 SKILL.md:378-379
Аудитор:: codex Посмотреть историю аудитов →
Поделиться и цитировать этот отчет
Делитесь версионным отчетом об оценке, нейтральным значком, встраиваемой карточкой и цитатами. Skillstore публикует доказательства, не решая, безопасен ли этот Skill.
Копировать ссылку на отчёт
https://skillstore.io/skills/autumnsgrove-d3js-visualization/audits/8?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportЗначок Markdown
[](https://skillstore.io/skills/autumnsgrove-d3js-visualization?utm_source=security_passport_badge)Значок HTML
<a href="https://skillstore.io/skills/autumnsgrove-d3js-visualization?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/autumnsgrove-d3js-visualization/security.svg" alt="Skillstore security assessment" loading="lazy"></a>Встраиваемая карточка
<iframe src="https://skillstore.io/embed/skills/autumnsgrove-d3js-visualization.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>Академические ссылки (APA · BibTeX · CFF)
Цитата APA
AutumnsGrove. (2026). d3js-visualization security audit report (audit version 8) [Author version unspecified]. Skillstore. https://skillstore.io/skills/autumnsgrove-d3js-visualization/audits/8Цитата BibTeX
@techreport{autumnsgrove-autumnsgrove-d3js-visualization-2026,
author = {AutumnsGrove},
title = {d3js-visualization security audit report (audit version 8)},
institution = {Skillstore},
year = {2026},
number = {8},
url = {https://skillstore.io/skills/autumnsgrove-d3js-visualization/audits/8},
note = {Author version unspecified}
}CITATION.cff
cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "d3js-visualization security audit report (audit version 8)"
version: "unspecified"
type: report
authors:
- name: "AutumnsGrove"
date-released: "2026-07-05"
url: "https://skillstore.io/skills/autumnsgrove-d3js-visualization/audits/8"
identifiers:
- type: other
value: "skillstore:autumnsgrove-d3js-visualization:audit:8"
description: "Skillstore immutable audit report identifier"
Оценка Skillstore
Почему такая оценка Достоверность доказательств: Высокий 82
Архитектура
85
Сопровождаемость
87
Контент
75
Сообщество
83
Соответствие спецификации
Что вы можете построить
Создать интерактивную диаграмму для дашборда
Постройте пользовательскую диаграмму с осями, адаптивным размером, переходами и поведением подсказок для представления в дашборде.
Подготовить данные для визуального анализа
Преобразуйте данные в стиле CSV в сгруппированные, агрегированные и типизированные структуры перед рендерингом визуализации.
Прототипировать сетевую визуализацию
Используйте паттерны графов с силовой укладкой для исследования связей, групп узлов, состояний наведения и интерактивных элементов управления.
Попробуйте эти промпты
Выбрать тип диаграммы
Помогите мне выбрать лучший тип диаграммы D3.js для этого набора данных и цели: [describe data and audience]. Объясните компромиссы.
Создать адаптивную диаграмму
Создайте план адаптивной диаграммы D3.js для [data shape]. Включите шкалы, оси, margin convention, взаимодействия и заметки по доступности.
Адаптировать шаблон
Адаптируйте переиспользуемый шаблон D3 для [line, bar, scatter, or pie]. Включите необходимую конфигурацию, data accessors и поведение обновления.
Спроектировать продвинутую визуализацию
Спроектируйте продвинутую визуализацию D3.js для [complex dataset]. Включите стратегию производительности, модель взаимодействия, преобразование данных и production-риски.
Лучшие практики
- Начните с руководства по выбору диаграммы, прежде чем писать код D3.
- Используйте стабильные объединения данных и key functions для предсказуемых обновлений.
- Тестируйте диаграммы с реальными объемами данных, длинными метками и маленькими viewport.
Избегать
- Использование D3.js для простых диаграмм, с которыми может справиться более компактная библиотека диаграмм.
- Рендеринг недоверенных значений через HTML-подсказки без санитизации.
- Перерисовка каждого элемента при каждом взаимодействии, когда объединения данных могут обновлять только изменившиеся элементы.
Часто задаваемые вопросы
Что помогает создавать этот навык?
Он помогает создавать пользовательские диаграммы D3.js, переиспользуемые шаблоны, вспомогательные средства для данных и интерактивные браузерные визуализации.
Включает ли он рабочие примеры?
Да. Он включает примеры линейной диаграммы, столбчатой диаграммы и сетевого графа, которые запускаются в браузере.
Может ли он помочь выбрать подходящую диаграмму?
Да. Он включает рекомендации для временных рядов, сравнений, связей, распределений и сетевых данных.
Поддерживает ли он frontend-фреймворки?
Да. В справочных материалах обсуждаются паттерны интеграции для React, Vue, Angular и Svelte.
Готов ли он к production по умолчанию?
Нет. Для production-использования следует добавить валидацию данных, более безопасный рендеринг подсказок, фиксацию версий зависимостей и тесты проекта.
Какие AI-инструменты могут его использовать?
В отчете указана поддержка Claude, Codex и Claude Code.
Сведения для разработчиков
Автор
AutumnsGroveЛицензия
MIT
Ревизия Skillstore
r1
Примечание о версии
Автор не указал версию.
Ссылка
5ab1d37e83436c6eef84de88573e142b94f2a4ad
Актуальность поддержки
18.07.2026
Использование
77 загрузок · 530 просмотров