Skip to main content
SimilarExport ZIP
100%

Project Algernon - Loading Multiple Data Sources

✓ Published2🌍 Public
JJames Rhodes
Last edited Apr 15, 2022
Created on Apr 11, 2022

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.

AI-generated description

Example using Algernon's ride data

Algernon's data

MIT Licensed

Similar vizzes

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

Project Algernon

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.

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

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

Project Algernon - Fit Parser

This interactive visualization parses uploaded FIT files and displays the extracted fitness data. Built with React, it uses the fit-parser library to decode binary FIT file structures, including message definitions, record fields, and timestamp offsets. The parser handles various data types like date_time, uint16, strings, and byte arrays, converting them into readable values. The interface provides a simple file input for users to load and process their fitness tracking data, though the current implementation focuses on the parsing pipeline rather than visual output.

JJames Rhodes
68% match
Loading thumbnail…

Loading Data with React & D3

This example demonstrates loading and visualizing a CSV dataset of bike availability from a GitHub-hosted file in a React application. It shows a scatterplot of randomly positioned circles, where each circle represents the total number of bikes available for a given hour, with the radius scaled by the summed value. The code uses React hooks (`useState`, `useEffect`) to fetch the data with D3’s `csv` method and `d3.rollups` to aggregate the dataset by date-hour. The circles are rendered as SVG elements, with random opacity and positions, displaying the processed data directly.

MManon ROMAIN
68% match