Multi-series chart

100%

Multi-series chart

✓ Published0🌍 Public

Last edited Mar 6, 2026

Created on Mar 6, 2026

This multi-series line chart visualizes e-commerce performance trends over time, plotting three metrics—visitors, orders placed, and revenue in USD—across a 30-day period. Using d3.csvParse to load external CSV data, the visualization applies d3.curveCatmullRom for smooth line interpolation and d3.axisBottom/axisLeft for axes. Separate colored paths (steelblue, green, red) represent each metric, accompanied by a legend and gridlines generated via d3.axisLeft with tick sizing. The SVG rendering uses D3’s scaleLinear for x/y domains and appends title and axis labels dynamically.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Multi series Assignment

This visualization presents retail sales trends for Electronics, Clothing, and Groceries across 150 months using a multi-series line chart. The top panel displays three colored lines representing each product category, while the bottom panel combines a gray bar chart of total sales with an overlaid blue line for Electronics. The example uses D3 v7 (d3.v7) with the scaleLinear, scaleBand, axisBottom, axisLeft, line, and csv APIs to render interactive-free SVG charts. Data is loaded from a local CSV file, and colors are assigned via d3.scaleOrdinal.

KKOLLIPATI NIKHIL

82% match

Loading thumbnail…

combined chart

This combined chart displays the relationship between daily orders placed and revenue in US dollars for an e-commerce website, using the first 40 days of a CSV dataset. Steel-blue bars represent order counts on the left y-axis, while a red Catmull-Rom smoothed line shows revenue on the right y-axis. Built with D3 v7, the visualization uses `d3.scaleBand`, `d3.scaleLinear`, `d3.axisLeft`, `d3.axisRight`, and `d3.line` to render the SVG elements, complete with gridlines, labels, and a legend. Data is fetched and parsed via `d3.text` and `d3.csvParse`.

AAparna Desi Reddy

81% match

Loading thumbnail…

charts

This example visualizes monthly sales trends from a CSV data source, comparing three product lines from 2019 to 2023. It shows a multi-series line chart with time-scale axes, using D3 v7 and SVG rendering. The code loads data with `d3.csv`, maps dates via `d3.timeParse`, and draws lines with `d3.line`, alongside a legend and axis labels. The second part combines a bar chart for total sales with an overlaid line for average price, using a dual y-axis scale.

MManeesh Kumar

80% match

Loading thumbnail…

multiseries line chart

This multi-series line chart shows daily sales for Products A, B, and C over the first several months of 2025, with each product’s trend drawn as a separate colored line for comparison. A monetary annotation highlights the peak for Product A. A second chart uses a combo format, rendering daily advertising budget as gray bars and profit margin as a black monotone curve, with a dual y-axis for the two distinct scales. The code uses d3-based functions like `d3.timeParse`, `d3.scaleTime`, `d3.line` with `curveMonotoneX`, and `d3.axisBottom`, with data loaded from a CSV file via `d3.csv`. Both charts are rendered as SVG elements.

119h61a05c9@cvsr.ac.in

80% match

Loading thumbnail…

multi-series line chart

This multi-series line chart visualizes product attributes—Rating, NumReviews, and Price—across different product categories. Using the D3.js library, the code aggregates the dataset by category and plots three smoothed lines (via `d3.curveMonotoneX`) on a shared axis, with color encoding distinguishing each metric. The visualization also includes a combined bar and line chart below, comparing the first two numeric columns using dual y-axes. The SVG rendering leverages D3's `scaleBand`, `scaleLinear`, and `scaleOrdinal` APIs for layout and color mapping, with axis labels rotated for readability.

SSathviKankanala@my.unt.edu

79% match

Loading thumbnail…

ice

This combined chart displays e-commerce metrics across 150 days, with steelblue bars representing daily order counts on the left axis and a smooth red line tracking revenue in USD on the right axis. The visualization uses D3 v7’s `scaleBand` for the x-axis, dual `scaleLinear` axes, `axisLeft`, `axisRight`, and a Catmull-Rom curve via `d3.curveCatmullRom` for the revenue line. Data is loaded from a CSV using `d3.text` and `d3.csvParse`, which processes the raw text into a structured dataset for rendering as an SVG.

AAparna Desi Reddy

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

78% match

Loading thumbnail…

Multi-Series Chart by Mohith

This multi-series line chart displays Walmart's monthly Sales, Profit, and CustomerTraffic data from a CSV file, plotting each metric as a colored line over the months. The visualization uses hard-coded keys and colors to distinguish series, with all lines sharing a common linear y-scale. Built with D3 v7, the code loads the data via `d3.csv`, creates scales using `d3.scaleBand` and `d3.scaleLinear`, and renders the lines with `d3.line`. It also includes axes via `d3.axisBottom` and `d3.axisLeft`, plus a manual legend of colored rectangles and text labels.

Kkmohithkumar7@gmail.com

78% match