combined chart

100%

combined chart

✓ Published0🌍 Public

Last edited Mar 6, 2026

Created on Mar 6, 2026

This combined chart displays the relationship between daily orders placed and revenue in US dollars for an e-commerce website, using the first 40 days of a CSV dataset. Steel-blue bars represent order counts on the left y-axis, while a red Catmull-Rom smoothed line shows revenue on the right y-axis. Built with D3 v7, the visualization uses `d3.scaleBand`, `d3.scaleLinear`, `d3.axisLeft`, `d3.axisRight`, and `d3.line` to render the SVG elements, complete with gridlines, labels, and a legend. Data is fetched and parsed via `d3.text` and `d3.csvParse`.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

ice

This combined chart displays e-commerce metrics across 150 days, with steelblue bars representing daily order counts on the left axis and a smooth red line tracking revenue in USD on the right axis. The visualization uses D3 v7’s `scaleBand` for the x-axis, dual `scaleLinear` axes, `axisLeft`, `axisRight`, and a Catmull-Rom curve via `d3.curveCatmullRom` for the revenue line. Data is loaded from a CSV using `d3.text` and `d3.csvParse`, which processes the raw text into a structured dataset for rendering as an SVG.

AAparna Desi Reddy

85% match

Loading thumbnail…

Multi-series chart

This multi-series line chart visualizes e-commerce performance trends over time, plotting three metrics—visitors, orders placed, and revenue in USD—across a 30-day period. Using d3.csvParse to load external CSV data, the visualization applies d3.curveCatmullRom for smooth line interpolation and d3.axisBottom/axisLeft for axes. Separate colored paths (steelblue, green, red) represent each metric, accompanied by a legend and gridlines generated via d3.axisLeft with tick sizing. The SVG rendering uses D3’s scaleLinear for x/y domains and appends title and axis labels dynamically.

AAparna Desi Reddy

81% match

Loading thumbnail…

E-Commerce_metrics

This example displays revenue by day for the first twenty days of an e-commerce dataset as a bar chart. It renders SVG rectangles scaled by d3.scaleBand and d3.scaleLinear, with axis generators for the x and y axes. The chart loads a CSV file via d3.csv, filters the data, and maps Day and RevenueUSD to their respective scales. The bars change from steelblue to orange on hover.

AAparna Desi Reddy

81% match

Loading thumbnail…

ICE6-combinedchart

This combined chart displays sales as steelblue bars and profit as a red line across 28 days, using a band scale for the x-axis and a linear scale for the y-axis. The code loads CSV data via `d3.csv`, converts numeric fields with unary plus operators, and renders the visualization with SVG. It constructs the bar layer with `selectAll('rect')` and the line path using `d3.line`, then adds axes through `d3.axisBottom` and `d3.axisLeft`. The chart highlights the relationship between daily sales volume and profit trends.

HHariniPotla@my.unt.edu

77% match

Loading thumbnail…

Online Sales Bar Chart

This bar chart visualizes online customer sales, plotting the number of purchases against total revenue for each category. It uses D3.js v4 with an SVG rendering approach, leveraging `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the continuous y-axis. Data is loaded asynchronously from a CSV file via `d3.csv`. The chart positions rectangular bars with a fixed blue fill, rotating the x-axis labels for readability.

MManideeprenikindi

74% match

Loading thumbnail…

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

73% match

Loading thumbnail…

Online Sales

This visualization displays the number of purchases for the top fifteen revenue-generating brands in an online sales dataset, using a horizontal bar chart. The revenue totals appear on the y-axis, while purchase counts are mapped on the x-axis. Built with React and D3 v5, the chart uses `scaleBand` and `scaleLinear` for positioning, with SVG `rect` elements for bars and custom tick rendering. Data is loaded asynchronously from a CSV file via `d3.csv`, and the visualization includes blue grid lines to aid value comparison.

MManideeprenikindi

73% match

Loading thumbnail…

Online Sales Line chart

This example shows online sales revenue over time as a line chart, with the x-axis representing years and the y-axis representing total revenue. It uses D3 v5 to load CSV data, parse dates with `d3.timeParse`, and render the visualization in SVG. The code employs `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` generators to construct the chart, with gridlines styled via tick marks and a styled purple stroke for the data path.

MManideeprenikindi

73% match