Part 2 – Dashboard Use HTML + CSS + D3.js.All plots must liv…
Part 2 – Dashboard Use HTML + CSS + D3.js.All plots must live in ONE dashboard page. Layout Requirements (1) Use a structure like: Top row: Header of ‘Online Retail’ 2nd row: Sliding Line Chart 3rd row: Histogram + Scatterplot Bottom row: text about your conclusion of the overall analysis Required Visual Components (All Using D3.js) 1. Sliding Line Chart (Time Series) (2) Data: sales_by_day.csv Requirements: Plot Sliding Line Chart for daily total revenue over time by each day. Add one (must be one, not two) button to switch pause and slide again: On hover: Pause the timeline sliding movement When the mouse leaves the dot of the line, the chart should resume sliding Visually highlight the hovered dot of the line (e.g., change its size or color) Show a tooltip with date, total_revenue, num_orders. 2. Histogram Panel (2) Data: order_value_distribution.csv Requirements: Histogram: distribution of order value Filtered with dropdowns menu by selected Country, include ‘all country’. Show all country by default and at the beginning Bars should animate with a transition when: The country filter changes. When hovering over a bar: Show tooltip (value range + count). Highlight the bar with a color change. 3. Scatterplot: Customers (2) Data: customer_summary.csv Customer-level scatterplot x-axis: num_orders y-axis: total_revenue Color: country Size: avg_basket_value Requirements: Hover tooltip (show CustomerID, country, revenue). Use the same dropdown menu that in the Histogram Panel to selected Country (include ‘all country’, this same dropdown menu control both the Scatterplot and Histogram at the same time) Dots should animate with a transition when: The country filter changes. Submission create a root working folder containing: Data csv files An .html file A .js file A .css file Put this folder in a single zipped file and submit via Brightspace
Read Details