ICE 6 multi line

100%

ICE 6 multi line

✓ Published0🌍 Public

Last edited Mar 8, 2026

Created on Mar 8, 2026

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.

AI-generated description

MIT Licensed

Similar vizzes

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

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

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

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…

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

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

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

82% match

Loading thumbnail…

ICE7 Area & Line Combo

This example visualizes year-wise sales data from a CSV file using a combined area and line chart. It shows sales trends over time with a smooth curve, where the line path highlights the data points and the area beneath it fills with a contrasting color. The chart uses D3 v5 APIs including `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, `d3.area`, and `d3.axisBottom`/`d3.axisLeft`, rendering to SVG. Grid lines and axis labels are styled via CSS, and the data is parsed with `d3.csv` and `d3.timeParse`.

SSharmaAshwini

81% match