Maneesh of multi charts

100%

Maneesh of multi charts

✓ Published0🌍 Public

Last edited Oct 20, 2025

Created on Oct 20, 2025

Two animated charts visualize annual sales trends from a CSV dataset aggregated by year. The first chart displays three overlaid lines for sales units (divided by 100), revenue, and profit margin, each with interactive tooltips. The second chart combines bars for sales units with a line for profit margin on a dual axis. Built with D3 v7, the visualization uses SVG rendering, `d3.rollups` for aggregation, and shared scales for alignment.

AI-generated description

MIT Licensed

Similar vizzes

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

81% match

Loading thumbnail…

multi charts

This example presents two SVG charts built with D3.js v7, both visualizing daily sales trends for three series (A, B, C) from `sales_trends.csv`. The top chart displays multi-series line plots, while the bottom combines bars for series A and B with an overlaid line for series C. The code uses `d3.csv` with `d3.autoType` for data loading, `d3.scaleTime` and `d3.scaleLinear` for axes, and renders interactive tooltips styled via CSS.

MManeesh Kumar

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

80% match

Loading thumbnail…

Fork of multi charts

This fork by balanikhil22 presents sales trends aggregated by year in two SVG charts. The first is a multi-series line chart comparing sales units (divided by 100), revenue in million USD, and profit margin percentage, each with a distinct color and a fixed-position tooltip. The second chart combines bars for sales units with a line for profit margin, sharing a common x-axis. The code utilizes D3 version 7's `d3.csv` for data loading, `d3.rollups` for aggregation, and `d3.scalePoint` and `d3.scaleLinear` for axes.

Ppasalabala22@gmail.com

79% match

Loading thumbnail…

LINE CHART

This line chart displays monthly revenue trends over time, with each data point marked by a circle and connected by a steelblue line. The visualization uses D3 v7’s `d3.scalePoint` for the categorical month axis, `d3.scaleLinear` for the revenue scale, and `d3.line` to generate the path. Data is loaded asynchronously from a CSV file via `d3.csv`, and rendered as SVG with axis labels and gridlines.

PP Manisha

77% match

Loading thumbnail…

Fork of Fork of D3 Starter

This visualization presents daily sales, revenue, and profit trends from a CSV dataset across two SVG charts. The first chart displays three overlaid time-series lines for each metric, with colored dots for each data point. The second combines bars for sales with a line for profit, using hover-triggered tooltips for interactivity. Built with D3 v7, it uses `d3.csv` for data loading, `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.line` for path generation. Gridlines, axis labels, and a legend support readability.

Ssainishanthreddyk@gmail.com

76% match

Loading thumbnail…

Fork of Fork of D3 Starter 3.1

This example presents two SVG charts built with D3.js v7 to visualize a multi-value time-series dataset containing daily sales, profit, and expenses. Chart 1 is a multi-series line chart with three colored lines and an interactive tooltip, while Chart 2 combines bars (sales) with an overlaid line (profit) on a shared axis. Both charts use `d3.csv`, `d3.scaleUtc`, `d3.scaleBand`, `d3.scaleLinear`, `d3.line`, and `d3.axisBottom`/`d3.axisLeft` for rendering. The data is loaded from a local CSV file.

Vvijaysaichigullapally1@gmail.com

76% match

Loading thumbnail…

Online sales Revenue yearwise

An interactive area chart displays total online sales revenue by year, with a smooth line and shaded region that highlight revenue trends over time. The visualization loads CSV data and parses dates using D3’s time parsing, then scales the axes with `scaleTime` and `scaleLinear`. It renders an SVG with an axis-left and axis-bottom, and generates the line and area paths using `line()` and `area()` with `curveBasis`. The styling, including gridlines and color, is applied via CSS.

MManideeprenikindi

76% match