fps-meter

100%

✓ Published0🌍 Public

Last edited Aug 22, 2016

Created on Dec 10, 2015

A minimal performance gauge displays the current frame rate of an animated visualization. An on-screen counter updates continuously, showing frames per second as a single number. The code uses a custom `d3.timer` loop to record timestamps, stores the last fifteen in an array, and calculates the average frame duration. D3.js and lodash support the selection, styling, and array operations, while the rendering is a simple fixed-position HTML `<div>` with monospace text. The example provides a live, lightweight diagnostic without additional charting.

AI-generated description

Similar vizzes

Loading thumbnail…

Performance Visualization Dashboard

This dashboard visualizes runtime performance across frames using three coordinated D3 v6 SVG charts. A bar chart shows functions with the longest total runtime, while a scatter plot details the breakdown of the longest frame by function. An interactive line chart connects performance points over tick time, enabling selection of specific frames. The visualization uses d3.csv for data loading, scaleBand, scalePoint, scaleLinear, axisLeft, axisBottom, and d3.timeParse to structure the CSV data containing Tick, Identifier, and Runtime fields.

IINDIGOBLIN

65% match

Loading thumbnail…

Bars

Fifteen vertical bars of varying heights animate smoothly against a dark background, each pulsing up and down in a wave-like pattern. The bars shift in height based on a sine function, producing a continuous, flowing motion that changes over time. Using D3.js v7, the visualization renders SVG rectangles with a band scale for positioning and an ordinal color scale with pastel tones, while a `setInterval` loop drives the animation at 60 frames per second.

EErik Sundahl

62% match

Loading thumbnail…

Simple D3 Percentage Gauge Responsive

A responsive percentage gauge displays a semicircular progress arc with a live numeric percentage label, updating automatically through a timed sequence of sample value pairs. The visualization uses D3 v4’s `d3.arc` and `d3.arc` with `startAngle` and `endAngle` to construct the background and foreground arcs, while SVG text shows the computed percentage. The gauge resizes based on the viewport width using jQuery, and its width, radius, and font size scale proportionally. Animation cycles through hardcoded test values, though the update itself is not animated, only redrawn. The rendering relies on SVG paths and standard D3 selection methods.

FFasani

62% match

Loading thumbnail…

Document

An animated bar chart replays a sequence of keyframes, updating the top bar's value to set the domain for each frame. Components for bars, axes, labels, and a ticker are updated in sync. The visualization uses D3.js v7 to create an SVG, define a viewing box, and manage transitions, coordinating updates for each component within a loop. The animation runs linearly, and an invalidation mechanism can interrupt the current transition.

FFarhaan Qazi

62% match

Loading thumbnail…

Simple D3 Percentage Gauge

This example displays a rotating set of percentage gauges, cycling through seven predefined value pairs to show the proportion of a lower to an upper total. It demonstrates how a semicircular gauge can be built with D3 v4 and SVG, using `d3.arc` to define the background track and the colored progress arc, with a red fill indicating the current percentage. The gauge updates every second via `setInterval`, and the center text shows the rounded percentage. The code relies on jQuery for document readiness, while D3 handles the rendering, and the animation is a simple replacement of the SVG elements rather than a transition.

FFasani

61% match

Loading thumbnail…

Gist 24579e225fd76065b0ac0e72b36ea31b

This example demonstrates a performance profiling visualization for a force-directed graph simulation. It shows how long the `returnLast` function takes to execute on a dataset of star objects, displaying the elapsed time in milliseconds alongside console output. The visualization uses D3.js’s `d3.forceSimulation` to animate the graph, while custom timing logic captures start and end timestamps via `Date.now()` to measure iteration performance. The code logs the star count and elapsed time to the console, iterating through multiple frames to track timing variations. The rendering approach relies on D3’s simulation engine, with the data source being a static array of star objects defined in the script.

WWill Carter

60% match

Loading thumbnail…

SVG Swarm

Five hundred steel-blue circles drift in a simulated swarm, their velocities and positions updated each frame with a simple particle model. D3.js v3 binds the data to SVG circle elements, translating each via the `transform` attribute and scaling its radius based on velocity. A `d3.timer` callback drives the animation, while a live FPS counter in the page header reports the update rate. The visualization compares SVG rendering performance against a canvas-based alternative, using D3's linear scales to map the particle coordinates to pixel space.

Mmbostock

60% match

Loading thumbnail…

Simple d3.js Bullet Chart example

This simple d3.js example demonstrates bullet charts, a compact alternative to gauges for displaying performance metrics against qualitative ranges and target markers. It renders two datasets—CPU Load and Memory Used—from a JSON file using SVG elements. The code implements the chart as a reusable custom component, `d3.bullet`, and includes a button that triggers a transition, animating random updates to the measures and markers over one second with `chart.duration(1000)`.

Dd3noob

60% match