Frontend Developer Assignment
Interactive Data Visualization Dashboard
Company: DevifyX
Duration: 3 Days
Objective
Build an interactive, responsive data visualization dashboard using HTML, CSS, and JavaScript
with either D3.js or Plotly.js. The dashboard will visualize structured sales data provided
in JSON format.
You may use GPT or any AI tools to assist in the project, but the final implementation
should reflect your understanding of interactivity, data handling, and UI/UX. Customiza-
tions, logic, and polish will be closely evaluated.
Dataset Overview
A pre-defined JSON file (sample-data.json) will be provided, containing:
• 6 months of data: January to June
• 4 regions: North, South, East, West
• 3 product categories: Electronics, Furniture, Clothing
• Monthly sales values per region and category
• Metadata (title, description, currency, generated timestamp)
• Data file:- https://drive.google.com/file/d/12Klwd6wWH2UHcck2mITUYCALNhP2tWP8/view?usp
You must read this JSON file and render visualizations dynamically.
Required Features
1. Minimum 3 Interactive Charts
• Line Chart: Display monthly sales trends
1
Frontend Developer Assignment DevifyX
• Bar/Stacked Bar Chart: Compare regional/category sales
• Pie/Donut Chart: Show category share breakdown
2. Hover Tooltips and Interactivity
• Show data value, category, and region on hover
• Clickable legends to show/hide data series
• Highlighting for active data segments
3. Dynamic Filtering
• Filter by region, category, or month
• All charts must update accordingly
4. Responsive UI Design
• Adaptive layout for desktops, tablets, and mobiles
• Grid or flex-based design preferred
5. Upload Custom JSON
• Upload a compatible JSON dataset
• Automatically re-render dashboard
6. Export Options
• Export charts as PNG or SVG
• Export filtered data as CSV
7. Descriptive Statistics Panel
• Show total sales, average per category, top/bottom performing regions
• Must update on filter change
8. Dark/Light Theme Toggle
• Allow switching between themes
• Store theme preference in localStorage
9. Smooth Transitions and Animations
• Use animated transitions when changing data or chart types
10. Dashboard Layout
• Header with metadata (title, description, currency)
• Sidebar/topbar for filters
2
Frontend Developer Assignment DevifyX
• Use cards to organize charts
11. Color Palette Options
• Allow users to choose color themes (warm, cool, mono, etc.)
Bonus Features (Optional)
• Regression Line or Trend Overlay on Charts
• Playback Timeline Animation
• Region Highlights on Interactive Map
• Annotations on Charts
• Drilldown Charts on Click (e.g., bar to pie)
Deliverables
You must submit:
• GitHub Repository or ZIP File with:
– Complete source code (HTML, CSS, JS)
– JSON dataset
– Assets (if any)
• README File with:
– Project overview
– List of features implemented
– Setup instructions
– Video Demo
Deadline
3 Days from the date of assignment acceptance. Submission link:- https://forms.gle/o3cYSy5srLKt8MVJA
3
Frontend Developer Assignment DevifyX
Evaluation Criteria
Criteria Weight
Code quality, structure, and readability 20
Data-driven rendering and logic 10
Responsiveness and UI Design 40
Usage of GPT or tools with reasoning 20
Bonus features implementation 10
Contact
For clarifications, please email back.
