Average Circle

100%

Average Circle

✓ Published1🌍 Public

Last edited Apr 13, 2019

Created on Nov 15, 2018

The visualization shows failure times for air-conditioning equipment in two aircraft, presented as concentric circles radiating from the center of an SVG canvas. A dropdown menu lets viewers switch between the first and second aircraft datasets, triggering animated transitions where each circle’s radius scales proportionally to the square root of its value. A persistent yellow circle highlights the mean failure time, while white circles represent individual data points. Built with D3 v5, the code uses `scaleLinear`, `transition`, and custom `dropDownMenu` logic to handle the interactive updates. Data comes from Proschan (1993) as cited in Davison and Hinkley (1997).

AI-generated description

Failure times for air-conditioning equipment in two aircraft (PROSCHAN, 1993 in DAVISON and HINKLEY, 1997, p. 218).

DAVISON, A. C.; HINKELY, D. V. Bootstrap Methods and their Application. Cambridge Universty Press, 1997.

MIT Licensed

Similar vizzes

Loading thumbnail…

Average Circle Overlaped

This interactive visualization compares project schedule risk distributions using overlapping circles. A dropdown menu selects among three probability distributions—triangular, bootstrap, and bootstrap-rate—derived from a fictitious schedule simulation dataset. For each selection, 1,000 duration values are plotted as concentric circles scaled by the square root of each value using `d3.scaleLinear`, with transitions animating radius changes via `transition.duration`. A red circle highlights the mean duration for the chosen distribution. The SVG rendering uses D3 v5 data joins and the custom `dropDownMenu` module.

RRubens

72% match

Loading thumbnail…

Untitled

Five circles sit on a shared horizontal axis, each sized by a value from the current dataset. A button switches between two data arrays, triggering a one-second transition that repositions circle radii and x-coordinates. Using D3.js v6 with SVG and animation, the code employs data joins, `enter`/`exit` selections, and `transition` to update the visualization. An axis line and a title label (highlighting the active dataset) complete the chart, which renders entirely in the browser.

Ssgzzhinde

70% match

Loading thumbnail…

Changing data

Two datasets of varying circle sizes and counts are displayed along a horizontal axis. A button click uses `d3.select` and event listeners to toggle between datasets, demonstrating D3’s data join pattern with `data()`, `enter()`, and `exit()`. New circles appear via `append` with an initial radius of zero, while all circles transition with `transition().duration(500)` to update their `cx` and `r` attributes, and the dataset label changes via `select("text").text()`. The SVG elements are rendered as orange, semi-transparent circles.

WWarren-Fitzhenry

69% match

Loading thumbnail…

Circles on a map

This interactive scatter plot visualizes the relationship between two selectable variables from the auto-mpg dataset, which includes measurements like miles per gallon, cylinders, and horsepower. Users choose the x and y axes through dropdown menus built with a reusable `dropdownMenu` component. The chart uses D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` for scales and axes, while circles animate into position via `transition().duration(2000)`. Each point transitions from the center to its final coordinate, rendering as SVG with a semi-transparent orange fill.

Jjlongwellchc

69% match

Loading thumbnail…

Circular circles

Two animated clusters of small circles drift outward from their origins against a dark background, with green circles generated by a loop of 500 iterations and red circles by a separate loop of 300 iterations. Each circle uses D3’s `transition()` to move along the x-axis via `attr('cx', y[i])` and the y-axis via `attr('cy', i)`, while positions derive from `Math.cos` and `Math.sin` with random scaling. The visualization renders in SVG within a React framework, leveraging D3 v6’s `select` and `append` to structure the two groups.

NNita

69% match

Loading thumbnail…

D3 Selection

This example demonstrates animated data-driven circles rendered as SVG elements whose positions, radii, and count oscillate in response to a continuous time variable. It shows how D3’s selection and join API incrementally updates an existing set of circles, adding or removing them as their number changes. The code uses `d3.select`, `selectAll('circle')`, and the `.join()` method to synchronize the SVG with a dynamic array, while a `setInterval` loop recomputes the dataset from trigonometric functions. Circle properties like `cx`, `cy`, and `r` are bound to each datum for smooth motion.

HHtet Yan Oo

68% match

Loading thumbnail…

Circles Test

A grid of 1,000 semi-transparent circles animates and repositions itself every second. The circles vary in radius and color, and clicking one turns it black. Built with D3.js and the D3Kit Skeleton library, the visualization uses a linear scale for positioning and a category20 scale for colors. Data is generated randomly, with circle transitions handled by D3's `.transition()` method.

BBrideau

68% match

Loading thumbnail…

Circles with Animation

Eleven concentric circles pulse sequentially from a central point, expanding and collapsing in three alternating colors: red, green, and yellow. Each circle animates its radius from zero up to a multiple of its index times ten pixels, then shrinks back. The visualization uses D3 v5 selections with chained `transition().duration()` calls to animate SVG `circle` elements, setting radius, position, fill, and stroke attributes. The data array of indices 0 through 10 drives the size progression, while CSS opacity at 0.1 gives the overlapping circles a translucent, layered effect.

NNita

68% match