Skip to main content
SimilarExport ZIP
100%

ICE6-multiline

✓ Published0🌍 Public
HHariniPotla@my.unt.edu
Last edited Mar 6, 2026
Created on Mar 6, 2026
Forked from HTML Starter

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.

AI-generated description
MIT Licensed

Similar vizzes

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

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

Fork of ICE6

This multi-series line chart displays Sales, Profit, and Expenses across 150 samples, with each metric distinguished by color. Built using React and D3 v7, it renders as SVG, using `d3.scaleLinear` for axes and `d3.line` to generate the three paths. Gridlines, axis labels, and a legend are added via D3’s `append` and `call` methods. The code loads data from a remote CSV using `d3.csv`.

AAriful Hasan
85% 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
84% match
Loading thumbnail…

Fork of ICE-6(multi series)

This fork of ICE-6 combines bar and line series to compare monthly sales and profit data loaded from a CSV file. Bars encode sales values while a monotone-curved line shows profit, with both sharing a linear y-scale and band x-scale. The D3 v7 chart includes gridlines, axis labels, a legend, and interactive tooltips on bars and points. SVG rendering is used throughout, leveraging `d3.csv`, `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, `d3.line`, and event handlers for mouse and keyboard accessibility.

Vvydeeshm@gmail.com
84% match