Scribd
Upload
102 views

DevifyX_assignment_Data_Visualization

The assignment requires the development of an interactive data visualization dashboard using HTML, CSS, and JavaScript, with a focus on visualizing structured sales data in JSON format. Key features include at least three interactive charts, dynamic filtering, a responsive UI design, and options for exporting data. The project must be completed within three days and submitted via a GitHub repository or ZIP file, along with a README file detailing the project overview and features implemented.

Uploaded by

AIML27JASKARAN
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
102 views

DevifyX_assignment_Data_Visualization

The assignment requires the development of an interactive data visualization dashboard using HTML, CSS, and JavaScript, with a focus on visualizing structured sales data in JSON format. Key features include at least three interactive charts, dynamic filtering, a responsive UI design, and options for exporting data. The project must be completed within three days and submitted via a GitHub repository or ZIP file, along with a README file detailing the project overview and features implemented.

Uploaded by

AIML27JASKARAN
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

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.

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy