Skip to main content
SimilarExport ZIP
100%

ICE6

✓ Published1🌍 Public
KKumar Danam
Last edited Oct 19, 2025
Created on Oct 19, 2025

This example shows yearly profit as blue bars on a left axis and the average unit price as a red line on a right axis, using data loaded from a CSV via `d3.csv`. It computes yearly aggregates with `d3.rollup` and `d3.sum`. The visualization renders with `d3.select` and `append` into an SVG, using `d3.scaleBand` and `d3.scaleLinear` for the axes, and draws the line with `d3.line`.

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

ICE6-Kumar Danam

This visualization shows yearly sales performance, combining bar charts for total sales in millions of dollars with a line chart for total units sold. The code uses d3.rollup to aggregate the raw CSV data by year, then d3.scaleBand and two d3.scaleLinear instances create dual axes. SVG rendering displays the bars and line, with axes, labels, and a legend using d3.axisBottom, d3.axisLeft, d3.axisRight, and d3.join.

KKumar Danam
83% match
Loading thumbnail…

ICE6-multiline

This multi-series line chart displays Sales and Profit trends over time, with two lines drawn in steel blue and green on a shared axis. The visualization uses D3.js v7, loading CSV data from a GitHub gist and mapping numeric Day, Sales, and Profit fields. The code employs `d3.csv`, `d3.scaleLinear`, `d3.line`, and `d3.axisBottom`/`d3.axisLeft` to construct the SVG rendering, including labeled axes and a title.

HHariniPotla@my.unt.edu
82% match
Loading thumbnail…

ICE-6

This bar chart displays total sales values by year, with each year’s revenue encoded as a bar’s height and a dollar-formatted y-axis for reference. Built with D3 v4, it loads CSV data from a GitHub gist via `d3.csv`, scales the x-axis with `d3.scaleBand` and the y-axis with `d3.scaleLinear`, and renders SVG rectangles. Axis labels for “Year” and “Total Sales Value” are appended directly to the generated axes.

Kkartik900
82% 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
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
80% match
Loading thumbnail…

ICE-6 Yearly Sales Scatter Plot

A scatter plot displays yearly sales data as steelblue circles, with orange highlighting on hover. The chart maps the Year and Sales fields from a CSV file onto linear scales, with axes labeled accordingly. Built with D3 v7 in a React environment, the visualization uses `d3.csv` to load data, `scaleLinear` and `extent` for scaling, and `axisBottom`/`axisLeft` for axis generation, rendered as SVG circles sized at a fixed radius.

Aarchanagoli@my.unt.edu
79% match
Loading thumbnail…

ICE6 BarChart

This bar chart displays total product sales in USD, aggregated from a CSV dataset loaded via `d3.csv`. It shows that Product E has the highest revenue while Product D has the lowest, with bars sorted in descending order. Using D3 v6, the visualization applies `d3.rollups` and `d3.sum` to aggregate data, then renders SVG bar charts with `d3.scaleBand`, `d3.scaleLinear`, and `d3.axisLeft`/`d3.axisBottom`. Interactive hover effects change bar color via CSS.

Kkmuktha09@gmail.com
79% match