ICE_6_Amalgamated_Bar_Line

100%

ICE_6_Amalgamated_Bar_Line

✓ Published0🌍 Public

Last edited Oct 20, 2025

Created on Oct 20, 2025

This visualization presents quarterly retail sales data in two complementary views. The first chart uses multiple line series with d3.line and d3.scalePoint to compare sales trends across North, West, and East regions. The second chart combines bar and line marks, using d3.scaleBand for advertising spending and a second linear scale for total sales, with data aggregated from a CSV file. The SVG rendering uses d3.axisBottom and d3.axisLeft for axes, while custom legends identify series colors.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-6

A bar chart displays total sales amounts by region, with bars sorted in descending order. The visualization is built with D3.js v7 and rendered as an SVG within a React framework. It uses `d3.csv` to load data, `d3.rollups` to aggregate sales by region, and `d3.scaleBand` and `d3.scaleLinear` for axes. Bars are drawn using SVG `rect` elements, with a tooltip-free design and axis labels. The code is structured modularly with functions like `renderBars` and `renderTitle`, and includes interactive element selection through click handlers.

Ssrinathkarumuru@my.unt.edu

84% match

Loading thumbnail…

ICE-6

This bar chart displays sales data for various items, with horizontal bars showing the sale amount for each item. The visualization uses React and D3 v5, loading CSV data via `d3.csv` and rendering SVG elements with `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. Gridlines and axis labels are generated manually using `xScale.ticks()`, while the data values are encoded as rectangle widths.

HHARSHA BUDDANA

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

83% match

Loading thumbnail…

ICE-6

A bar chart displays yearly sales figures for a company from 2014 to 2021, with values in millions and axes labeled via `d3.axisBottom` and `d3.axisLeft`. The React-based app uses D3 v5 to render an SVG, mapping data onto a band scale and linear scale. It reads its data from a hardcoded array, not the external CSV, and renders black bars with a 0.2 padding.

KKiran Jyothi Bodduluri-11604571

82% match

Loading thumbnail…

ICE6 Bar Plot

This example visualizes total sales for five items using a horizontal bar plot rendered as SVG. The React component fetches data from a CSV file via `d3.csv`, then uses `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the quantitative x-axis. D3's axis utilities generate tick marks and labels for both scales. The bars themselves are plain SVG `<rect>` elements, with their widths proportional to the sales values, and the chart includes a title and loading state.

PPlatoch

82% match

Loading thumbnail…

ICE 6 (Marks and Channels) - Bar Graph

This bar graph visualizes sales figures for 30 US states from the Superstore dataset, with states on the y-axis and sales values on the x-axis. The React component loads data via d3.csv and renders SVG rectangles scaled by d3.scaleBand and d3.scaleLinear. Grid lines and tick marks are generated manually using d3.format, while axis labels are positioned from the scales' domain values. Each state’s bar length encodes its total sales, allowing quick comparison across the displayed subset.

NNaveen Kumar

82% match

Loading thumbnail…

ICE6 - Bar Chart

This bar chart displays Super Store sales totals across different states, sourced from a CSV of the first 100 records of the dataset. The visualization uses React to manage the data-fetching state and D3.js to render the scalable vector graphics (SVG) bars and axes. Specifically, `scaleBand` and `scaleLinear` position the bars, while custom tick rendering replaces default axes, with gridlines drawn in blue. The chart encodes sales values as bar lengths, making state-level comparisons straightforward. Data is loaded asynchronously via `d3.csv`, with each row’s `Sales` field converted to a numeric `Cost` value for plotting.

Kkuraakhila9@gmail.com

82% match

Loading thumbnail…

ICE 6 Marks and Channels

A horizontal bar chart displays the sales figures for the top 15 supermarket customers. Each bar’s color alternates between red and light blue based on its array position. The chart uses React with D3 v5’s `scaleBand` and `scaleLinear` to position bars, while axis ticks are generated manually from the scales. Data is loaded from a CSV file via `d3.csv` and rendered as SVG rectangles.

SSai Kaushik

81% match