Skip to main content
100%

fresh block

✓ Published0🌍 Public
Aaht
Last edited Mar 27, 2016
Created on Mar 27, 2016

A semi-circular gauge displays a single value on a scale from -100 to 100, with a red-to-green gradient arc and tick labels. The gauge’s pointer animates to a new reading every five seconds, here jumping to -30, using an elastic ease via `transition.attr('transform')` and `d3.svg.line` for the pointer shape. Built with D3 v2, the code defines a reusable `gauge` function that computes arc geometry using `d3.svg.arc` and a linear `d3.scale.linear` to map values to angles. The animation loops with `setInterval`, updating the pointer’s rotation smoothly.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/c122ba168c306cd35491'>fresh block</a>

Similar vizzes

Loading thumbnail…

Gauge

This example presents a gauge visualization that displays a single numeric value on a semi-circular arc, using a colored gradient to represent the range from minimum to maximum. The gauge updates dynamically with an animated pointer that transitions smoothly to a new random value every few seconds, simulating real-time data changes. Built with D3.js v2, the visualization uses `d3.svg.arc` for the segmented ring, `d3.layout.pie` for tick generation, and `d3.scale.linear` to map the input domain to angular positions. The pointer’s movement relies on D3’s `transition` with an elastic easing, and the gauge’s color scale is defined by `d3.interpolateHsl`, while labels are positioned via rotation transforms.

IImSraone
80% match
Loading thumbnail…

Gauge

This example shows a circular gauge with a colored arc, tick labels, and an animated pointer that moves with an elastic ease. The gauge is driven by random data values, with the pointer rotating via a `transition` on its `transform`. Built with D3 v2, it uses `d3.svg.arc` for the ring, a linear scale for value mapping, and `d3.layout.pie` for tick segments. The pointer rotates through a simple rotational transformation rather than redrawing its path.

GGerardoFurtado
80% match
Loading thumbnail…

fresh block

This example shows a simple line chart with circular dots plotted against a linear scale, where both axes use a value range of 0 to 1. The visualization begins with a static rendering, but the dots respond to mouseover and mouseout events, changing color to red and scaling up briefly before returning to black. The code uses D3 v4 with `d3.scaleLinear`, `d3.line`, and `d3.axisBottom`/`d3.axisLeft` to generate the chart, while SVG circle elements handle the interactive hover behavior via `transition().duration(500)`. Data is randomly generated with `d3.randomUniform`, and the chart fills the browser window.

663anp3ca
78% match
Loading thumbnail…

fresh block

This visualization displays a simple horizontal axis with five tick marks, mapping values from 0 to 1000 across a 500-pixel SVG canvas. The code builds the axis using D3 v4 APIs, including `d3.scale.linear` for value interpolation and `d3.svg.axis` for rendering, with the axis oriented at the bottom and translated into position. The SVG is appended directly to the page body, with fixed margins and an offset to place the axis cleanly. The rendering approach relies solely on SVG elements and demonstrates basic axis construction without additional data or interaction.

XXetelar
78% match
Loading thumbnail…

Gauge

A click of the button triggers an animated update to a semicircular gauge. The gauge displays four colored arc segments, each representing a random value generated by `d3.randomUniform`, with a black needle pointing to a separate random value. The arcs are rendered using `d3.arc` and `d3.pie` with a start and end angle of -π/2 and π/2. Clicking the button transitions the arcs with a default easing and animates the needle using `transition.attrTween` and `d3.easeElasticOut`, giving it a bouncy motion.

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

fresh block

A slider controls the domain of a linear scale, ranging from 20 to 1000, which drives two bottom axes rendered with `d3.svg.axis`. A fake grid axis draws white tick lines with varying lengths, colored red and blue for minor and minor-minor ticks, while a real axis above it uses 100 ticks and a fixed tick size. The visualization compares the grid’s alternating tick patterns against the dense axis, using SVG with `shape-rendering: crispEdges`. The data is generated from the slider’s input value, which updates the scales and redraws the axes.

SSmith5mr
77% match
Loading thumbnail…

fresh block

A set of vertical bars represents five data values, with one bar highlighted in red and the rest in blue, showing a clear visual contrast for the largest value. The chart uses D3 v4 to bind an array of numbers to SVG rectangles, scaling bar heights linearly from a maximum domain of 2500 down to zero. The code applies the scale to position each rectangle’s top and height, while a fixed bar width and white stroke separate the bars for readability.

44xDMG
76% match