Tell us what works and what could be better. We read every submission.
@alanmclean·18 public vizzes
A single SVG arc animates from zero to a full circle over one second, visually representing progress toward a goal. The code first draws a complete gray background ring, then overlays a black arc whose end angle transitions from 0 to 2π using `d3.svg.arc` and `transition.attrTween` with `d3.interpolate`. When the arc reaches full completion, a CSS transition changes its fill to orange via the `complete` class. The example uses D3 v3 and relies on SVG path rendering.
This example shows how to fetch and format athletic activity streams from the Strava API, mapping one stream type against another (such as heart rate against distance). The visualization relies on a custom `streamLoader` object built with Backbone.Events and Underscore, which constructs a JSONP request to the Strava v3 API using the provided access token. On success, it parses the returned stream arrays, pairs the x and y values into individual data points, and triggers a ready event with the formatted dataset. The code uses jQuery’s `ajax` method for the JSONP call and demonstrates a reusable pattern for loading and preparing streaming activity data.
This visualization displays daily blood glucose readings as multi-line time series, with each day’s measurements plotted against the time of day. A shaded horizontal band marks the target glucose range, while the most recent day’s line and points are highlighted in red. The code loads CSV data from a Google Spreadsheet via `d3.csv`, nests records by date using `d3.nest`, and renders SVG paths with `d3.svg.line` and cardinal interpolation. Circles mark individual glucose samples, and a dropdown menu populated by dates filters the highlighted series.
The visualization displays glucose measurements over time as white line paths and circular sample points, with one day highlighted in red via the currentDate class. It uses d3.csv to load Google Spreadsheet data, d3.nest to group records by date, and d3.scale.linear with d3.svg.line and cardinal interpolation to render each day’s trend across a 24-hour time axis. A dropdown menu, populated with unique dates, lets users switch the highlighted day. The SVG chart adapts to window size using jQuery width calculations, with axes and styling defined through CSS classes.
This visualization shows a sparse matrix of “did not trace” errors generated by a Ruby script after running `rake db:migrate` with an AWS S3 gem. It renders each error message as a thin horizontal band, with the textual message encoded as a dark strip against a light background. The layout uses a stacked row-per-line approach, where the y-axis positions correspond to the order of errors and the x-axis encodes character positions. The code relies on a custom drawing routine that iterates over the text file, using a monospaced font grid to plot individual characters as filled rectangles, creating a compact, scannable log overview.
The visualization shows a failure log from a Rails controller spec, mapping a routing error to a visual representation. It plots the failing test case, highlighting the mismatch between the attempted `put` action and the missing route for `athlete_running_races`. The rendering uses `d3.forceSimulation` to position error nodes, with data sourced from the gist’s text output. The code names the controller, action, and spec line, visually encoding the routing failure as a distinct node in the simulation, though no explicit data parsing or layout logic is shown beyond the raw error string.
This visualization compares the percentage change in stock prices of Airbus and Boeing from 2000 to 2013. It uses D3 v3 with SVG and animation to render two line charts of the monthly returns for each company. The data, loaded from a tab-separated file, is plotted with separate colored lines for Airbus and Boeing, with hover or animation highlighting the differences over time.
A GPS track of a run in Jotunheimen, Norway, is rendered as a single continuous line floating in 3D space using Three.js. The code loads an XML activity file and extracts trackpoints, mapping latitude and longitude coordinates through a D3 transverse Mercator projection into Three.js vector positions, while altitude values are ignored in favor of a fixed z-coordinate. The line is drawn with `THREE.Line` and `LineBasicMaterial`, and the scene uses an ambient light and a perspective camera for a static WebGL view.
This example shows a simple bar chart where each bar links to the D3.js website and changes color when a button is clicked. The chart is rendered with SVG, using d3.tsv to load data from a tab-separated file and d3.scale.linear to map values to bar widths. The color transition relies on CSS `transition` and the `classed` method to toggle a `.new-color` class on all rectangles. The README notes that this fill transition fails in Chrome when the target rect is inside an `<a>` tag with `xlink:href`.
This example demonstrates aspect ratio banking, a technique that adjusts the width-to-height ratio of a chart to make line slopes average around 45 degrees for optimal visual perception. The code implements an `AspectRatioBanker` function that computes this ratio using either the average absolute angle or median absolute slope methods, then applies Newton-Raphson iteration to solve for the optimal value. It uses Underscore.js utilities for data operations and accepts custom x and y scales, with an `adjustToAxes` method that currently lacks a functional implementation for final axis adjustment. The visualization shows how different banking algorithms calculate and refine aspect ratios for line chart data.
This example demonstrates a Ruby helper method that converts month-level time intervals into an array of associated week intervals. The code shows how the `get_weeks` method takes a hash containing a year, month, and an array of week strings, then returns an array where each week maps back to the original month metadata. It uses RSpec’s `context`, `let`, and `it` blocks to test the expected output, verifying that four weeks in October 2013 correctly associate with the same month interval. The visualization relies on this data structure to support time-series rendering.
This example presents a bookmarklet that adds a color-picker interface to Strava’s Run training page, allowing users to change the color of individual data points directly in the training log. The bookmarklet works by injecting a JavaScript-based picker into the page, which is invoked through a simple `javascript:` URL link saved to the bookmarks bar. The code relies on the page’s existing DOM and styling, using standard browser APIs to locate and modify the plotted points, and is configured specifically for the Run page, though the author notes it can be adapted for other pages. The data rendered are the user’s own training-log entries, and no external visualization libraries are used.
A weekly run-tracking dashboard visualizes a runner's activities aggregated by ISO week in 2013, using JSON data from a gist. Each week displays nested activity details—name, start date, moving time, distance, speed, and elevation gain—in a structured list format. The visualization is rendered as an interactive SVG animation, built with D3.v3 and enhanced by a jQuery-based "fixie" plugin that enables elements to stick to the viewport while scrolling within their container, allowing the weekly summaries to remain visible as the user navigates the data.
A D3.js visualization demonstrates post-selection for customizing axis elements, even during animated transitions. The example shows a time-series chart with a currency-formatted y-axis and dashed gridlines, where axis text labels are repositioned after rendering via `selectAll("text")`. When the y-axis domain transitions from $1 million to $3 million, the code uses `transition.tween` with null values to cancel default attribute tweens, allowing the custom label offsets to persist. The SVG rendering uses `d3.svg.axis` with linear and time scales, and the animation runs over 2.5 seconds.
This visualization displays the S&P 500 monthly closing price from January 2000 through December 2004 as an area chart with an overlaid line. The area is filled with a light gray, while the line is a darker gray. The x-axis is a time scale using monthly date ticks, and the y-axis shows price. The chart is annotated with the symbol "S&P 500" in the lower-right corner. The visualization uses D3.js to render the chart as SVG, with monotone interpolation for smooth curves. While the code includes a commented-out click handler that would have zoomed the x-axis to a random date range, the primary display presents the complete series without interaction.This example shows the S&P 500 index from January 2000 to December 2004 as a smooth area chart with a line overlay. It uses D3 with SVG and animation, plotting monthly closing prices. The chart features a white grid on the x-axis, a right-oriented y-axis, and a clipped monotone-interpolated area and line. A label marks the series, and the code includes a commented-out click handler for interactive zooming. --- **Description (concise, for gallery):** A clean area chart of the S&P 500 from 2000 to 2004, rendered in D3 with SVG. Monthly closing prices are drawn as a dark line over a light gray filled area, with a clipped monotone interpolation for smooth curves. The x-axis shows time with minor tick subdivisions, and the y-axis is on the right. Although the data includes a single series, the visualization uses an animated zoom interaction (currently commented out) that rescales the x-axis on click. This example demonstrates how to build an area chart with D3's scales, axes, and path generators.
A race pace visualization that animates stream data showing seconds per mile against a goal pace. The chart uses D3 scales to map distance on the x-axis and pace on the y-axis, with mile markers fading in sequentially. Colored areas highlight sections above and below the target pace, with an elevation profile displayed at the bottom. Average pace lines and labels provide summary statistics, while the animated position circles and pace lines trace the run’s progression over distance. The SVG rendering includes interactive hover elements, a red goal line, and blue/red area fills to distinguish faster and slower segments.
This visualization charts a runner's race pace against a goal pace, using D3 v3 with SVG and animation. A blue area highlights portions of the run where the pace is faster than the average, while red shading indicates slower segments. An elevation profile is layered beneath the pace data, and mile markers fade in sequentially along the top. The chart also includes a goal line and labels for average pace, run time, and faster/slower indicators, providing a comprehensive view of pacing relative to terrain and target.
This parallel coordinates visualization of cars from the ’70s and ’80s uses D3 2.5.0’s interactive brush component to filter data by dragging along any axis. The plot maps each car’s attributes—economy, cylinders, displacement, power, weight, acceleration, and year—as lines crossing parallel axes, with brushing enabling dynamic dimension filtering. Data comes from cars.csv, rendered as an animated visualization.