ice

100%

✓ Published0🌍 Public

Last edited Mar 6, 2026

Created on Mar 6, 2026

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

combined chart

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`.

AAparna Desi Reddy

85% 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

83% match

Loading thumbnail…

ICE-7 Line Chart

This line chart displays annual sales for an e-commerce site from 2009 to 2019, with a blue line tracing the trend over time. Using D3 v5, it loads CSV data via `d3.csv`, parses dates with `d3.timeParse`, and constructs the visualization with `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line`. The SVG includes gridlines from tick marks, axis labels, and a styled path, with sales values formatted using `format('.3s')`. The chart is rendered entirely in SVG with axes positioned inside a margin-defined area.

PPrasanth Damarla

80% match

Loading thumbnail…

ICE6-barchart

This example shows daily sales performance as a static bar chart, with each bar representing one day’s sales value in steel blue on an SVG canvas. It loads CSV data from a GitHub gist, parsing numeric fields for Day, Sales, Profit, Orders, and Visitors. The chart uses `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis, with axes rendered via `d3.axisBottom` and `d3.axisLeft`. Only every fifth day is labeled on the x-axis to reduce clutter, and titles for the chart and axes are added as SVG text elements.

HHariniPotla@my.unt.edu

80% 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

80% match

Loading thumbnail…

ice 6 combined

This combined bar-and-line chart displays monthly sales and profit trends using a sampled subset of the CSV data. Bar heights represent sales figures, while a red line with circular markers overlays profit values on the same axes. Built with D3 v7, the visualization uses `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the y-axis, and `d3.line` to generate the profit path, with points rendered as SVG circles.

GGuntupalli Mohan kalyan

79% match

Loading thumbnail…

ICE-7 Area Chart

This area chart visualizes e-commerce sales from 2009 to 2019, with a smoothed line and filled region beneath it. Using D3 v5, the code employs `scaleTime` and `scaleLinear` for axes, `area` and `line` generators with `curveBasis` for smoothing, and `csv` to load remote data. The SVG rendering includes labeled axes with gridlines and a green title, while CSS styles the chart’s tick marks and area fill.

PPrasanth Damarla

79% 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

79% match