ICE6_Gayathri_LineChart

100%

ICE6_Gayathri_LineChart

✓ Published0🌍 Public

Last edited Mar 9, 2026

Created on Mar 9, 2026

A line chart and bar chart combination displays sales and profit trends for years 2015 through 2022, with sales as steel-blue bars and profit as a red line. The visualization uses D3 v7’s `scaleBand` for the x-axis and `scaleLinear` for the y-axis, rendering SVG elements within a React application. The chart includes a legend and axis labels, with data hardcoded in the script.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE6_Yash_LineChart

This example shows annual revenue as orange bars and cost as a green line from 2015 to 2022, with a legend and axis labels for comparison. It uses d3.scaleBand for the x-axis years and d3.scaleLinear for the y-axis values, rendering SVG rectangles and a d3.line path. The data is hardcoded in the script, and the visualization is built with D3 v7 inside a plain HTML page without React integration.

YYash Raj Mathur

82% match

Loading thumbnail…

ICE 7 Line Chart

This chart shows sample sales data from 2010 to 2022 as a single line, with a time-scaled x-axis for years and a linear y-axis for sales values. The visualization uses D3 v5 to load CSV data, then draws an SVG line path using `d3.line`, with axes generated by `d3.axisBottom` and `d3.axisLeft`. The code imports modules like `scaleTime`, `scaleLinear`, `extent`, and `max` from D3 via a Rollup bundle that outputs to `bundle.js`. The styling applies custom CSS for gridlines, axis labels, and the stroke color of the line path.

Ddheeraj1509

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

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

80% match

Loading thumbnail…

ICE - 7 Line Chart

A line chart displays annual sales over time, with a single thick maroon line tracing the trend. The visualization uses D3 v5 to load CSV data via `d3.csv`, parse dates with `d3.timeParse`, and construct scales with `scaleTime` and `scaleLinear`. Axes are generated using `axisBottom` and `axisLeft`, while the line path is created with the `d3.line` generator. The SVG rendering includes labeled axes and gridlines, with data sourced from a GitHub gist.

Nnehabaddam

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

80% match

Loading thumbnail…

ICE-7(Line Chart)

This visualization shows electronic sales in India from 2009 to 2022 as a line chart. The code uses D3 v5 APIs including `scaleLinear`, `scaleTime`, `line`, `axisLeft`, and `axisBottom` to render the SVG path representing the sales trend over time. Data is loaded from a CSV file hosted on GitHub, with year values converted to date objects and sales figures parsed as numbers. The chart includes labeled axes, a title, and gridlines, with styling applied via an external CSS file.

PPrathyusha Jampala

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