Skip to main content
SimilarExport ZIP
100%

multi line

✓ Published1🌍 Public
Kkanaparthieshitha@gmail.com
Last edited Mar 8, 2026
Created on Mar 8, 2026
Forked from D3 Starter

This multi-series line chart displays fitness activity trends over 160 days, comparing steps count, calories burned, and workout minutes on a single scaled y-axis. Built with D3.js v7, the visualization renders three distinct colored lines—purple, blue, and green—from a CSV dataset, with data points filtered to every tenth day for clarity. The SVG output includes axis labels, a legend, and gridlines, using D3's linear scales and line generators. Steps and workout minutes are normalized to align with calorie values.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Multi Line Plot

This multi-line chart visualizes daily fitness trends—steps, calories burned, and average heart rate—over a 150-day period. The data is loaded from a CSV via `d3.csv` and rendered as three overlaid lines, each scaled to a common y-axis using fixed multipliers. The visualization uses D3 v7's `scaleLinear`, `axisBottom`, `axisLeft`, and `line` generators, with an SVG grid and legend, to compare the metrics' daily evolution.

Ssivaniammisetti2002@gmail.com
90% match
Loading thumbnail…

ice 6 multi line

This visualization combines a bar chart of daily step counts with a line chart of calories burned over a 160-day fitness activity period. The bars, rendered as SVG rectangles with alternating purple shades, show steps on the left y-axis, while the green line with labeled points tracks calories on the right y-axis. The code uses D3 v7 with `scaleBand` for the x-axis, `scaleLinear` for both y-axes, and a `d3.line` generator to connect data points sampled every tenth day from the CSV dataset.

Kkanaparthieshitha@gmail.com
84% match
Loading thumbnail…

ice 6

This visualization shows the relationship between daily step ranges and workout intensity levels, with dot color indicating whether calories burned are high or low. The chart uses a categorical scatter plot layout, mapping 160 days of fitness activity data from a CSV file. It filters to unique combinations of step range, workout level, and calorie level for clarity. The D3.js v7 code uses `d3.scalePoint` for both axes, `d3.scaleOrdinal` for coloring, and SVG circles rendered with `d3.axisBottom` and `d3.axisLeft`.

Kkanaparthieshitha@gmail.com
78% match
Loading thumbnail…

Fork of React & D3 Starter

This visualization combines bars and lines to compare daily fitness metrics—calories burned, steps walked, and active minutes—across 150 days. It shows all three trends on a single SVG chart, with steps scaled down to fit the axis. The code uses D3 v7 APIs such as `scaleBand`, `scaleLinear`, `axisLeft`, and `d3.line` to render the chart, while React handles the page setup. Data comes from a CSV file loaded via `d3.csv`, and the rendering uses SVG elements like `rect` and `path`.

Kkarthikpavan1198@gmail.com
78% match
Loading thumbnail…

Multi Line Chart

This multi-line chart displays three data series (A, B, C) over a two-week period in July–August 2019, plotting daily measurement values. Each series is rendered as a distinct colored path with different dash patterns, accompanied by end-of-line labels. The visualization uses D3 v5 with an SVG viewBox for responsive scaling, d3.scaleTime and d3.scaleLinear for axes, d3.line with default curve interpolation for paths, and d3.axisLeft/axisBottom for gridlines. Data comes from an inline CSV file.

Nneetusingla12(Neetu Singla)
78% match
Loading thumbnail…

Combined Chart

This combined chart displays daily steps, calories burned, and heart rate data for a fitness tracking scenario. Bars show raw step counts, while a red line represents calories burned and a green line shows heart rate, using separate scaling factors to align these different magnitudes on a shared axis. The visualization is built with the D3.js v7 library using a CSV dataset loaded from a GitHub gist. It combines an SVG bar chart with two line charts, utilizing D3’s scaleBand, scaleLinear, axis, and line generators to render the layered graphic.

Ssivaniammisetti2002@gmail.com
78% match
Loading thumbnail…

Fork of React & D3 Starter

This example visualizes daily fitness activity trends over 150 days, comparing steps walked, calories burned, and active minutes as multi-line charts within a single SVG. Using React 19 and D3 v7, it parses CSV data with `d3.csv`, scales values with `d3.scaleLinear`, generates paths with `d3.line`, and renders `d3.axisBottom` and `d3.axisLeft` axes. The visualization includes a title, legend, and styled background, with active minutes scaled 100x for visibility.

Kkarthikpavan1198@gmail.com
76% match
Loading thumbnail…

multi series line chart

This multi-series line chart visualizes daily weather trends for temperature, humidity, and pressure over a 200-day synthetic period. Three colored lines display the temporal patterns of each variable, accompanied by axes, gridlines, and a legend. The example uses D3 v7 APIs including `d3.line`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`, rendering SVG paths within a React component. The code generates randomized sinusoidal data, demonstrating how multiple time series can be overlaid with distinct stroke colors and compared on a shared value scale.

Ssairathan.p045@gmail.com
75% match