Average Circle Overlaped

100%

Average Circle Overlaped

✓ Published0🌍 Public

Last edited Apr 13, 2019

Created on Nov 15, 2018

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.

AI-generated description

This circles shows the project of fictitious schedule simulation. It was used three probability distribution to generate the data: triangular, bootstrap, and bootstrap-rate. The yellow circle is the project duration mean from each distribution.

Data from Mestrado Interdisciplina em Ciência, Gestão e Tecnologia da Informação.

MIT Licensed

Similar vizzes

Loading thumbnail…

Average Circle

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).

RRubens

72% match

Loading thumbnail…

Circle overlap

Ten concentric circles, colored from black through green, blue, yellow, orange, purple, teal, and green to yellow and finally red, are drawn inside an SVG. The circles expand outward in radius from 20 to 200, with their horizontal positions also set to their radius, creating a diagonal stack. The visualization uses d3.select to append a group, scales it by 1.5, and binds the data array via d3’s data join, setting circle attributes for radius, position, fill, stroke, and stroke width.

NNita

67% match

Loading thumbnail…

practice 1 - Circle overlap or opacity check

A circle-overlap visualization arranges ten concentric circles of increasing radius along a diagonal, each filled with a distinct color and outlined in black, to test how opacity reveals underlying shapes. The SVG rendering, created with D3 v5, uses `select` and `append` to add `<circle>` elements from an array of radius and color objects, with the data reversed before binding. The group containing the circles is scaled by 1.5 via a transform attribute, while each circle’s position and size are set directly from its radius value. This example demonstrates basic D3 data joins and SVG attribute manipulation.

NNita

65% match

Loading thumbnail…

Hot Circles

Twelve colorful circles pulse outward from their stored coordinates, each expanding to a uniform radius against a black background. Using D3's data join with enter, update, and exit selections, the visualization animates circle growth with slow transitions while rapid updates reposition elements. The circles use `mix-blend-mode: screen` in CSS to blend overlapping colors, rendering CSV-derived data through D3's `select` and `transition` APIs.

CCurran Kelleher

65% 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

64% match

Loading thumbnail…

practice 1 - Circle overlap cool graphics

This data visualization demonstrates a concentric circle overlap effect, where ten circles of increasing radii and alternating colors are layered to create a "cool graphics" pattern. It shows how varying circle sizes and positions produce an optical illusion of depth and motion. The code uses D3 v5 with an SVG rendering, appending circle elements to a group via \`select\` and \`append\`, setting attributes like \`r\`, \`cx\`, and \`cy\`, and applying a stroke for definition. The circles are drawn in reverse data order to control stacking.

NNita

64% match

Loading thumbnail…

Random Circles

Fifty randomly positioned and sized circles drift across the browser viewport in this d3.v6 example. Each circle's location updates on a timer, shifting by small random increments at every tick, creating a subtle Brownian-like motion. The visualization uses the `d3.range` function to generate the initial dataset, `d3.select` to create the SVG canvas, and the `d3.timer` API to drive the animation loop. Circles are styled as steelblue fills via CSS, with a light gray page background.

Mmbooch22

64% 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

64% match