Skip to main content
100%

Bullet Chart with automatic updating v6

✓ Published0🌍 Public
Dd3noob
Last edited Sep 14, 2020
Created on Sep 14, 2020

This example presents a bullet chart with two horizontal bars, one for CPU Load and one for Memory Used, using the design recommendations of Stephen Few. The chart displays multiple range bands, a measure bar, and a marker line for each metric, with values updating every three seconds. Built with D3.js v6, the visualization uses a custom `d3.bullet` function to render the SVG chart, which animates changes to the scales and rect widths via smooth transitions. The data appears to be periodically randomized, as the measures and markers shift slightly with each refresh, demonstrating how the chart handles dynamic updates.

AI-generated description

This is a simple example of a bullet chart derived from Mike Bostock's example and updated to work with d3.js v6

The code for the bullet.js script was parsed from Martin Meier's v4 code here.

This version updates automatically from a randomised source.

mit Licensed

Similar vizzes