Skip to main content
SimilarExport ZIP
100%

Project Algernon

✓ Published0🌍 Public
JJames Rhodes
Last edited Apr 21, 2022
Created on Apr 14, 2022

Project Algernon visualizes cycling rides by mapping GPS coordinates with D3's `geoPath` and `geoMercator` projection, alongside a time-series chart that plots power output in watts. The chart uses `scaleTime` and `scaleLinear` axes, with a moving average window selectable via dropdown (1s to 1h). A gradient-stroked line and interactive circles with tooltips show power over time, while the map displays the ride route. Data loads from JSON files via the `json` API, rendered as SVG within a React interface.

AI-generated description

Project Algernon

Mapping rides with watts over time

MIT Licensed

Similar vizzes

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

Project Algernon - Loading Multiple Data Sources

An interactive line chart displays a single indoor cycling ride's power output over time. A dropdown menu allows users to switch between ride data files loaded from a remote JSON repository. The visualization uses React and D3 to fetch and parse data, then renders the chart as an SVG. A gradient stroke and tooltip on each data point provide visual feedback based on the power value.

JJames Rhodes
88% match
Loading thumbnail…

Fork of Project Algernon - Loading Multiple Data Sources

This visualization displays indoor cycling ride data as a line chart, plotting power output in watts over time with SVG paths and interactive dropdown selection. The React app loads ride metadata and JSON data via D3’s `json` function, then renders axes using `scaleLinear` and a gradient-stroked `line` path. A dropdown menu, powered by `react-dropdown`, lets users switch between multiple ride files.

CCoronaDock
84% match
Loading thumbnail…

Project Algernon - Drawing a map

A choropleth-style map of China rendered with React and D3.v7 draws each land feature as an SVG path, filled with a solid green hue. Using a GeoJSON topology from a GitHub-hosted file, the code relies on `d3.geoMercator` for projection, `d3.geoPath` for converting features to path data, and `topojson.feature` to transform the topology. The map is scaled and translated to fit the 960-by-500 viewport, displaying the country's shape without additional styling.

JJames Rhodes
75% 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
70% match
Loading thumbnail…

Bike

This interactive visualization displays bike ride data as an arc diagram, with each arc representing a ride type. Users can filter the data by year and membership type using dropdown menus, which updates the visualization dynamically. The chart is built using Vega-Lite API within a React framework, with Vega and Vega-Lite handling the rendering. Data is loaded from a CSV file using D3’s `csv` function, and the visualization computes quantitative theta values from the ride type field, encoding color by the same nominal attribute.

SSamir Nandardhane
69% 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
68% match
Loading thumbnail…

D3 test

This example visualizes a historical route from a GeoJSON file, displaying daily segments as dashed black polylines over a light blue graticule-filled map. The code uses D3 v5 with an SVG rendering approach and a Mercator projection configured via `d3.geoMercator()`. It loads coastline and route data with `d3.json()`, then binds the features to SVG paths using `d3.geoPath()`. The graticule is generated with `d3.geoGraticule()`. The visualization clearly shows the path’s progression across the mapped region, with each day’s travel distinguished by styling properties like stroke dasharray.

MMarin Govorcin
68% match