Skip to main content
SimilarExport ZIP
100%

Fork of D3 Starter

✓ Published1🌍 Public
Ssainishanthreddyk@gmail.com
Last edited Oct 20, 2025
Created on Oct 20, 2025
Forked from D3 Starter

This example displays sales, revenue, and profit trends from a CSV file using two D3.js v7 charts: a multi-series line chart and a combined bar-and-line chart. It uses `d3.csv`, `d3.scaleTime`, `d3.line`, and `d3.axisBottom` for data loading, scaling, and rendering, with tooltips via `d3.select` and a Poppins font for typography.

AI-generated description

Sales, Revenue & Profit Trends Visualization

This project visualizes sales trends using D3.js with two interactive charts:

  1. Multi-series line chart showing Sales, Revenue, and Profit over time
  2. Combined bar and line chart showing Sales (bars) and Profit (line)

Features

  • Interactive tooltips on data points
  • Gridlines for better readability
  • Custom color scheme
  • Legend for data series identification
  • Annotation marking peak profit point
  • Responsive design with smooth transitions

Data

Data is sourced from trend.csv containing daily metrics from January to February 2025.

Customization Elements

  • Custom color palette for each metric
  • Interactive hover effects on bars and data points
  • Gridlines for better data reading
  • Peak profit annotation with dashed line
  • Tooltip functionality for detailed data inspection
  • Custom font (Poppins) for improved typography
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Fork of D3 Starter

This visualization analyzes daily sales, revenue, and profit trends using two D3.js v7 SVG charts. A multi-series line chart displays all three metrics over time, while a combined chart overlays sales as bars with a profit line, both featuring custom tooltips and a styled interface using the Poppins font. The code loads CSV data via `d3.csv`, constructs scales with `d3.scaleTime` and `d3.scaleLinear`, and renders paths and bars with `d3.line` and `d3.axisBottom`, applying color-coded series and gridlines for readability.

Ssainishanthreddyk@gmail.com
93% 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
92% match
Loading thumbnail…

Fork of D3 Starter

This visualization combines a bar chart and line chart to show sales, profit, and expenses over time. The chart displays orange, semi-transparent bars for sales alongside blue, green, and red lines for sales, profit, and expenses, respectively. It uses d3.csv to load data from an external GitHub-hosted CSV file. The SVG rendering relies on d3.scalePoint, d3.scaleLinear, and d3.line to map the categorical months and numeric amounts, with d3.axisBottom and d3.axisLeft for axes and additional gridlines.

Ccsesomarajuaswini@gmail.com
89% 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
89% match
Loading thumbnail…

Fork of D3 Starter

This example shows a multi-series line chart comparing Sales, Profit, and Expenses across a 150-sample dataset, with each metric drawn as a distinct colored path (steelblue, green, and orange) over a light gray grid. It is built using React and D3 v7, using `d3.csv` to load the data and `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.line` for scales, axes, and path generation. The SVG chart includes labels, a legend, and is rendered with a fixed width and height.

AAriful Hasan
89% match
Loading thumbnail…

Fork of D3 Starter

This example shows monthly sales trends with a smooth monotone line chart, rendered as an SVG with animated tooltip interactions. It loads data from a CSV via `d3.csv`, maps months to a point scale and sales values to a linear scale, then draws the line using `d3.line` with `curveMonotoneX`. Circles mark each data point, and hover events trigger a tooltip that displays month and sales values. Axis labels and axes are added with `d3.axisBottom` and `d3.axisLeft`.

Kkmuddana@gitam.in
88% match
Loading thumbnail…

Fork of Fork of D3 Starter

This example displays a multi-series line chart using a dataset of 150 samples, plotting three quantitative variables—Sales, Profit, and Expenses—against a sequential Sample number. It builds the visualization with React and D3 v7, using `d3.csv` to fetch remote data and `d3.scaleLinear` for axes. The SVG rendering uses `d3.line` generators to create three separate polylines, each with a distinct stroke color, and includes y-axis gridlines, axis labels, a title, and a legend. The React integration is minimal, relying on `d3.select('#root').append('svg')` to attach the chart directly to the DOM root.

TTony Mai
87% match
Loading thumbnail…

Fork of D3 Starter

This example shows monthly Sales, Profit, and Expenses for a company from 2013 to 2015, combining translucent blue bars for sales with colored lines for each metric. The visualization uses D3 v7 to load CSV data, with `d3.scaleBand` and `d3.scaleLinear` for axes, `d3.line` for the line paths, and `d3.axisBottom` and `d3.axisLeft` for ticks. A hover tooltip and a color-coded legend support interpretation of the multi-series data.

Ddeepthinaidu2001@gmail.com
86% match