Skip to main content
SimilarExport ZIP
100%

JS created regression line

✓ Published0🌍 Public
AAlexDaGr8
Last edited Jan 10, 2018
Created on Jun 4, 2017

This scatterplot visualizes a friend’s Zwift cycling workout, plotting power output against time, with each point representing a data sample from the ride. A bright red regression line cuts through the blue data points, revealing a slight upward trend as the ride progresses. The chart was rendered in SVG using D3 v4, with the regression line calculated and drawn via JavaScript.

AI-generated description

js created regression line of a friends Zwift ride.

Similar vizzes

Loading thumbnail…

Visualize Data with a Scatterplot Graph | fcc project-2

This scatterplot graphs 35 fastest times up Alpe d'Huez, with orange and blue circles distinguishing riders with and without doping allegations. The visualization uses d3.scaleLinear for both axes, parsing race times into Date objects for the y-axis. Built with React and d3.v7, it renders SVG circles that trigger an HTML tooltip on mouse hover, displaying rider details from the freeCodeCamp cyclist-data.json dataset. A legend clarifies the color coding for doping status.

MMohammed Banani | MbDev
69% match
Loading thumbnail…

Project Algernon - Dashboard V1

This dashboard visualizes indoor ride data from Project Algernon, displaying a line chart of power output in watts against time in minutes. A picker lets users switch between ride sessions, each sourced from JSON files. The visualization is built with React and rendered as an SVG using D3 v7, specifically leveraging `scaleLinear` for axes, the `line` shape for the path, and `curveCardinal` for smoothing. A custom linear gradient colors the stroke, while data smoothing via a rolling average is applied to the wattage values.

JJames Rhodes
67% match
Loading thumbnail…

Sessions Entrainement et courses

This visualization plots cycling workout sessions, showing power output in watts against elevation gain (dénivelé) for a rider's training data. Each circle’s radius represents the average speed, allowing viewers to compare performance across different climbs. It fetches JSON data from the Velobook API and renders it as an SVG scatterplot using D3 v5. The chart includes interactive hover tooltips that display the power, elevation, and speed for each workout. Axes are scaled linearly and labeled clearly, with grid lines and a title "MMP by Dénivelé" indicating maximal minute power relative to climbing difficulty.

PPatrick Dupuis
67% match
Loading thumbnail…

FCC Scatter Plot

This scatter plot visualizes cyclist performance data from the freeCodeCamp ProjectReferenceData repository, showing each rider’s year and race time in seconds. The D3.js v6 code loads the dataset with `d3.json`, maps years and times using `scaleTime` and `scaleLinear`, and renders circles with `selectAll` and `join`. Axes are generated via `axisLeft` and `axisBottom` on an SVG canvas that fills the window. Each dot carries `data-xvalue` and `data-yvalue` attributes for potential interactivity, though no tooltip or hover behavior is implemented.

Ddaria.daria
67% match
Loading thumbnail…

on me way

This line chart visualizes bicycle sales over time, with a black path connecting data points to show the trend. The plot uses D3 scales (`scaleTime`, `scaleLinear`) for axes and a React-based rendering pipeline with SVG output. Data is loaded as CSV from a gist and parsed with `d3.csv`. Axes are generated via custom React components, while the line path is drawn using the `d3.line` generator. Styling applies Poppins font and muted teal accents.

UUlbert Alain Odle
67% match
Loading thumbnail…

Scatter Plot with Color Legend

This example displays a scatter plot of cycling race data from the FreeCodeCamp ProjectReferenceData repository, plotting year on the x-axis and race time on the y-axis. The visualization uses D3 v5 scales and axes, with a time format for the y-axis and a linear scale for years. React 16.9 renders the interface, while D3’s `json` loads the dataset. The code includes both a React-based color legend component and circle marks, though the main chart uses D3’s append pattern within a single SVG.

Vvaynexie
66% match
Loading thumbnail…

Sessions Entrainement et courses

This visualization plots cycling power (in watts) against elevation gain, with each circle representing a training session or race and its size encoding average speed. Hovering over a point reveals exact values for power, elevation, and speed in a tooltip. The chart is built with D3 v5, using linear scales, axis generators, and data loaded from the Velobook API. SVG circles are rendered with opacity and a hover color change, while a custom tooltip element tracks the mouse position.

PPatrick Dupuis
66% match
Loading thumbnail…

Gist bb8fddc4a5fc3cc60c99

A line chart maps a small array of ten numbers to an SVG path, showing how the values fluctuate across a linear sequence. The visualization uses a red, unbroken polyline to emphasize the shape of the data, with the y-axis scaled from the data’s minimum to maximum and the x-axis evenly spaced by index. The code creates the chart using d3.scale.linear for both axes and d3.svg.line to generate the path, which is appended to an SVG container via d3.select and datum. The fixed width and height of 500 pixels define the plotting area, while the stroke and fill styles come from a CSS class.

CCaged
66% match