Skip to main content
SimilarExport ZIP
100%

Fork as scatter plot

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

This scatter plot visualizes the relationship between daily step counts and calories burned, using a dataset loaded from a gist CSV. The chart, built with D3 v7, maps steps to the x-axis and calories to the y-axis via linear scales, rendering each data point as a small circle. It uses `d3.csv` to parse the data, `d3.scaleLinear` for axis scaling, and `d3.axisBottom` and `d3.axisLeft` to generate the axes, with a title and axis labels added as SVG text elements.

AI-generated description
MIT Licensed

Similar vizzes

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
82% match
Loading thumbnail…

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

Ssivaniammisetti2002@gmail.com
81% match
Loading thumbnail…

Fork of Fork of Cars Scatter Plot

This scatter plot visualizes walking steps taken each day in November, using red circles to map date against step count. The data comes from the UCI Machine Learning Repository's Auto MPG dataset. Built with D3 v5, the code uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to construct axes and scales. SVG circles are positioned via `attr('cx')` and `attr('cy')`, with axis labels and titles styled through CSS classes like `.axis-label` and `.title`.

KKinjal-Goyani
79% 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
77% match
Loading thumbnail…

Assignment6_Jaswanth_SP

This scatter plot visualizes the relationship between calories burned and steps taken, with each circle representing an individual user/week record and colored according to the user. The D3.js v7 code loads a fitness dataset from a raw GitHub CSV file, using `d3.csv` with `d3.autoType` to parse values. It applies `d3.scaleLinear` for both axes, `d3.scaleOrdinal` with `d3.schemeTableau10` for categorical colors, and renders the chart as SVG with `d3.axisBottom` and `d3.axisLeft` for axes.

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

Fork of Scatter Plot

This scatter plot visualizes the relationship between calorie content and price for food items, with each point colored by category using a categorical color scale. Built with D3 v6, the visualization renders as an SVG and loads data from a CSV file hosted on GitHub. The code defines linear scales for both axes, maps data values to circle positions, and applies the `d3.scaleOrdinal` color scheme with `d3.schemeCategory10` for category-based coloring.

Mmadipadiga.raviteja@gmail.com
77% match
Loading thumbnail…

Fork of HTML Starter

This fitness dashboard presents three coordinated D3.js (v7) charts built from CSV data. A reusable scatter plot maps workout minutes against calories burned, with point colors encoding intensity levels. The page also includes a pie chart showing total calorie distribution by intensity and a line chart tracking daily calorie trends. The implementation uses `d3.csv()` to load data, `d3.scaleLinear` and `d3.scaleOrdinal` for scales, `d3.axisBottom` for axes, `d3.pie()` and `d3.arc()` for the pie, all rendered as SVG elements.

Ddeepshikathakur111@gmail.com
76% match