Skip to main content
SimilarExport ZIP
100%

Project Algernon - Dashboard V1

✓ Published0🌍 Public
JJames Rhodes
Last edited Apr 18, 2022
Created on Apr 16, 2022

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.

AI-generated description

Example using Algernon's ride data

Algernon's data

MIT Licensed

Similar vizzes

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

Dashboard ES6

A dashboard with KPI cards and an animated multi-line chart, rendered in SVG with D3 v5. Users filter KPIs and select projects from dropdowns, triggering updates to the card displays and the line series (planned, earned, and actual values). The chart uses D3 scales, axes, and transitions, with a legend, and Bootstrap styles the interface, while Font Awesome provides icons.

Mmaxime-plantard
69% match
Loading thumbnail…

on me way

This line chart visualizes bicycle sales over time, with a black path connecting data points to show the trend. The plot uses D3 scales (`scaleTime`, `scaleLinear`) for axes and a React-based rendering pipeline with SVG output. Data is loaded as CSV from a gist and parsed with `d3.csv`. Axes are generated via custom React components, while the line path is drawn using the `d3.line` generator. Styling applies Poppins font and muted teal accents.

UUlbert Alain Odle
68% match