Skip to main content
SimilarExport ZIP
100%

Fork of Project Algernon - Loading Multiple Data Sources

✓ Published0🌍 Public
CCoronaDock
Last edited Sep 24, 2022
Created on Sep 24, 2022

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.

AI-generated description

Example using Algernon's ride data

Algernon's data

MIT Licensed

Similar vizzes

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

Fork of Loading Data with React & D3

This example uses React and D3 to load a CSV of Velib bike-sharing data and aggregate it by hour using `d3.rollups` with a sum of `num_bikes_available`. It then renders a scatter plot of circles with positions and opacity randomized on each render, sized by the summed bike counts. The SVG dimensions are 960×500, and the data pulls from a GitHub-hosted CSV. The app shows a loading message until the CSV parses asynchronously via `d3.csv`, after which it maps each group to a circle.

RRoberto
74% match
Loading thumbnail…

Fork of HTML Starter

This visualization presents an interactive dashboard for exploring environmental sensor data. It renders a world map alongside line charts and a contour map, allowing users to select different sensor attributes from a dropdown menu. The code uses React with hooks, D3 scales and time parsing, and SVG rendering. Data is fetched from a local API endpoint, with brushed time ranges filtering the displayed temporal and spatial patterns.

CCheng Tang
73% match
Loading thumbnail…

Fork of Fork of HTML Starter

This interactive scatter plot visualizes wildlife data, mapping animal weight, altitude, population density, and temperature. The visualization cycles through different x-axis variables every second, allowing dynamic exploration of relationships between ecological metrics. Built with D3 v6, it uses scalable vector graphics (SVG) rendering with ordinal symbol scales to distinguish habitats, while circle sizes encode age-specific differences. The code implements reusable chart functions with configurable accessors, and animates transitions by updating scales and redrawing marks. Data originates from a CSV file loaded via D3’s CSV parser, with axes and symbols rendered using D3’s scale and shape generators.

NNandini Maddula
73% match
Loading thumbnail…

Fork of Amulya_kannam

This fork of Amulya_kannam combines a static scatterplot with an animated cycling of x-axis variables. SVG circles represent data points whose horizontal position shifts through four columns from a CSV file (`RideWidthCm`, `RoadWidthCm`, `RideLengthCm`, `RoadLengthCm`) on a timer, while the y-axis remains fixed on road length. A hardcoded legend maps categories (word-wrap, word-color, word-country) to fill colors. The example uses D3 v5 for SVG rendering and `setInterval` to trigger modal updates, alongside jQuery for DOM element selection.

Aamulyakannam
72% match
Loading thumbnail…

Fork of ic6: cost of bikes data

This fork of a D3.js bar chart displays the total sales cost for the top 15 bikes, drawn as green rectangles in an SVG. The React application loads CSV data from a GitHub gist and sorts it, using `d3.csv`, `scaleBand`, `scaleLinear`, and `max` for scaling. Axes are rendered manually with map functions, using blue tick lines and labels.

Kkarnisrikanth2212
72% match