Skip to main content
SimilarExport ZIP
100%

ice6_Question3

✓ Published0🌍 Public
Ssrujana reddy
Last edited Oct 20, 2025
Created on Oct 20, 2025
Forked from D3 Starter

This example presents two charts analyzing Microsoft product sales data for the Azure category across 2023. The first chart is a multi-series line chart comparing Revenue and Profit over time, while the second combines bar and line encodings to show Orders alongside a Rating scale. Both visualizations are rendered as SVG elements using d3.v7, with the CSV data loaded via d3.csv and scales constructed using d3.scalePoint, d3.scaleBand, and d3.scaleLinear. Axes are generated with d3.axisBottom and d3.axisLeft for interactive comparison.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Ice7Q3

This line chart shows monthly revenue by product category for Microsoft sales, using a multi-series display with dots, lines, and a legend to differentiate categories. The visualization loads data from a CSV file via `d3.csv`, sorts months manually, and renders the chart with SVG paths and circles. It uses `d3.svg.line`, `d3.scale.ordinal`, `d3.scale.linear`, and `d3.svg.axis`, with a tooltip that appears on circle mouseover. The code applies a category color scale and nests the data by category to draw separate lines.

Ssrujana reddy
84% match
Loading thumbnail…

Ice7Q4

This interactive area chart visualizes Microsoft’s monthly revenue across product categories, with each category rendered as a semi-transparent filled region outlined by a colored line. The chart uses D3 v3’s `d3.svg.area()`, `d3.svg.line()`, and ordinal/linear scales, with axes labeled for month and revenue in dollars. A legend identifies categories, and hovering over an area triggers a tooltip showing the category name. Data is loaded from a remote CSV file via `d3.csv`.

Ssrujana reddy
82% match
Loading thumbnail…

Ice7Q1

This interactive scatter plot visualizes Microsoft sales data, plotting revenue against profit for different product categories and scaling each point’s radius by order count. Hovering reveals a tooltip with category, revenue, and profit details. Built with D3.js v3, it uses `d3.svg.axis`, linear scales, and `d3.scale.category10` for coloring. Data loads from an external CSV file, and the chart is rendered as an SVG with mouseover transitions controlling tooltip opacity. The reusable `scatterPlot` function configures dimensions, margins, and accessor functions.

Ssrujana reddy
81% match
Loading thumbnail…

ice6- q3

This visualization presents two views of monthly sales data from a sales_data_sample.csv file. The first is a multi-series line chart tracking sales trends for three product lines: Classic Cars, Motorcycles, and Planes. The second is a combined dual-axis chart that plots total sales and average sales together using `d3.rollups` to aggregate the data, with lines rendered via D3’s `d3.line` API and scales from `d3.scaleLinear`. The SVG is generated with D3 v7, and axes are drawn using `d3.axisBottom` and `d3.axisLeft`.

AAravindReddyJanke@my.unt.edu
78% match
Loading thumbnail…

ice 6 multi_series

This multi-series chart tracks Sales, Revenue, and Profit trends for daily business metrics from January to July 2024. It overlays three colored lines on a time-based x-axis, with a combined bar chart highlighting selected sales data points. The visualization uses D3.v7 to render SVG elements, employing `d3.scaleTime` for the date axis, `d3.scaleLinear` for the value axis, and `d3.line` for drawing the series paths. An interactive legend identifies each metric, and the chart includes axis labels for clarity.

HHarshithaDontha@my.unt.edu
78% match
Loading thumbnail…

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.

Sshreshnaanugu@gmail.com
78% match
Loading thumbnail…

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
77% match
Loading thumbnail…

ice 6 - q1

This bar chart shows the average sales for each product line from a GitHub-hosted CSV file, with each bar’s height representing the mean sales in USD. The chart uses D3 v7 to fetch the data via `d3.csv`, compute averages with `d3.rollup` and `d3.mean`, and render SVG bars with scales from `d3.scaleBand` and `d3.scaleLinear`. Interactive tooltips appear on mouseover, displaying the product line and its average sales. Axes and labels are generated using `d3.axisBottom` and `d3.axisLeft`.

AAravindReddyJanke@my.unt.edu
77% match