Lesson 7: Prompting to Chart — Visual Output with AI

Create a Mermaid flowchart showing [describe your process].
Use top-to-bottom layout (TD). Include decision diamonds where appropriate.

Create a React component using Recharts that renders a [chart type] with the following data:
[paste your data]
Include axis labels, a legend, and hover tooltips. Use responsive container.

Create a React Gantt chart component using Recharts or a custom SVG implementation.
Here are the tasks: [paste task list with start/end dates]
Color-code by phase. Show today's date as a vertical line.

Create a React dashboard component with:
- 3 KPI cards at the top: [metric 1], [metric 2], [metric 3]
- A line chart for [trend data]
- A bar chart for [comparison data]
- A summary table at the bottom
Use Recharts for charts. Style with Tailwind CSS.

Create an HTML wireframe mockup of [describe the page].
Use Tailwind CSS for layout. Use gray placeholder boxes for images.
Include a header, navigation, main content area, and footer.

Build a [page name] page for [describe the app].
Include [list key components].
Use shadcn/ui components.

Create an infographic about [topic] with the following key points:
1. [point 1]
2. [point 2]
3. [point 3]
Use a clean, modern design with icons.

Create a presentation about [topic].
Audience: [describe audience].
Key message: [your one-line thesis].
Include slides for: [list slide topics].

Create a slide-by-slide outline for a [X]-slide presentation about [topic].
For each slide: provide a title, 3 bullet points, and a visual recommendation.
Format as a numbered list I can paste into PowerPoint.

Create a Mermaid mindmap for [topic].
The central concept is [X].
Include 4-5 main branches and 2-3 sub-topics per branch.

Create a Mermaid flowchart diagram showing a standard CI/CD pipeline for a web application.

The pipeline should include these stages in order:
1. Developer pushes code to feature branch
2. Automated tests run (unit tests, linting)
3. Decision: tests pass?
   - If NO: notify developer, stop pipeline
   - If YES: continue
4. Pull request created
5. Code review by peer
6. Decision: review approved?
   - If NO: request changes, return to developer
   - If YES: merge to main branch
7. Build Docker image
8. Deploy to staging environment
9. Automated integration tests on staging
10. Decision: staging tests pass?
    - If NO: notify team, rollback
    - If YES: deploy to production
11. Monitor production, send deployment notification

Use top-to-bottom layout (TD). Use different shapes for decisions (diamonds) and actions (rectangles). Add brief labels on the yes/no branches.

Create a React component using Recharts that shows monthly revenue with a trend line.

Use this data:
Month, Revenue, Target
Jan 2024, 142000, 130000
Feb 2024, 158000, 135000
Mar 2024, 147000, 140000
Apr 2024, 173000, 145000
May 2024, 168000, 150000
Jun 2024, 195000, 155000
Jul 2024, 201000, 160000
Aug 2024, 189000, 165000
Sep 2024, 218000, 170000
Oct 2024, 234000, 175000
Nov 2024, 228000, 180000
Dec 2024, 251000, 185000

