Combined chart Assignment

Multi series Assignment

This visualization presents retail sales trends for Electronics, Clothing, and Groceries across 150 months using a multi-series line chart. The top panel displays three colored lines representing each product category, while the bottom panel combines a gray bar chart of total sales with an overlaid blue line for Electronics. The example uses D3 v7 (d3.v7) with the scaleLinear, scaleBand, axisBottom, axisLeft, line, and csv APIs to render interactive-free SVG charts. Data is loaded from a local CSV file, and colors are assigned via d3.scaleOrdinal.

KKOLLIPATI NIKHIL

90% match

Ppadiginetivishnupriya@gmail.com

Area Chart

This area chart visualizes monthly electronics sales in a grocery store for 2023, showing the trend of sales values across the twelve months using a filled line path. The visualization uses D3 v5 with an SVG rendering, employing `scalePoint` for the categorical month axis and `scaleLinear` for the sales values. The code loads CSV data from a GitHub gist, then draws the area chart by appending a line path and filling it with light green, alongside labeled axes with custom tick styling and a title. The chart includes axis labels, grid lines, and color-coded elements for readability.

80% match

Data of Electronic sales line chart

This line chart displays electronic sales totals over time, using a multi-year date range on the x-axis and cumulative sales figures on the y-axis. The visualization loads CSV data from a GitHub gist and renders a single black trend line in an SVG canvas. It employs D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` to generate axes with grid ticks and the path. The chart labels both axes and uses a skyblue background from its stylesheet.

DDINESH SAI BOPPANA

78% match

Line chart for electronic sales

This line chart visualizes total sales across product categories, using a filled area beneath a steel-blue line to emphasize the trend. Built with D3 v7 and rendered as an SVG, the chart loads CSV data from a GitHub gist and converts sales values from currency strings to numbers. It uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.line` and `d3.area` to generate the paths.

Ssreeramyamini@gmail.com

Line chart for electronics sales

This line chart displays electronics sales over six months, from January to June, with monthly sales values ranging between $49,000 and $57,000. A single steelblue line connects the data points, plotted using d3.line with a point scale for months on the x-axis and a linear scale for sales on the y-axis. The visualization, rendered as an SVG, includes labeled axes for month and sales amount, with data hardcoded in the script rather than loaded externally. Axis ticks are generated via d3.axisBottom and d3.axisLeft.

Sales Data

This grouped bar chart displays sales data for six product categories (Electronics, Clothing, Groceries, Furniture, Toys, Books) across six months (January through June). The chart shows monthly comparisons using color-coded bars, with dollar amounts on the y-axis and months on the x-axis. The visualization is generated using D3.js v5 with an SVG rendering approach, employing `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the y-axis, and `d3.scaleOrdinal` for category colors. Data is hardcoded in the script, and axes are labeled with "Month" and currency-formatted tick values.

Sales Data

Scatter plot for Electronics sale

This scatter plot displays monthly electronics sales figures as teal circles, with months on the x-axis and sales values on the y-axis. Built with D3 v6, the reusable chart function (using a closure pattern) renders an SVG, employs `d3.scaleBand` for the categorical month axis, and `d3.scaleLinear` for the sales scale. The code defines a reusable scatter plot builder with settable width, height, data, and axis labels, though the visible example is static with six months of sales data.