Skip to main content
SimilarExport ZIP
100%

Multi Line Plot

✓ Published0🌍 Public
Ssivaniammisetti2002@gmail.com
Last edited Mar 9, 2026
Created on Mar 9, 2026

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

multi line

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.

Kkanaparthieshitha@gmail.com
90% 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
81% 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
81% 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
79% match
Loading thumbnail…

Scatter Chart HTML

This scatter plot visualizes the relationship between daily steps and calories burned over a 120-day period. The visualization uses a card-based layout with an SVG canvas, plotting each day as a circle positioned by linear scales for both variables. The chart loads data from a remote CSV file using `d3.csv`, then maps the parsed numeric fields to x and y coordinates. It employs `d3.scaleLinear` with `d3.extent` and `.nice()` for axis scaling, and renders the points as SVG circles with a radius of 4 pixels. Axis labels and a chart title are added as SVG text elements, with the bottom x-axis and left y-axis generated through `d3.axisBottom` and `d3.axisLeft`.

Ssivaniammisetti2002@gmail.com
78% match
Loading thumbnail…

Line Chart

This line chart visualizes the average calories burned by age, using data from a lifestyle CSV file. The code aggregates individual records by age and calculates the mean calories burned, then plots the resulting trend as a smooth, steel-blue line. Built with D3 v7, it employs `d3.csv` and `d3.autoType` for data loading, `d3.rollup` for aggregation, and `d3.scaleLinear` for axes. The SVG rendering uses `d3.axisBottom` and `d3.axisLeft` for ticks, and a `d3.line` path for the trend, with custom labels for both axes and the title.

SSathviKankanala@my.unt.edu
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
78% match
Loading thumbnail…

Gist a47a4a5c5f7039022881d0b2dc84a1d6

The visualization tracks a month of daily running activity, plotting each day’s distance, time, and heart rate as a dual-axis scatterplot with a connected line. It shows how distance and time peak on high-mileage days while resting heart rate dips, with zero-distance rest days marked as gaps. Built using d3.scaleLinear for axes, d3.line for the path, and d3.axisBottom/axisLeft for gridlines, the chart reads from the CSV data via d3.csv. Points are rendered with d3.point circles, and the y-axis encodes time, while the x-axis uses a time scale for dates.

FFrank515
77% match