plugin

Build Web Data Visualization

Design, build, test, and export web data visualizations

.mdOpen in ChatGPT

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. Skills for D3, Canvas2D, Three.js, React/Next.js charts, dashboards, geospatial maps, Gantt, UML, scrollytelling, statistical/uncertainty visualization, accessibility, testing and report/slide export. Listed in OpenAI's curated Codex marketplace (openai-curated); the manifest declares skills.

Also available as

MCP App Basics (Apps SDK example)Eleven interactive widgets that each teach one MCP Apps APIapp · by OpenAI · 2.4k starsOpenAI Docs MCPSearch and read OpenAI's developer documentation from Codex or any MCP clientMCP server · by OpenAI · Remote

Install

  1. 1Add it in ChatGPT

    Open Plugins in the ChatGPT sidebar (web or desktop), search for “Build Web Data Visualization” and select +. You'll be asked to sign in to any connected service on first use. Then type @ in a chat to call it.

  2. 2Or install it in Codex
    codex plugin add build-web-data-visualization@openai-curated

    Start a new Codex session afterwards. You can also run /plugins inside the CLI to browse and install interactively.

Skills 15

  • Accessibility and Inclusive Visualization

    Make data visualizations accessible and inclusive

  • Canvas2D Data Visualization

    Render data visualizations with Canvas2D

  • D3 Data Visualization

    Build custom data visualizations with D3

  • Dashboards and Real-Time Visualization

    Design dashboards and live visualization systems

  • Build Web Data Visualization Router

    Route web data visualization requests to the right specialist skill

  • Gantt Chart Visualization

    Design and implement Gantt charts and schedule visualizations

  • Geospatial and Cartographic Visualization

    Design geospatial and cartographic visualizations

  • Grammar of Graphics and Declarative Visualization

    Build data visualizations with declarative grammars

  • Node-Link and Diagram Layout

    Choose layout strategies for node-link diagrams

  • React and Next.js Data Visualization

    Integrate data visualizations into React and Next.js applications

  • Reports, PDFs, and Slide Automation

    Lay out and export data-rich reports and documents

  • Scrollytelling and Parallax Data Visualization

    Design parallax scrolling and scrollytelling visualizations

  • Statistical and Uncertainty Visualization

    Design statistically honest and uncertainty-aware visualizations

  • Testing Data Visualizations

    Test data visualizations and dashboards

  • Three.js and WebGL Data Visualization

    Render WebGL-accelerated data visualizations

Things to ask

  • “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”

Related

SuperpowersPlan, develop, and debug codeplugin · by Jesse Vincent · 294k starsCodex SecuritySecurity scanning for your codebaseplugin · by OpenAI · 7.2k starsBuild Web AppsBuild frontend-focused web apps with generated assets, browser testing, payments, and...plugin · by OpenAI · 7.2k starsGitHubTriage PRs, issues, CI, and publish flowsplugin · by OpenAI · 7.2k starsFigmaFigma design-to-code workflowsplugin · by Figma · 7.2k starsData AnalyticsAnswer product and business questions with dataplugin · by OpenAI · 7.2k stars