Skip to main content
SimilarExport ZIP
100%

2017: Werktijden horizontal bars

✓ Published0🌍 Public
MMisunoKitara
Last edited Jan 14, 2019
Created on Jan 12, 2018

Horizontal bullets compare actual versus target working times for five priority categories. Ranges, measures, and markers render as SVG rects and lines, driven by the custom d3.bullet plug-in. A button triggers a one-second transition, applying randomize() to recalculate each datum’s values. Data loads from bullets.json, with each category showing a title and subtitle.

AI-generated description

A demonstration of D3’s vertically-oriented bullet charts, based on this example.

forked from <a href='http://bl.ocks.org/espinielli/'>espinielli</a>'s block: <a href='http://bl.ocks.org/espinielli/d653c2e585d01af6d853'>Switch to horizontal bug: fixed</a>

mit Licensed

Similar vizzes

Loading thumbnail…

2018: Reactietijden horizontal bars

This visualization shows the 2018 response times for different priority categories using animated horizontal bars. The data is loaded from a local JSON file and rendered using D3.js v3 with SVG. Each bar is a bullet chart representing response times for critical, high, medium, low, and total categories. The code uses D3’s bullet chart plugin, which includes ranges, markers, and measures, and features a transition effect when the "Update" button is clicked, randomizing the displayed values with `d3.transition` and a linear scale.

MMisunoKitara
83% match
Loading thumbnail…

Bullet Charts

The bullet chart displays multiple quantitative measures—such as revenue, profit, and customer satisfaction—as compact horizontal bars, comparing each against qualitative ranges (shaded backgrounds) and marker lines. Built with d3.bullet, the visualization loads data from a JSON file and uses SVG for rendering. An update button triggers randomized transitions via `chart.duration` and `transition.attr` methods, animating the bars, markers, and ticks smoothly. The layout is based on Stephen Few’s design, with the `bullet.js` implementation handling scale, positioning, and tick formatting.

Mmbostock
76% match
Loading thumbnail…

Bullet Layout

This example shows a bullet chart layout displaying five metrics—Revenue, Profit, Order Size, New Customers, and Satisfaction—each with ranges, measures, and markers. Titles and subtitles are editable in place via SVG foreignObject elements containing XHTML forms, with blur and keypress handlers updating the underlying data. The charts animate transitions when a button randomizes the values, using d3.scale.linear, transition durations, and the bulletChart function from d3.v2. Data is loaded from a JSON file and rendered as SVG.

GGerHobbelt
75% match
Loading thumbnail…

Untitled

This example demonstrates bullet charts, a compact visualization for comparing a primary measure against target markers and qualitative ranges. It renders two SVG charts, one for CPU Load and one for Memory Used, using the custom `d3.bullet()` function. The charts are built with D3 v5 and feature an interactive button that triggers a smooth transition, animating the measure bars and markers to new random values over one second via `.transition().duration(1000)`. The code loads data from a local JSON file.

MMusaab Shirgar
74% match
Loading thumbnail…

Bullet Chart with automatic updating v6

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.

Dd3noob
74% match
Loading thumbnail…

SVG Pseudo Bullet Chart

Four horizontal bars form a pseudo bullet chart, each using stacked gray segments to represent qualitative ranges. A thin white animated rectangle slides across each bar to indicate the current value, while a thick black tick marks a target or threshold. Built entirely with SVG shapes, the chart uses plain `rect` and `line` elements, styled with CSS. The animation leverages CSS `@keyframes` and the `width` property changes, with each bar cycling at a different duration.

WWolfgang
74% match
Loading thumbnail…

Bullet Chart with automatic updating v7

This example shows two bullet charts for CPU Load and Memory Used that update automatically every three seconds. The charts use the D3.js v7 library with a custom `d3.bullet` function that defines ranges, measures, and markers as horizontal bars and lines. Data loads from an external JSON file, and a `setInterval` triggers a randomized update of the measure and marker values. Transitions with a one-second duration animate the changes using `transition.attr` for width and position.

Dd3noob
73% match
Loading thumbnail…

Bullet Chart with automatic updating v5

This example shows two bullet charts comparing CPU load and memory usage, with ranges, measures, and markers that update automatically. Using a custom `d3.bullet` function built on D3 v5, the charts pull data from a JSON file and render as SVG. Every three seconds, a `setInterval` triggers a randomized data update, which is animated over one second using D3’s `transition` and `duration` methods, smoothly transitioning the measure and marker positions along the linear scale.

Dd3noob
73% match