Fork of D3 Starter

100%

Fork of D3 Starter

✓ Published0🌍 Public

Last edited Oct 20, 2025

Created on Oct 19, 2025

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.

AI-generated description

MIT Licensed

Similar vizzes

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

88% match

Loading thumbnail…

Fork of D3 Starter

This interactive chart displays three time series—valueA, valueB, and valueC—as connected scatterplots over time. It includes lines, points, end labels, and a clickable legend that toggles the opacity of each series via `transition().style("opacity")`. The visualization uses D3 v6, loading CSV data from a URL, and leverages `d3.scaleLinear`, `d3.line`, `d3.axisBottom`, `d3.axisLeft`, and `d3.schemeSet2` for scales, paths, axes, and colors. Each series is rendered as an SVG path with circles marking individual data points.

Cchriskrip

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

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

85% match

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a basic bar chart using D3 version 7, with data loaded from a CSV file containing yearly values. The visualization renders an SVG with a band scale for the x-axis and a linear scale for the y-axis, displaying bars for each year. The code uses `d3.csv` to asynchronously load the dataset, then applies `d3.axisBottom` and `d3.axisLeft` to generate labeled axes. The y-axis ticks are formatted with a dollar sign prefix, and bars are drawn as `rect` elements sized by the scales.

BBastien Golomer

85% match

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a connected scatterplot showing how a numeric value changes over time, with a time-scaled X axis and linear Y axis. The visualization renders as an SVG using D3 v7, loading CSV data from a remote GitHub repository. The code uses `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, and `d3.axisBottom`/`d3.axisLeft` to draw the line and circular points. It also uses `d3.timeParse` to format dates and `d3.csv` for asynchronous data loading.

CCrystal Lee

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

84% match

Loading thumbnail…

Fork of D3 Starter

This example creates a static bar chart visualizing food-related data from an external CSV file. It uses D3 v7 scales and axes—`d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`—to map years and values, with y-axis labels formatted as dollar amounts. The chart is drawn inside an SVG with a fixed margin, and the data is loaded asynchronously via `d3.csv`. Only the axes are rendered; no bars or other marks are added.

Mmavercikalvin

84% match