Requirements:
- Line chart with two lines: actual Revenue (blue, #0b5351) and Target (gray dashed, #999999)
- X-axis: month labels, rotated 45 degrees
- Y-axis: formatted as $K (e.g., $150K)
- Hover tooltip showing both values for that month
- Legend at the top
- Title: "2024 Monthly Revenue vs Target"
- Responsive container, 800x400 size
- A shaded area under the Revenue line to fill toward zero

Use React with Recharts (AreaChart + Line combination). Make it a self-contained component that exports default.

Create an interactive Gantt chart as a React component.

Here is the sprint plan data:
Phase, Task, Owner, Start Date, End Date, Status
Discovery, Stakeholder interviews, Sarah, 2024-03-01, 2024-03-05, Done
Discovery, Requirements doc, Sarah, 2024-03-04, 2024-03-08, Done
Discovery, Technical feasibility, Dev Team, 2024-03-06, 2024-03-10, Done
Design, Wireframes, UX, 2024-03-11, 2024-03-18, Done
Design, Design review, All, 2024-03-18, 2024-03-20, Done
Design, Prototype, UX, 2024-03-19, 2024-03-25, In Progress
Development, Backend API, Dev Team, 2024-03-20, 2024-04-05, Planned
Development, Frontend UI, Dev Team, 2024-03-25, 2024-04-10, Planned
Development, Integration, Dev Team, 2024-04-05, 2024-04-12, Planned
Testing, QA testing, QA Team, 2024-04-10, 2024-04-18, Planned
Testing, Bug fixes, Dev Team, 2024-04-15, 2024-04-22, Planned
Launch, Staging deploy, DevOps, 2024-04-20, 2024-04-22, Planned
Launch, Production deploy, DevOps, 2024-04-24, 2024-04-24, Planned

Requirements:
- Horizontal bar chart showing each task as a bar spanning its date range
- Color-code by Phase: Discovery=blue, Design=purple, Development=green, Testing=orange, Launch=red
- Show task status with visual indicator: Done=solid fill, In Progress=striped fill, Planned=light fill
- X-axis: calendar dates
- Y-axis: task names
- Hover tooltip: task name, owner, start/end date, status
- Vertical line showing today's date (2024-03-22)
- Title: "Q1-Q2 2024 Project Timeline"
- Legend showing phases and status types
- Responsive width, 600px height

Build this as a self-contained React component. Use SVG for the Gantt bars if Recharts doesn't support this natively.

Create a bar chart. We have 4 regions: North, South, East, West. North does the best, South is second, etc.

Create a bar chart with this data:
Region, Q1 Revenue, Q2 Revenue
North, 245000, 267000
South, 198000, 211000
East, 176000, 189000
West, 221000, 238000

Make a diagram of our database schema.

Create a Mermaid entity-relationship diagram (erDiagram) showing our database schema with the following tables and relationships: [tables]. Output as a fenced Mermaid code block.

Create a line chart showing monthly revenue. Include:
- Hover tooltips showing the exact revenue value and month
- A clickable legend so users can toggle between the Revenue and Target lines
- A brush/scrubber at the bottom to zoom into a specific date range

Create a bar chart of our NPS scores by product.

Create a bar chart of our NPS scores by product.
Use these brand colors:
- Primary: #0b5351 (dark teal)
- Secondary: #f5f5f5 (light gray background)
- Accent: #e87b35 (orange for highlights)
- Text: #1a1a1a
- Grid lines: #e0e0e0 (very light gray)

Bar color: use #0b5351 for positive NPS, #e87b35 for NPS below 30.
Background: #f5f5f5.

Make this chart 1200x600 pixels. Use a font size of 14px for labels. This will be exported as a PNG for a slide deck.

Wrap the chart in a ResponsiveContainer from Recharts. It should fill 100% of its parent container width and have a fixed height of 400px.

The chart needs to work on mobile. On screens under 600px, hide the legend and simplify axis labels to abbreviations (Jan, Feb, Mar).

[Chart type and description]

Data:
[paste CSV, table, or list]

Additional requirements:
[formatting, colors, interactivity]

Create a React dashboard component for [use case].

Layout:
- Top row: 3 KPI cards side by side
  - Card 1: "[Metric Name]" showing [value format], trending [up/down]
  - Card 2: "[Metric Name]" showing [value format], trending [up/down]
  - Card 3: "[Metric Name]" showing [value format], trending [up/down]
- Middle row: two charts side by side
  - Left: [chart type and data description]
  - Right: [chart type and data description]
- Bottom: [table or single wide chart]

Data:
[paste all data here]

Styling:
- Background: #f5f5f5
- Card background: white with subtle shadow
- Use brand colors: [list colors]
- Font: system-ui or Inter

Make it a single self-contained React component using Recharts for charts and Tailwind CSS for layout.

Create a React component for a quarterly business review page.

Include:
1. A title section: "Q4 2024 Business Review" with the date
2. A two-column layout:
   Left column (60% width):
   - A line chart showing monthly revenue for the quarter
   - A bar chart showing deals closed by sales rep
   Right column (40% width):
   - KPI cards: Total Revenue, Deals Closed, NPS Score
   - A bullet-point summary section labeled "Key Takeaways"
     with these points:
     • Revenue exceeded target by 14%
     • Top rep closed 23 deals vs. team avg of 14
     • NPS improved from 38 to 47

[paste data]

Create a Mermaid flowchart showing an e-commerce order fulfillment process.

The process:
1. Customer places order on website
2. Payment processing
   - If payment fails: send payment failure email, end
   - If payment succeeds: continue
3. Order sent to warehouse management system
4. Inventory check
   - If item out of stock: notify customer, offer backorder or refund, end
   - If item in stock: continue
5. Pick and pack the order
6. Quality check
   - If quality check fails: repack, return to step 5
   - If quality check passes: continue
7. Generate shipping label
8. Hand off to courier
9. Send shipping confirmation email with tracking number
10. Delivery attempt
    - If delivery fails (nobody home): attempt redelivery next day, up to 3 attempts
    - If 3 attempts fail: return to warehouse, contact customer
    - If delivery succeeds: mark order complete
11. Send delivery confirmation email
12. Request review (3 days after delivery)

Use top-to-bottom layout (TD). Use rectangles for actions, diamonds for decisions, rounded rectangles for start/end. Add brief labels on all branches.

Output as a Mermaid fenced code block.

The diagram is good but the delivery retry loop is unclear. Please make the "up to 3 attempts" loop more visible by adding a counter node and a clear loop-back arrow. Also add color: use green (#22c55e) for the success path nodes and red (#ef4444) for failure/end nodes.

Create a React component using Recharts showing a product performance comparison.

Data (copy from below):
Product, Jan, Feb, Mar, Apr, May, Jun, Q2 Total, YoY Growth
Product A, 42000, 38000, 51000, 67000, 72000, 78000, 217000, +23%
Product B, 31000, 29000, 35000, 41000, 44000, 46000, 131000, +8%
Product C, 18000, 21000, 19000, 24000, 27000, 31000, 82000, +31%
Product D, 55000, 52000, 58000, 61000, 59000, 63000, 183000, +5%

Requirements:
- Grouped bar chart showing monthly revenue per product (Jan through Jun)
- Four bars per month, one per product
- Colors: Product A=#0b5351, Product B=#2d7d9a, Product C=#e87b35, Product D=#6b7280
- X-axis: month names
- Y-axis: revenue in $K format (e.g., $50K)
- Hover tooltip: show product name and exact revenue
- Legend at the top
- Title: "H1 2024 Revenue by Product"
- Below the chart: a small summary table showing Product, Q2 Total, and YoY Growth for each product
- Responsive container, fixed height 450px
- Export this as a self-contained React component (export default)

The chart looks great. Two changes:
1. Add a "Switch View" button above the chart that toggles between grouped bars and stacked bars
2. Highlight Product C bars with a small "Top Growth" badge or annotation since it has +31% YoY

Create a React Gantt chart component for a product launch project.

Sprint plan data:
Phase, Task, Start, End, Status, Owner
Research, Market analysis, 2024-04-01, 2024-04-07, Done, Sarah
Research, Competitor review, 2024-04-03, 2024-04-09, Done, Sarah
Research, User interviews, 2024-04-08, 2024-04-14, Done, Tom
Product, PRD writing, 2024-04-10, 2024-04-18, Done, Sarah
Product, Stakeholder review, 2024-04-17, 2024-04-19, Done, All
Product, Final PRD approval, 2024-04-19, 2024-04-21, Done, Director
Design, UX wireframes, 2024-04-22, 2024-05-03, In Progress, UX Team
Design, Visual design, 2024-05-01, 2024-05-12, In Progress, UX Team
Design, Design QA, 2024-05-10, 2024-05-14, Planned, UX Team
Engineering, Sprint 1 - Core features, 2024-05-06, 2024-05-19, Planned, Dev Team
Engineering, Sprint 2 - Integrations, 2024-05-20, 2024-06-02, Planned, Dev Team
Engineering, Sprint 3 - Polish, 2024-06-03, 2024-06-13, Planned, Dev Team
QA, Testing cycle 1, 2024-06-10, 2024-06-17, Planned, QA Team
QA, Bug fixes, 2024-06-14, 2024-06-21, Planned, Dev Team
QA, Final UAT, 2024-06-20, 2024-06-25, Planned, Stakeholders
Launch, Soft launch, 2024-06-26, 2024-06-26, Planned, All
Launch, Full launch, 2024-07-01, 2024-07-01, Planned, All

Requirements:
- Horizontal Gantt chart: tasks on Y-axis, calendar dates on X-axis
- Color by Phase: Research=#6366f1, Product=#0b5351, Design=#8b5cf6, Engineering=#2d7d9a, QA=#e87b35, Launch=#ef4444
- Status visual: Done=solid color, In Progress=striped pattern or semi-transparent, Planned=very light fill with colored border
- Show today (2024-05-08) as a vertical dashed red line labeled "Today"
- Hover tooltip: task name, owner, start date, end date, status
- Milestone diamonds at "Final PRD approval", "Soft launch", and "Full launch"
- Title: "Product Launch Timeline — Apr through Jul 2024"
- Fixed height 700px to accommodate all tasks
- Group tasks by phase with a subtle divider and phase label on the left

Build using SVG or Canvas directly in React if Recharts doesn't support Gantt natively. Self-contained component, export default.

The Gantt looks good. Please add:
1. A "critical path" overlay — highlight in red any tasks that directly block the launch date if delayed
2. A summary row at the top showing overall project progress as a percentage (tasks Done / total tasks)
3. The ability to click on a task bar to expand a detail card showing owner, dates, and a notes field

Create a [CHART TYPE] as a [FORMAT].

Data:
[PASTE YOUR DATA]

Requirements:
- [COLORS/BRANDING]
- [INTERACTIVITY IF NEEDED]
- [DIMENSIONS IF NEEDED]
- [ANY OTHER SPECIFICS]

Do you need accurate data representation?
  YES → Does it need to be interactive/embeddable?
    YES → Claude Artifacts (React + Recharts)
    NO → Is it a diagram/flowchart?
      YES → Claude (Mermaid)
      NO → Claude Artifacts or ChatGPT + Data Analysis
  NO → Does it need to look polished/branded?
    YES → Gamma.app (slides/infographics) or Canva AI
    NO → Claude (quick HTML or text output)