Clickable Tooltip

100%

Clickable Tooltip

✓ Published0🌍 Public

Last edited Feb 4, 2024

Created on Feb 4, 2024

This interactive scatter plot visualizes doping allegations in professional bike racing from 1994 to 2015, plotting race times against years. Built with D3 v7, it fetches cyclist data from a Free Code Camp GitHub repository and renders SVG circles with jitter to reduce overplotting. Hovering reveals a clickable tooltip with rider details and source links, while color-coded dots and a legend distinguish riders with and without doping allegations. Tooltip transitions use D3’s `.transition()` for smooth fade-in/out effects.

AI-generated description

This is one of my projects working towards the Free Code Camp Data Visualization Certificate

In this project you can hover over a datum to reveal a tooltip. You are then able to navigate to the link in the tooltip.

MIT Licensed

Similar vizzes

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

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

88% match

Loading thumbnail…

Doping In Cycling, ICE-7

This scatter plot visualizes doping in professional bicycle racing, showing each rider’s finish time against the race year, with circles colored by whether doping allegations exist. It uses D3 v5 with SVG rendering, employing `d3.scaleLinear` for axes, `d3.scaleOrdinal` and `schemeCategory10` for color encoding, and a custom tooltip on mouseover. Data comes from a CSV loaded via `d3.csv`, with times parsed into date objects using `d3.timeFormat`. Axis ticks include gridlines, and a legend distinguishes allegations from clean riders.

HHarshinireddyy19

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

84% match

Loading thumbnail…

fcc-d3-02

This example visualizes doping allegations among the 35 fastest recorded times up Alpe d’Huez, plotting each cyclist’s year against their finishing time. Blue and red dots distinguish riders without and with doping allegations, with a legend and axis labels. The interactive tooltip reveals the rider’s name, nationality, year, time, and doping details on hover. Built with React and D3 v7, it uses `scaleLinear`, `scaleOrdinal`, and `extent` to map data from a freeCodeCamp JSON source, rendering SVG circles and handling mouse events via `select` and `append`.

SSiddharthMittal07

84% match

Loading thumbnail…

Scatter Plot with Color Legend

This scatter plot visualizes 35 fastest times up Alpe d'Huez in professional bicycle racing, plotting year against race time in minutes and coloring each dot to indicate whether the rider faced doping allegations. The chart uses d3.scaleLinear for the x-axis, d3.scaleTime for the y-axis, and d3.scaleOrdinal with d3.schemeCategory10 for color encoding. An interactive tooltip displays rider details, nationality, year, time, and doping information on hover. The visualization renders as SVG, using React 16 and D3 v5 to load data from a JSON file and generate axes with d3.axisBottom and d3.axisLeft.

Vvaynexie

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

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

70% match