Combined Chart

Ssivaniammisetti2002@gmail.com

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.

81% match

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.

81% match

Kkarthikpavan1198@gmail.com

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`.

78% match

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.

78% match

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`.

Fork of D3 Starter barrr

This visualization displays a horizontal bar chart highlighting the top 10 days with the highest step counts from a 160-day fitness activity dataset. Each bar is colored with a distinct pastel hue and includes a numeric value label at its tip. Built with D3 v7, the code loads CSV data via `d3.csv`, sorts and filters the records, then uses `d3.scaleBand` and `d3.scaleLinear` to position bars and axes. The SVG render includes custom axis labels and a bold title.

Ssivaniammisetti2002@gmail.com

Fork of Fork of Hello HTML

This bar chart visualizes daily step counts over a 120-day period, with each bar representing one day and its height corresponding to the number of steps taken. The chart includes labeled axes for day and steps, plus a title, and uses axis ticks only for every tenth day to reduce clutter. The visualization loads CSV data via `d3.csv` from a GitHub gist, then uses `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis. Bars are drawn as SVG rectangles using D3 v7's data join, with axes generated by `d3.axisBottom` and `d3.axisLeft`.

StepCounter Tracker

This bar chart displays step counts recorded from an Apple device through the HealthKit API, spanning 2018 to 2020. The visualization maps daily step values along the x-axis and categorical year labels on the y-axis, with steel-blue bars sized proportionally to activity. The implementation uses d3.scaleLinear and d3.scaleBand for scaling, with d3.axisLeft and d3.axisBottom providing customized axes where domain lines and ticks are removed. Data is loaded via d3.csv and rendered as SVG rectangles within a pre-configured SVG canvas.

OOckiya Beinmonyu Daniel