{"id":528,"external_id":"Plugin_40dab999fe9c8191bbc2f550371692fc","name":"build-web-data-visualization","display_name":"Build Web Data Visualization","developer":"OpenAI","category":"Developer Tools","listing_language":"en","listing_language_details":{"method":"cld-0.13.0/listing-v1","reliable":true,"detected_at":"2026-10-01T13:21:51Z","input_sha256":"e26555272a3f529840b76e2f0bd7a050d7d9be88e055d937bb11a5c0809a22a9","source_fields":["release.description","release.interface.short_description","release.interface.long_description"]},"version":"0.1.21","skill_count":18,"first_seen_at":"2026-09-30T22:02:35.000Z","last_seen_at":"2026-10-02T00:00:02.003Z","last_changed_at":"2026-09-30T23:20:13.748Z","install_count":null,"research_summary":null,"research_reviewed_at":null,"metadata":{"id":"Plugin_40dab999fe9c8191bbc2f550371692fc","name":"build-web-data-visualization","scope":"GLOBAL","status":"ENABLED","release":{"id":"pluginrel_6a27385a34048191ab79cf3d6884baa2","skills":[{"name":"accessibility-and-inclusive-visualization","interface":{"brand_color":null,"iconography":null,"display_name":"Accessibility and Inclusive Visualization","default_prompt":null,"icon_large_url":null,"icon_small_url":null,"short_description":"Make data visualizations accessible and inclusive"},"description":"Make data visualizations accessible and inclusive. Use when the user needs chart or diagram accessibility guidance, text alternatives for complex visuals, color and contrast review, keyboard support, reduced-motion behavior for animation or parallax, or an accessibility QA workflow for exported figures, UML-like diagrams, and dashboards.","plugin_release_skill_id":"pluginrsk_6a27385bb6008191b7a8dc4f16de0451"},{"name":"canvas2d-data-visualization","interface":{"brand_color":null,"iconography":null,"display_name":"Canvas2D Data Visualization","default_prompt":null,"icon_large_url":null,"icon_small_url":null,"short_description":"Render data visualizations with Canvas2D"},"description":"Render data visualizations with Canvas2D. Use when the visualization needs high mark counts, fast redraws, immediate-mode rendering, custom hit testing, or a hybrid Canvas plus SVG or HTML architecture.","plugin_release_skill_id":"pluginrsk_6a27385d304881919fe65529be91c962"},{"name":"d3-data-visualization","interface":{"brand_color":null,"iconography":null,"display_name":"D3 Data Visualization","default_prompt":null,"icon_large_url":null,"icon_small_url":null,"short_description":"Build custom data visualizations with D3"},"description":"Build custom data visualizations with D3. Use when the user needs SVG or DOM-based charts, rich annotation, domain-native contextual backgrounds, data joins, custom scales or interactions, scroll-driven SVG scene states, or precise control over browser visualization behavior.","plugin_release_skill_id":"pluginrsk_6a27385ed0a4819187abf87e79cd9378"},{"name":"dashboards-and-real-time-visualization","interface":{"brand_color":null,"iconography":null,"display_name":"Dashboards and Real-Time Visualization","default_prompt":null,"icon_large_url":null,"icon_small_url":null,"short_description":"Design dashboards and live visualization systems"},"description":"Design dashboards and live visualization systems. Use when the user needs monitoring views, streaming charts, coordinated interactions, downsampling, or performance-aware operational visualization.","plugin_release_skill_id":"pluginrsk_6a2738604e7881919d56657146082cb8"},{"name":"data-visualization","interface":{"brand_color":null,"iconography":null,"display_name":"Build Web Data Visualization Router","default_prompt":"Classify the visualization task, choose the smallest useful specialist skill set, and route to the narrowest skill before giving implementation, design, testing, or export guidance.","icon_large_url":null,"icon_small_url":null,"short_description":"Route web data visualization requests to the right specialist skill"},"description":"Route web data visualization work. Use when the user needs chart choice, visual critique, dashboards, maps or geospatial views, Gantt timelines, UML/software diagrams, scrollytelling, reports or exports, testing, accessibility, browser implementation, or concept-first visual design.","plugin_release_skill_id":"pluginrsk_6a273861d6208191bf24a6075b514c0b"},{"name":"gantt-chart-visualization","interface":{"brand_color":null,"iconography":null,"display_name":"Gantt Chart Visualization","default_prompt":null,"icon_large_url":null,"icon_small_url":null,"short_description":"Design and implement Gantt charts and schedule visualizations"},"description":"Design, critique, route, and implement Gantt charts and schedule visualizations. Use when the user mentions Gantt charts, project schedules, roadmaps with task spans, milestones, dependencies, predecessors, critical path, baselines, WBS, resource plans, capacity timelines, MS Project, Primavera P6, Jira Advanced Roadmaps, GitHub Projects, Smartsheet, monday.com, Asana, ClickUp, Azure DevOps iterations, or importing/exporting project-management data for a timeline chart.","plugin_release_skill_id":"pluginrsk_6a273863630c8191b697ff63db9daa56"},{"name":"geospatial-and-cartographic-visualization","interface":{"brand_color":null,"iconography":null,"display_name":"Geospatial and Cartographic Visualization","default_prompt":null,"icon_large_url":null,"icon_small_url":null,"short_description":"Design geospatial and cartographic visualizations"},"description":"Design geospatial and cartographic visualizations. Use when the user needs help deciding whether to use a map, choosing projections or basemaps, building choropleths or symbol maps, or implementing thematic maps, slippy maps, or geospatial interactions with D3 geo, Leaflet, MapLibre, Mapbox GL JS, Google Maps, OpenLayers, deck.gl, ArcGIS Maps SDK, Azure Maps, HERE Maps, CesiumJS, or related tools.","plugin_release_skill_id":"pluginrsk_6a273864f11c81918a6d26733a3ae329"},{"name":"grammar-of-graphics-and-declarative-visualization","interface":{"brand_color":null,"iconography":null,"display_name":"Grammar of Graphics and Declarative Visualization","default_prompt":null,"icon_large_url":null,"icon_small_url":null,"short_description":"Build data visualizations with declarative grammars"},"description":"Build data visualizations with declarative grammars. Use when the user needs Vega-Lite, Vega, Observable Plot, or grammar-of-graphics reasoning, especially for tabular charts that do not require bespoke rendering.","plugin_release_skill_id":"pluginrsk_6a273866887c81919fce6d96219cb96f"},{"name":"node-link-and-diagram-layout","interface":{"brand_color":null,"iconography":null,"display_name":"Node-Link and Diagram Layout","default_prompt":null,"icon_large_url":null,"icon_small_url":null,"short_description":"Choose layout strategies for node-link diagrams"},"description":"Choose and apply automatic layout strategies for node-link diagrams and connected-node visuals. Use when the user asks how to auto-arrange nodes, reduce line crossings, route edges, avoid overlaps, stabilize layout, or choose graph-layout algorithms for network diagrams, dependency graphs, database schema diagrams, ERDs, state machines, decision trees, flow diagrams, box-and-line editors, or other line-connected nodes.","plugin_release_skill_id":"pluginrsk_6a27386829988191a0cb4ce0c6dcfc35"},{"name":"react-and-nextjs-data-visualization","interface":{"brand_color":null,"iconography":null,"display_name":"React and Next.js Data Visualization","default_prompt":null,"icon_large_url":null,"icon_small_url":null,"short_description":"Integrate data visualizations into React and Next.js applications"},"description":"Integrate data visualizations into React and Next.js applications. Use when the user needs chart components, UML-like or architecture diagram components, React integration patterns, Next.js client or server boundaries, hydration-safe rendering, lazy loading, framework-aware performance, scroll-driven visual stories, or export guidance.","plugin_release_skill_id":"pluginrsk_6a27386af62881918330f91d5a45b5f7"},{"name":"reports-pdfs-and-slide-automation","interface":{"brand_color":null,"iconography":null,"display_name":"Reports, PDFs, and Slide Automation","default_prompt":null,"icon_large_url":null,"icon_small_url":null,"short_description":"Lay out and export data-rich reports and documents"},"description":"Lay out and export data-rich reports and documents. Use when the user needs report structure, figure packaging, PDFs, PowerPoint or Google Slides automation, or programmatic insertion of visualizations, UML-like diagrams, or architecture diagrams into documents.","plugin_release_skill_id":"pluginrsk_6a27386cec7c819182797924e2d336db"},{"name":"scrollytelling-and-parallax-data-visualization","interface":{"brand_color":null,"iconography":null,"display_name":"Scrollytelling and Parallax Data Visualization","default_prompt":null,"icon_large_url":null,"icon_small_url":null,"short_description":"Design parallax scrolling and scrollytelling visualizations"},"description":"Design and implement parallax scrolling and scrollytelling data visualizations. Use when the user asks for parallax scrolling, scrollytelling, scroll-driven timelines, sticky graphics, Scrollama, ScrollTrigger, ScrollTimeline, view timelines, rich-media timelines, moviescrollers, scroll-scrubbed charts, staged narrative reveals, or interactive visual stories where scrolling changes a data visualization or media scene.","plugin_release_skill_id":"pluginrsk_6a27386e5ccc8191bb26f99ca5a9ed0f"},{"name":"statistical-and-uncertainty-visualization","interface":{"brand_color":null,"iconography":null,"display_name":"Statistical and Uncertainty Visualization","default_prompt":null,"icon_large_url":null,"icon_small_url":null,"short_description":"Design statistically honest and uncertainty-aware visualizations"},"description":"Design statistically honest and uncertainty-aware visualizations. Use when the user needs help showing distributions, intervals, confidence, missingness, sampling effects, or analytical rigor in charts and dashboards.","plugin_release_skill_id":"pluginrsk_6a2738705880819198e39f8b62e82654"},{"name":"testing-data-visualizations","interface":{"brand_color":null,"iconography":null,"display_name":"Testing Data Visualizations","default_prompt":null,"icon_large_url":null,"icon_small_url":null,"short_description":"Test data visualizations and dashboards"},"description":"Test data visualizations and dashboards. Use when the user needs chart or diagram test strategy, screenshot or image diff testing, visual regression, mocked or synthetic chart data, component or unit tests, E2E dashboard QA, interactive UML-like diagram verification, scroll-driven story verification, export verification, or guidance on avoiding brittle over-testing.","plugin_release_skill_id":"pluginrsk_6a2738723f808191a4f059b4bd9ad910"},{"name":"threejs-data-visualization","interface":{"brand_color":null,"iconography":null,"display_name":"Three.js and WebGL Data Visualization","default_prompt":null,"icon_large_url":null,"icon_small_url":null,"short_description":"Render WebGL-accelerated data visualizations"},"description":"Render WebGL-accelerated data visualizations with Three.js, raw WebGL, deck.gl, luma.gl, PixiJS, Sigma.js, Plotly WebGL traces, ECharts GL, CesiumJS, Babylon.js, or related GPU libraries. Use when the visualization needs true spatial structure, dense 2D or 3D GPU rendering, particle or flow animation, volumetric views, or interactive exploration that adds real analytical value.","plugin_release_skill_id":"pluginrsk_6a2738742348819192d78a39db4517d8"},{"name":"typescript-data-visualization-engineering","interface":{"brand_color":null,"iconography":null,"display_name":"TypeScript Data Visualization Engineering","default_prompt":null,"icon_large_url":null,"icon_small_url":null,"short_description":"Build typed data visualizations in TypeScript"},"description":"Build typed data visualizations in TypeScript. Use when the user wants TypeScript visualization code, typed data models, browser visualization components, UML-like diagram models, interactive graph or architecture diagram contracts, scroll-driven scene contracts, library selection guidance, or a maintainable visualization architecture beyond React- or Next-specific concerns.","plugin_release_skill_id":"pluginrsk_6a2738758b488191be866bed8fb847b1"},{"name":"uml-and-software-architecture-visualization","interface":{"brand_color":null,"iconography":null,"display_name":"UML and Software Architecture Visualization","default_prompt":null,"icon_large_url":null,"icon_small_url":null,"short_description":"Design and implement UML and software architecture diagrams"},"description":"Design, critique, read, write, render, and implement UML and UML-like software diagrams. Use when the user mentions UML, sequence diagrams, class diagrams, activity diagrams, state machines, use case diagrams, component diagrams, deployment diagrams, object diagrams, package diagrams, profile diagrams, timing diagrams, communication diagrams, interaction overview diagrams, composite structure diagrams, ERDs, database schema diagrams, C4, BPMN, swimlanes, flowcharts, network diagrams, application architecture diagrams, software architecture diagrams, diagram-as-code, model-as-code, XMI, UMLDI, PlantUML, Mermaid, Graphviz DOT, D2, Structurizr, DBML, diagrams.net/draw.io, Kroki, or interactive diagram editors and explorers.","plugin_release_skill_id":"pluginrsk_6a273877359c8191a870cebc2e27945c"},{"name":"visualization-strategy-and-critique","interface":{"brand_color":null,"iconography":null,"display_name":"Visualization Strategy and Critique","default_prompt":null,"icon_large_url":null,"icon_small_url":null,"short_description":"Choose, lay out, critique, and explain data visualizations"},"description":"Choose, lay out, critique, and explain data visualizations. Use when the user asks what visualization fits a dataset or goal, how a chart, dashboard, operational workspace, UML-like diagram, or software architecture diagram should be composed or interacted with, asks for visual page design, a layout mockup, generated large-screen and mobile concept images, or to be shown what a visualization could look like, when domain-native contextual surfaces or graphical backgrounds may help, when scrollytelling or parallax might be appropriate, wants a critique of an existing visualization, or needs guidance grounded in trusted visualization theory and practice. For advanced visual design or page-layout prompts where composition affects understanding, Codex must generate and show both large-screen and mobile portrait image concepts before implementation or text-only design handoff, plus mobile landscape when needed.","plugin_release_skill_id":"pluginrsk_6a273878ee748191a898251f37556356"}],"app_ids":[],"version":"0.1.21","keywords":[],"interface":{"category":"Developer Tools","logo_url":"https://files.openai.com/content?id=file_000000009d7c722fb801610e5cbc4ee3","brand_color":"#0B7285","website_url":"https://openai.com/","capabilities":["Interactive","Read","Write"],"logo_url_dark":null,"default_prompt":"Visually design this advanced visualization with large-screen and mobile concepts","developer_name":"OpenAI","default_prompts":["Visually design this advanced visualization with large-screen and mobile concepts","Choose the best chart, layout, shareable state, grammar, and stack for this dataset","Design QA for this chart, dashboard, map, or WebGL visualization"],"screenshot_urls":[],"long_description":"Use Build Web Data Visualization to choose, design, implement, test, and export browser charts, dashboards, maps, WebGL/Three.js scenes, Canvas/D3 visuals, Gantt charts, UML/software diagrams, scrollytelling, reports, PDFs, and slide decks. It emphasizes source-backed data, accessible responsive layouts, URL-shareable analysis state, and concept-first design for advanced visual stories.","composer_icon_url":"https://files.openai.com/content?id=file_000000000aa0722f80f28b1fedf337fb","short_description":"Design, build, test, and export web data visualizations","plugin_category_id":"developer tools","privacy_policy_url":"https://openai.com/policies/privacy-policy/","terms_of_service_url":"https://openai.com/policies/terms-of-use/","composer_icon_dark_url":null},"description":"Design, critique, implement, test, and export web data visualizations in Codex, including charts, maps, dashboards, Gantt, UML, scrollytelling, reports, slides, mobile views, shareable state, and advanced WebGL concepts.","app_manifest":null,"display_name":"Build Web Data Visualization","app_templates":[],"onboarding_skill_name":null,"requires_local_executor":false},"created_at":"2026-05-26T23:47:21.313225Z","is_template":false,"connector_id":null,"discoverability":"LISTED","canonical_app_id":null},"research":null,"package_metadata":{"name":"build-web-data-visualization","author":{"name":"OpenAI"},"license":"MIT","sources":[{"path":".codex-plugin/plugin.json","sha256":"fa1f5586afcfdfa8fa58d249fe852efd8103057d30f6c5d4009ce90e83b225a9"}],"version":"0.1.21","homepage":"https://openai.com/","keywords":["build-web-data-visualization","web-data-visualization","data-visualization","charts","dashboards","maps","geospatial","vega-lite","observable-plot","d3","canvas","webgl","threejs","react","nextjs","typescript","svg","accessibility","testing","visual-regression","reports","slides","infographics","scrollytelling","parallax","gantt","uml","software-architecture","graph-layout","node-link","mobile","responsive","shareable-state","visual-design","visual-design-contract","color-contrast","uncertainty","export","diagrams","operational-workspaces","humanitarian","geopolitical"],"artifact_id":7061,"observed_at":"2026-10-02T00:06:05Z","capabilities":["Interactive","Read","Write"],"field_sources":{"name":0,"author":0,"license":0,"version":0,"homepage":0,"keywords":0,"capabilities":0},"extraction_version":1,"conflicts_or_errors":[]}}