Fitness Data Line Chart

100%

Fitness Data Line Chart

✓ Published1🌍 Public

Last edited Apr 2, 2025

Created on Apr 2, 2025

This line chart shows the average mental wellbeing score across five age groups, from 18–25 to 56+, based on data loaded from a remote CSV file. The visualization uses d3.csv to parse the dataset, then computes group means with d3.mean. A d3.scalePoint maps age groups along the x-axis, while a d3.scaleLinear encodes wellbeing scores on the y-axis. The chart renders an SVG line and circle markers using d3.line, with axes generated via d3.axisBottom and d3.axisLeft.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fitness Data Reusable Scatter Plot

This reusable scatter plot visualizes fitness tracking data, plotting relationships between calorie intake, protein intake, and mental wellbeing scores from a CSV dataset. The chart uses D3 v7 to render SVG circles with configurable axes, margins, and data accessor functions. The code demonstrates a modular chart factory pattern with setters for width, height, and value fields, allowing users to easily swap which metrics appear on each axis. Axis labels update dynamically based on the selected fields, while steelblue semi-transparent points highlight distribution patterns without animation.

Ssanthoshdachepally333@gmail.com

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

76% match

Loading thumbnail…

D3 - Line chart (multiple)

This example displays multiple line charts on a single SVG canvas, tracking the average human wellness index for four countries (India, Sri Lanka, Vietnam, Cambodia) from 2010 to 2019. It first establishes linear scales for time and wellness values, then uses d3.line with path elements to draw each country’s trend, colored via an ordinal scale. The code employs d3.axisBottom and d3.axisLeft for axes, plus the d3-legend library’s legendColor for a horizontal ordinal legend. Data is loaded from a remote CSV using d3.csv, with parsing and flattening for the y-domain.

CChandana Srinivas

74% match

Loading thumbnail…

line Chart

This line chart visualizes the relationship between age and the mean diabetes outcome, revealing how the average outcome varies across different ages. The data comes from a diabetes dataset loaded via `d3.csv` and processed with `d3.rollup` to calculate mean outcomes per age group. The visualization uses D3 v7’s `scaleLinear`, `axisBottom`, `axisLeft`, and `line` APIs within a React-compatible SVG rendering, styled with the Poppins font on a teal background. The chart includes rotated x-axis labels and axis titles for clarity.

Vvedasrivarma13@gmail.com

73% match

Loading thumbnail…

Area chart

This area chart displays the relationship between age and weight, using a dataset loaded from a raw CSV file hosted on GitHub. The data is parsed, sorted by age, and rendered as a filled area plot within an SVG canvas. The visualization is built with D3.js v7, employing `d3.text` to fetch the data, `d3.scaleLinear` for axis scaling, `d3.area` to generate the area path, and `d3.axisBottom` and `d3.axisLeft` for labeled axes, with a steelblue fill and a clear title.

JJagadeshwar Reddy. Chilakamarri

72% match

Loading thumbnail…

How fit do you feel?

This chart uses a grouped bar chart to show how people’s self-rated fitness level relates to their exercise frequency. Each bar’s height represents the number of survey respondents, with bar groups split by perceived health and colored by how often they exercise. Built with the Vega-Lite API and d3.csv for loading, the visualization reads fitness survey data from a Kaggle-hosted CSV, then renders interactive tooltips via vega-tooltip. The code applies custom axis and label styling from a config object to improve readability.

AArjun Rao

71% match

Loading thumbnail…

Fitness Data Area Chart

This area chart displays the total workout duration for each fitness goal, aggregated from a cleaned CSV dataset. The visualization uses D3.js v7 to load the data, compute sums with `d3.rollup`, and render a smooth monotone area path. A point scale positions goals along the x-axis, while a linear scale maps total durations to the y-axis, with axes and labels generated via `d3.axisBottom` and `d3.axisLeft`. The SVG output features a teal filled area, styled with a white background and minimal margins.

Ssanthoshdachepally333@gmail.com

71% match

Loading thumbnail…

BMI by Age

This bar chart displays the average body mass index (BMI) across different ages from a CSV dataset, with age on the x-axis and average BMI on the y-axis. The code uses d3.csv to load data, d3.bin to group ages into bins, and d3.scaleLinear, d3.axisBottom, and d3.axisLeft to render the axes. The chart is drawn as SVG rectangles with a light blue fill, and the BMI is calculated from weight and height fields using the formula (weight/height²)*703.

Cchsaisriharsha@gmail.com

71% match