0% found this document useful (0 votes)
52 views4 pages

DevifyX Interactive Dashboard Project

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
0% found this document useful (0 votes)
52 views4 pages

DevifyX Interactive Dashboard Project

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

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 [Link] or [Link]. 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 ([Link]) 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:- [Link]

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:- [Link]

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.

Common questions

Powered by AI

Descriptive statistics provide contextual information that enhances the understanding of the visualized data. Displaying total sales, average sales per category, and identifying top/bottom performing regions offer users quantitative summaries to gauge data patterns and performance. This statistical overview helps in validating insights drawn from the charts, enabling more informed decisions and recognizing trends or outliers in the dataset .

Smooth transitions and animations enhance user experience by making data changes more understandable and engaging. They help in visually connecting states, reducing cognitive load by providing visual cues of transitions between data views. This can clarify relationships in the data, guide user focus to important changes, and provide a more dynamic interaction experience, which can increase the intuitive use of the dashboard .

Challenges in implementing interactive maps with region highlights may include handling complex geographical data, ensuring accurate and responsive touch or click events, and smoothly integrating map components with existing dashboards without performance degradation. Developers must also consider the user experience across various devices and browsers, ensuring map interactivity aligns with the dashboard's aesthetic. Efficiently managing map rendering and data-binding to maintain responsive interactions and providing clear geographical insights can be technically demanding .

The deliverables include a GitHub repository or ZIP file with complete source code, JSON dataset, and assets, along with a README file containing a project overview, list of implemented features, setup instructions, and a video demo. The evaluation criteria are 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%), and bonus feature implementation (10%).

The ability to upload custom JSON datasets is critical as it allows users to visualize and analyze their own data, making the dashboard versatile and adaptable to various data sets beyond the provided sample. This feature ensures the dashboard can be personalized to different user needs and datasets, expanding its applicability and enhancing its value as a tool for analysis and decision-making .

A responsive layout should utilize grid or flex-based design principles to adapt to desktops, tablets, and mobile devices. This includes ensuring that components automatically resize and reposition to fit various screen sizes while maintaining usability and readability. The design should also incorporate fluid grids, flexible images, and CSS media queries. An adaptive UI ensures consistent functionality and a seamless user experience across devices by providing intuitive navigation, easily accessible controls, and maintaining visual hierarchy .

Interactivity in the dashboard is achieved through features such as hover tooltips that display detailed data values, category, and region information on hover. Legends are clickable to show or hide data series, allowing users to focus on specific datasets. Dynamic filtering enables users to adjust views by region, category, or month, with all charts updating accordingly. Additional interaction is provided by transitions and animations, enhancing both engagement and understanding of data changes .

Export options improve functionality by allowing users to save visualizations as PNG or SVG files for reference, presentations, or reports, enhancing data portability and sharing. Exporting filtered data as CSV enables further data manipulation or integration with other analytical tools, thus broadening the usability of the dashboard. These features empower users to efficiently utilize and disseminate insights derived from their analysis .

The dashboard allows users to customize appearance through color palette options, enabling choices between warm, cool, mono, and other themes. There is a theme toggle for switching between dark and light modes, with preferences stored in localStorage. Users can also adjust the data displayed by filtering by regions, categories, and months. Additionally, the ability to upload a custom JSON dataset allows for personalization of the data visualizations .

The assignment requires the creation of an interactive, responsive dashboard using HTML, CSS, and JavaScript with either D3.js or Plotly.js. Key features include at least three interactive charts (Line, Bar/Stacked Bar, and Pie/Donut), hover tooltips, interactive legends, dynamic filtering, responsive UI design, the ability to upload custom JSON datasets, export options for charts and data, a descriptive statistics panel, and a dark/light theme toggle. Additionally, smooth transitions, a comprehensive layout with headers and sidebars, and customizable color palettes are required. Bonus features such as regression lines, timeline animations, map interactions, annotations, and drilldown charts can also be implemented .

You might also like