ice 6 combined

100%

ice 6 combined

✓ Published0🌍 Public

Last edited Mar 8, 2026

Created on Mar 8, 2026

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.

AI-generated description

MIT Licensed

Similar vizzes

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

89% match

Loading thumbnail…

ICE-6(multi series)

This example combines bar and line charts to compare sales and profit across seven months, with bars encoding sales and a monotone line tracking profit. The SVG visualization is built with D3 v7, using `d3.scaleBand`, `d3.scaleLinear`, and `d3.line` with `d3.curveMonotoneX`. Interactive tooltips appear on bar and dot hover via mouse events, while gridlines, axis labels, and a custom legend clarify the dual-series data loaded from a CSV file.

Vvydeeshm@gmail.com

86% match

Loading thumbnail…

Line chart - ICE 7

This line chart visualizes monthly Sales, Profit, and Expenses across 160 data points, using three distinct colored lines with circular markers to highlight each metric. Rendered as an SVG using D3 v7, the chart employs a point scale for the x-axis and a linear scale for the y-axis, with axes labeled and tick text rotated for readability. Data is loaded from a CSV file via d3.csv, and tooltips are provided through SVG title elements appended to the markers. A legend identifies the three series, which show linear growth trends throughout the months.

GGuntupalli Mohan kalyan

86% match

Loading thumbnail…

ICE6

This interactive bar chart shows monthly sales figures, with each bar representing a month’s sales value from the `Sales.csv` dataset. The chart supports clicking on a bar to highlight it, visually distinguishing the selected month by changing its fill to white with a black stroke. The visualization is built with React and D3 v7, using `d3.csv` to parse the data, `d3.scaleBand` and `d3.scaleLinear` for scales, and `d3.axisBottom` and `d3.axisLeft` for axes, all rendered as SVG within a responsive container.

GGuntupalli Mohan kalyan

85% match

Loading thumbnail…

Fork of ICE-6(multi series)

This fork of ICE-6 combines bar and line series to compare monthly sales and profit data loaded from a CSV file. Bars encode sales values while a monotone-curved line shows profit, with both sharing a linear y-scale and band x-scale. The D3 v7 chart includes gridlines, axis labels, a legend, and interactive tooltips on bars and points. SVG rendering is used throughout, leveraging `d3.csv`, `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, `d3.line`, and event handlers for mouse and keyboard accessibility.

Vvydeeshm@gmail.com

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

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

84% match

Loading thumbnail…

ICE6_Combined_Bar_Line

This combined chart displays 150 months of coffee sales as blue bars on a left y-axis, overlaid with customer counts as a red line on a right y-axis, using two independent linear scales. The visualization also includes grid lines, axis labels, a legend, and circular data points along the customer line for precise value reading. Built with React and D3 v7, the chart renders as SVG, reads data from a CSV file via d3.csv, and constructs the bar and line elements using d3.scaleBand, d3.scaleLinear, d3.axisLeft, d3.axisRight, and d3.line.

AAddiga Himesh Chander

84% match