2016 race plan for Rob

100%

2016 race plan for Rob

✓ Published0🌍 Public

Last edited Jan 26, 2016

Created on Nov 17, 2015

This sample visualizes the 2016 race season for an individual cyclist, plotting events such as Circuit Races, Road Races, Time Trials, and Criteriums on a timeline. The data, sourced from a plain-text Markdown file, is parsed to extract event dates, names, and attributes like priority and duration. The visualization uses a custom-built calendar-grid layout to display each month, with individual race markers color-coded by event category and labeled with their specific discipline. The code relies on a custom JavaScript parser and DOM manipulation for rendering, without external charting libraries.

AI-generated description

Similar vizzes

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

62% match

Loading thumbnail…

fCC D3 Project #2: Scatterplot Graph

This scatterplot visualizes the performance of professional cyclists, plotting race times against years. The time to complete the course is mapped on the y-axis using a time scale, while the x-axis uses a linear scale for the year. The graph distinguishes between riders with doping allegations in blue and those without in red, and includes a legend for clarity. Data is fetched from the freeCodeCamp cyclist-data.json. The visualization is built with D3.js (version 7.9.0), using the `scaleTime` and `scaleLinear` APIs, and renders an SVG with tooltips that display rider details on hover.

CCasualWanderer20XX

61% match

Loading thumbnail…

Scatter Plot

This scatter plot visualizes doping allegations in professional bicycle racing, plotting race times (in minutes) against years for individual riders. Each circle represents a rider, color-coded to distinguish those with doping allegations from those without, with a legend clarifying the categories. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear` for the x-axis, `scaleTime` for time-based y-values, and `scaleOrdinal` with `schemeCategory10` for colors. Interactive tooltips appear on mouseover, showing rider details using D3 events. Data comes from freeCodeCamp’s cyclist-data.json dataset, with parsed time strings converted to Date objects for accurate axis formatting.

VVansh1019

60% match

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

59% match

Loading thumbnail…

Doping in Professional Bicycle Racing

This scatter plot visualizes doping allegations in professional bicycle racing, with each circle representing a rider’s race time (y-axis) plotted against the year (x-axis). The color distinguishes riders with doping allegations from those without, and a tooltip reveals the rider’s name, nationality, year, time, and doping details on hover. Built with D3 v5, it uses `scaleLinear` for axes, `axisBottom` and `axisLeft` for ticks, `scaleOrdinal` with `schemeCategory10` for colors, and `timeFormat` for time labels. Data comes from a FreeCodeCamp JSON file, rendered as SVG with a custom legend and tooltip.

Vvaynexie

59% match

Loading thumbnail…

Run a race in every town in Connecticut: "elusive" races

This visualization shows the number of Run169-qualifying races in Connecticut for each month of 2017, highlighting "elusive" races from towns with two or fewer races. It uses d3.v4 with SVG rendering, employing `d3.scaleLinear`, `d3.scaleBand`, and `d3.csv` to load and map data. Bars are colored by past, current, or future months, with hover tooltips revealing race dates and towns. The data comes from debticonn.org, and the layout is styled with Roboto font and a clean, grid-free design.

EEndNight95

59% match

Loading thumbnail…

My Formula 1 Championship Standings

This chart visualizes Formula 1 championship standings across a season, tracking each driver’s rank over successive races using colorful connected line paths. The data comes from a Google Sheets feed, with race positions converted to points and ranks recalculated after each round. The code uses d3.json to load the data, d3.scaleBand for both axes, and d3.line to draw the paths. A rainbow color scale differentiates drivers, while SVG axes with tick marks highlight race names and rank positions.

AAlexDaGr8

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

59% match