Bay Area Climb Effort Explorer

Scatter Plot of Bike Locations with D3

A scatter plot maps the latitude and longitude of Bay Area bike stations from a 2013 CSV dataset, with each orange circle positioned by its coordinates. The visualization uses d3.csv to load the data, then d3.scaleLinear to map longitude and latitude to SVG canvas positions, while d3.axisBottom and d3.axisLeft generate the axes. Titles for longitude and latitude labels and a heading are added as SVG text elements.

70% match

Scatterplot with a Qualitative Color Scale Using D3

This scatterplot displays bike stations in the Bay Area for 2013, plotting longitude on the x-axis and latitude on the y-axis. Each station is colored by city using a qualitative scale, d3.scaleOrdinal, with d3.schemeTableau10, while a D3 legend (d3.legendColor) shows location categories. The visualization uses D3 v7 to render SVG axes and circles, with data loaded from a remote CSV file.

68% match

Bubble Chart with Tooltips Using D3

This bubble chart uses D3 v7 to visualize bike station locations in the Bay Area, mapping latitude and longitude to axes, dock counts to bubble size, and cities to categorical colors from `d3.scaleOrdinal`. A legend, built with the d3-legend library, identifies city colors. Interactive tooltips, styled via CSS and positioned with mouse events, display the total bike count and city name for each aggregated data point. The chart renders as SVG and loads data from a remote CSV using `d3.csv`.

Untitled

This visualization shows a climbing career timeline as a grid of colored tiles, with each tile representing a single redpoint, flash, or onsite ascent. Grades are listed along the left axis, and the tiles are arranged chronologically within each grade band. A dropdown menu filters the display by climbing angle, such as overhang or slab. The code uses d3.csv to load ascent data, d3.group to organize routes by difficulty, and D3’s selection and data-join methods to append SVG rectangles and text labels.

AAdam Kirosingh

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

Interactive Visulization

This interactive visualization shows the number of bike rides, broken down by rideable type, filtered by user type (casual or member), quarter, and year. The chart updates dynamically, rendering a horizontal bar chart for each selected combination. Built with React and D3 v5, it uses `scaleBand` and `scaleLinear` to map the categorical and quantitative axes, and renders the bars as SVG `<rect>` elements within a `<g>` transform. A `<title>` element provides tooltips on each bar, while the data is loaded from a CSV file.

SSamir Nandardhane

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

66% match

Bubble Chart with D3 without Tooltips/Legend

This bubble chart displays the locations of bike stations in the Bay Area, with circles sized by dock count and colored by city. The visualization aggregates station data from a CSV file by city, plotting averaged longitude and latitude coordinates. Using D3 v7, the code employs scaleLinear functions for the x, y, and radius mappings, scaleOrdinal for categorical colors, and standard axis generators. Dashed lines and inline labels identify each city with its total dock count, while SVG text elements provide axis titles and chart headings.