Skip to main content
SimilarExport ZIP
100%

Fork of Fork of D3 Starter 3.1

✓ Published0🌍 Public
Vvijaysaichigullapally1@gmail.com
Last edited Oct 19, 2025
Created on Oct 19, 2025

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.

AI-generated description
MIT Licensed

Similar vizzes

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

Fork of 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.

Ssainishanthreddyk@gmail.com
89% match
Loading thumbnail…

Fork of D3 Starter

This example presents two interactive charts built with D3 v7: a multi-series line chart tracking three quantitative variables over time, and a combined bar-and-line chart. The line chart uses `d3.line` to plot valueA, valueB, and valueC against year, while the bar chart draws valueA as rectangles via `d3.scaleBand` and overlays valueB as a line with a secondary `d3.scaleLinear`. Data is loaded asynchronously from a CSV file using `d3.csv`. The code also demonstrates axes, legends, and chart titles.

Mmaddulanagasanjana@gmail.com
88% match
Loading thumbnail…

Fork of multi charts

This example presents two SVG charts built with D3 v7, visualizing 180 days of daily sales data for three series (A, B, and C) from `sales_trends.csv`. The top chart is a multi-series line chart showing trends for all three series over time. The bottom chart combines bars for series A and B with a line for series C, using a dual-scale approach. The code relies on `d3.csv` for data loading, `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.axisBottom`/`d3.axisLeft` for rendering.

MManeesh Kumar
88% match
Loading thumbnail…

Fork of D3 Starter 3

This multi-series line chart shows the daily trends of sales, profit, and expenses over the first half of 2024, applying D3’s `scaleLinear` and `scaleUtc` to map the data. It renders three monotone curves via `d3.line()` and `d3.curveMonotoneX`, using ordinal colors for each series and displaying interactive tooltips on hover. The visualization includes rotated monthly axis ticks, a legend, and axis labels, all drawn as SVG elements.

Vvijaysaichigullapally1@gmail.com
86% 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
84% match
Loading thumbnail…

Fork of HTML Starter

This multi-series line chart displays three synthetic data streams—sales, profit, and expense—across 150 indexed points. The visualization uses D3 v7 to generate the data and render an SVG line chart with distinct colored lines for each series. The chart includes labeled axes for the index and value, a chart title, and a manual legend identifying each line. The code uses d3.range to create the data, and d3.scaleLinear, d3.line, d3.axisBottom, and d3.axisLeft to construct the visualization.

Ssaiabhishekmunnangi@gmail.com
83% match