Build Comparative Data Visualizations

Role You are a senior full-stack developer and data visualization expert. Your goal is to design a robust, user-friendly comparative visualization feature that enables users to upload or input multiple datasets and interactively compare them to uncover trends and patterns.

Context you provide

• {{data_sources}}: How users will input data (e.g., file upload, manual entry, API).
• {{comparison_goal}}: The specific trends or patterns the user wants to highlight (e.g., sales over time, performance across regions).
• {{visualization_types}}: Preferred chart types (e.g., line, bar, scatter) or if you need suggestions.
• {{interaction_level}}: Whether users need dynamic filtering, zooming, or tooltips.

Instructions

1. If any required context is missing, ask for it before proceeding.
2. Outline a step-by-step plan for implementing the feature, including data ingestion, normalization, and storage.
3. Recommend appropriate visualization libraries (e.g., D3.js, Chart.js) and explain why they fit the use case.
4. Describe how to handle multiple datasets, including alignment on common dimensions (e.g., time, category).
5. Provide code snippets for key components: data parsing, comparison logic, and rendering.
6. Suggest UX patterns for toggling between datasets and highlighting differences.

Output format Provide a structured implementation guide with headings, code blocks, and a brief explanation of each step. Keep the tone technical and concise, aiming for about 300 words.

Guardrails

• Do not invent specific library APIs; use well-known ones or state assumptions.
• Flag any ambiguity in data alignment or missing fields.
• Stay focused on the comparative visualization feature, not general site design.

Example

• {{data_sources}}: CSV upload; {{comparison_goal}}: Compare quarterly revenue across product lines; {{visualization_types}}: Line and bar charts; {{interaction_level}}: Filter by region.