100%

ice 6 multi_series

✓ Published0🌍 Public

HHarshithaDontha@my.unt.edu

Last edited Oct 20, 2025

Created on Oct 20, 2025

Forked from Ice-6 of Deepak Reddy Punuru ( Multi-Series Chart )

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.

AI-generated description

Data Visualization Project

This project contains D3.js visualizations for population data and business metrics.

Project Structure

MIT Licensed

Similar vizzes

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

86% match

Loading thumbnail…

ice6

A multi-series combined chart displays three time-based metrics (metric_A, metric_B, metric_C) as smooth lines alongside vertical bars representing monthly averages of metric_B. The SVG visualization uses D3 v7 with d3.csv for data loading, d3.scaleTime and d3.scaleLinear for axes, d3.rollups for monthly aggregation, and d3.line with curveMonotoneX for line generation. Gridlines and a legend support the view, with data sourced from a remote CSV file.

Kkmuktha09@gmail.com

82% match

Loading thumbnail…

Ice_6_Yaswanth_duddu

This visualization combines a bar chart and multi-series line chart to display monthly Sales, Profit, and Expenses trends from a CSV dataset. Expenses are rendered as semi-transparent green bars, while Sales and Profit appear as blue and orange lines, respectively. The chart uses D3.js v6 with SVG rendering, employing `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the y-axis, and `d3.line` for path generation. Interactive tooltips appear on bar hover, and the chart includes rotated month labels, axis titles, and a color-coded legend.

YYaswanth

81% match

Loading thumbnail…

ice6- q3

This visualization presents two views of monthly sales data from a sales_data_sample.csv file. The first is a multi-series line chart tracking sales trends for three product lines: Classic Cars, Motorcycles, and Planes. The second is a combined dual-axis chart that plots total sales and average sales together using `d3.rollups` to aggregate the data, with lines rendered via D3’s `d3.line` API and scales from `d3.scaleLinear`. The SVG is generated with D3 v7, and axes are drawn using `d3.axisBottom` and `d3.axisLeft`.

AAravindReddyJanke@my.unt.edu

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

80% match

Loading thumbnail…

ice7 part4

This interactive area chart visualizes monthly sales data for a product category, with a gradient-filled area beneath a smoothed line and circular markers for each data point. Hovering over a point reveals a tooltip displaying the month and sales value. Built with D3.js v7, it uses `d3.area` and `d3.line` generators with `d3.scaleBand` and `d3.scaleLinear` for axes, rendered as SVG. The code defines a linear gradient via `linearGradient` and attaches mouseover/mouseout handlers for interactivity.

Jjammigumpula.priyanka193@gmail.com

79% match

Loading thumbnail…

Multi-Series Line + Combined (Bar+Line)

This dashboard presents two charts built with D3.js v7 from a CSV sales dataset. The top visualization uses a multi-series line chart to track monthly trends for Sales and Profit. The bottom chart combines bars for Sales with an overlaid line for Profit Margin, providing a dual-axis view of volume versus efficiency. Data is parsed and aggregated by month using `d3.rollups` and `d3.timeParse`, with axes, grids, and scales configured via `d3.axisLeft`, `d3.axisBottom`, and `d3.scaleUtc`. Rendering uses SVG within a dark-themed HTML container.

RRamdas Dheeraj

79% match

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.

79% match