🔍 Search

Home · Coding Agents · Data Visualization

📊

Survey results dashboard with filters — Data Visualization Prompt

You get a runnable project for survey results dashboard with filters — plan, complete code, demo data and run instructions — instead of disconnected code snippets.

Data Visualization Medium

✨ What you get — sample output preview

Sample output · Data Visualization

A complete project for survey results dashboard with filters: file tree (index/entry, components or modules per feature, styles, README), working core flow, demo data preloaded, and the must-have feature implemented rather than stubbed. Built with vanilla JS with no dependencies; runs locally with one command and passes the acceptance criteria above.

ResultYou get a runnable project for survey results dashboard with filters — plan, complete code, demo data and run instructions — instead of disconnected code snippets.
Typical time5–30 minutes per build
CostCursor and Claude Code are paid; ChatGPT & Gemini free tiers work
DifficultyMedium

🧩 Fill the variables — your prompt updates live

You are a senior product engineer working as an autonomous coding agent. Build Survey Results Dashboard: a complete, working version of this brief — survey results dashboard with filters — for first-time visitors on mobile and desktop. Stack: vanilla JS with no dependencies. Non-negotiable feature: search and filtering. Scope and quality bar: honest data visualization: labeled axes, no truncated y-axis tricks, accessible color palette, tooltips with exact values, and a one-line insight under the title. Process: 1) Write a short plan with the file tree. 2) Implement every file completely — no placeholders, no TODO stubs. 3) Include seed/demo data so the app works on first run. 4) Add a README with exact run commands. Acceptance criteria: the app starts with one command, the core flow works end to end, layout is responsive, and errors are shown to the user in plain language. If a requirement is ambiguous, choose the simplest sensible option and note the assumption in the README instead of asking.
▶ Open in ChatGPTCopy + open Cursor ↗Copy + open Claude Code ↗Copy + open Gemini ↗

🛠️ How to use it in each tool

  1. Open your project in Cursor, start an Agent (Composer) chat, and paste the filled prompt from the box above as the task.
  2. Attach the files the agent may touch with @ references; the prompt's acceptance criteria act as the stop condition, so keep them in.
  3. Review the plan the agent proposes before it edits; then let it implement and run the result inside Cursor's terminal.
  4. Commit after each accepted run — agent-built projects iterate fastest in small, verified steps.

Paste location: Agent/Composer chat in your open project; attach editable files with @.

  1. In your project folder, start Claude Code and paste the filled prompt from the box above as the task (or save it as TASK.md and say "follow TASK.md").
  2. Let it plan first (it will propose a file tree); approve the plan, then let it write files and run the app or tests itself.
  3. Ask it to verify against the acceptance criteria in the prompt and fix failures before summarizing.
  4. Keep the session open for follow-up features — Claude Code retains the codebase context.

Paste location: the Claude Code session in your project folder, or a TASK.md file it is told to follow.

  1. Open ChatGPT (link below) — the quick-use button pre-fills the filled prompt from the box above in a new chat.
  2. Review the filled variables once; if a variable still shows brackets, replace it with your own words.
  3. Send it. For image results, ask for one variation at a time ("same image, warmer light") instead of re-rolling everything.
  4. Save the winning output and copy the final prompt into your notes — ChatGPT does not keep a prompt library for you.
  1. Open Gemini and paste the filled prompt from the box above (or use Copy + Open below).
  2. For image or video-capable tasks, Gemini routes to its media models automatically; state the format (aspect ratio / length) in the first line, as the prompt does.
  3. Regenerate once rather than editing mid-chat if the first result misses the format; then refine with one change at a time.
  4. Export text results to Docs/Sheets from the share menu when you need them in office formats.

🔗 Related prompts

📊Data VisualizationMedium
Coding Agents

Epidemic curve chart with annotations — Data Visualization Prompt

You get a runnable project for epidemic curve chart with annotations — plan, complete code, demo data and run instructions — instead of disconnected code snippets.

CursorClaude CodeChatGPTGemini
📊Data VisualizationMedium
Coding Agents

Habit heatmap calendar view — Data Visualization Prompt

You get a runnable project for habit heatmap calendar view — plan, complete code, demo data and run instructions — instead of disconnected code snippets.

CursorClaude CodeChatGPTGemini
📊Data VisualizationAdvanced
Coding Agents

Interactive map of store locations — Data Visualization Prompt

You get a runnable project for interactive map of store locations — plan, complete code, demo data and run instructions — instead of disconnected code snippets.

CursorClaude CodeChatGPTGemini
📊Data VisualizationEasy
Coding Agents

GitHub-style contribution graph — Data Visualization Prompt

You get a runnable project for GitHub-style contribution graph — plan, complete code, demo data and run instructions — instead of disconnected code snippets.

CursorClaude CodeChatGPTGemini