Line chart - ICE 7

100%

Line chart - ICE 7

✓ Published1🌍 Public

Last edited Mar 29, 2026

Created on Mar 29, 2026

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

ICE7 linechart

This line chart visualizes monthly sales in 2022, with the x-axis showing months and the y-axis displaying sales figures in thousands of USD. The chart is rendered as an SVG using D3 v5, employing `scalePoint`, `scaleLinear`, `axisBottom`, and `axisLeft` for scales and axes. A purple line path is generated with D3’s `line` API, and the data is loaded from a CSV file via `d3.csv`. Styling for fonts, grid lines, and the line stroke is defined in a separate CSS file.

89% match

Loading thumbnail…

Area Chart ICE 7

This example shows monthly Sales, Profit, and Expenses trends over 160 months using a multi-series area chart with overlaid lines and circles. The chart uses d3.area and d3.line generators to render semi-transparent filled regions and stroke lines, while a d3.scalePoint maps months to x positions. Axes, rotated labels, a legend, and tooltip titles are added via d3-axis and SVG title elements, with data loaded from Sales.csv using d3.csv.

GGuntupalli Mohan kalyan

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

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

86% match

Loading thumbnail…

ICE 6 multi line

This example displays a multi-series line chart titled "Sales Multi-Series Line Chart," plotting Sales, Profit, and Expenses across 161 time points. The chart filters the CSV data to every tenth month, reducing visual clutter. Built with D3.js v7, the visualization uses `d3.line` to create three distinct colored paths and renders the output as SVG. The code also includes axes, a legend, and data point markers, with the y-axis scaled to accommodate the maximum value across all three series.

GGuntupalli Mohan kalyan

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

86% match

Loading thumbnail…

LINE CHART - ICE 7 SAKETH SARA

This line chart compares sales and profit values across a series of products. It uses D3 v7 to load a CSV file, map the data to points, and render two smooth monotone lines in blue and green, with circular markers for each product. The SVG visualization includes rotated category labels, horizontal grid lines, a legend, and interactive tooltips that appear on hover. The chart uses `d3.csv` with `d3.autoType`, `d3.scalePoint`, and `d3.axisBottom` to construct the axes and visual encoding.

Ssarasaketh3@gmail.com

86% match

Loading thumbnail…

ice07 - linechart

This line chart displays sales trends across product categories, with total sales on the y-axis and categories on the x-axis. Using d3.csv with autoType, it loads retailer data from a GitHub gist and aggregates sales per category via d3.rollups and d3.sum. The line is drawn with d3.line, while d3.scalePoint and d3.scaleLinear handle positioning; circles mark each data point. Axes are rendered using d3.axisBottom and d3.axisLeft, with SVG output and a purple stroke for the line.

LLaasyaJ256

85% match