Question 3: Line Chart

Question 4: Area Chart

This area chart visualizes monthly revenue trends across multiple products, with each product represented as a colored filled region that can be hovered to adjust opacity. The chart uses D3 v7 to load CSV data via `d3.csv`, aggregates revenue by product and month using `d3.group` and `d3.rollup`, and renders the areas with `d3.area` alongside scaled point-based x-axes (`d3.scalePoint`) and linear y-axes (`d3.scaleLinear`). Interactive dots respond to mouse hover by increasing their radius, and gridlines provide reference for revenue values.

87% match

Question 1: Bar Chart

This bar chart visualizes total revenue aggregated by product from a CSV sales dataset fetched from a GitHub gist. Using D3 v7, it loads and processes the data with `d3.csv`, then applies `scaleBand` for the categorical x-axis and `scaleLinear` for the revenue y-axis. The SVG rendering includes value labels on each bar, rotated axis text, and a hover opacity transition. The bar chart displays a vertical layout with dollar amounts labeled, all within a styled container on a gradient background.

Question 4: Multi-Series Chart (Bar + Line)

This example combines a bar chart and line chart into a single multi-series visualization, showing revenue as blue bars and units sold as a red line for each product category. The data is loaded as CSV from a remote GitHub gist and aggregated by product using d3.csv and manual JavaScript object mapping. The chart uses d3.scaleBand for the categorical x-axis and two separate d3.scaleLinear scales for the revenue and units y-axes, with d3.axisLeft for gridlines and d3.line to generate the units-sold path. The SVG is rendered with a gradient background and includes hover transitions on bars and circles.

LINE CHART

This line chart displays monthly revenue trends over time, with each data point marked by a circle and connected by a steelblue line. The visualization uses D3 v7’s `d3.scalePoint` for the categorical month axis, `d3.scaleLinear` for the revenue scale, and `d3.line` to generate the path. Data is loaded asynchronously from a CSV file via `d3.csv`, and rendered as SVG with axis labels and gridlines.

PP Manisha

3 Line Chart

This visualization shows monthly revenue trends across a year using a green line and red circular data points. The chart is built with D3 v7 and rendered as an SVG, using `d3.scalePoint` for the month axis and `d3.scaleLinear` with `.nice()` for the revenue axis. A monotone X curve smooths the line via `d3.curveMonotoneX`, while `d3.axisBottom` and `d3.axisLeft` generate the labeled axes, with data loaded from a CSV file.

SSai Vamshi B

Question 2: Pie Chart

This example visualizes product revenue distribution as an interactive pie chart, with slices colored by product and sized by aggregated revenue from a CSV file loaded via `d3.csv()`. The SVG-based chart uses `d3.pie()` and `d3.arc()` to generate the slices, while hovering highlights a slice with a `transition` animation. A legend and title accompany the chart, and the background uses a CSS gradient. The chart sorts products by revenue and uses an ordinal color scale.

81% match

Question2

This example shows a comparative area chart of monthly sales for two products during 2023, filled with distinct colors from a categorical scheme. The chart uses D3 v7’s `d3.scaleBand` for the month axis and `d3.scaleLinear` for the sales axis, with area paths generated via `d3.area`. Data is fetched as CSV from a GitHub repository, parsed with `d3.csvParse`, and rendered as SVG. A custom HTML legend, built with `d3.select` and `d3.selectAll`, displays color swatches and product labels alongside the chart.

Gganesh.hns48@gmail.com

81% match