D3 Try out

100%

✓ Published0🌍 Public

Last edited Aug 23, 2016

Created on Aug 23, 2016

The Monty Hall problem is presented as an interactive game where three grey circles represent doors, and one hides a winning prize. Users click a door, see a losing option revealed, then choose whether to stick or switch. The visualization tracks games played, wins, and winning percentage in live-updating statistics. Built with D3 v4, it uses SVG circles, data binding, and click event handlers to manage game state and render feedback dynamically.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

d3js - enter(), update() and exit()

A bar of five orange circles sits along a horizontal axis, with a button to swap between two data arrays of different lengths. Using D3 v3, the example demonstrates the data-join pattern: `enter()` appends new circle elements when longer data arrives, `exit()` removes surplus circles when data shrinks, and a `.transition()` updates all remaining circles’ radii and positions. The axis is drawn as simple SVG `line` elements with `text` labels, and the dataset label updates with each toggle.

FFrissAnalytics

66% match

Loading thumbnail…

Playing with D3

This example demonstrates how D3 selections can be used to manipulate HTML elements, showing three divs labeled Box 1, Box 2, and Box 3. The code includes commented-out exercises that illustrate various D3 v4 APIs, such as selecting elements with `d3.select` and `d3.selectAll`, changing text with `.text()`, inserting HTML with `.html()`, and appending child elements with `.append()`. It also shows data binding with `.data()` and `.enter()` to create paragraph elements, though all commands remain inactive. The example serves as a tutorial reference for practicing D3’s DOM manipulation capabilities.

Aarcox80

66% match

Loading thumbnail…

Math test

A math quiz uses D3.js v3 with an SVG force-directed graph to display answers as draggable, colored circles. The visualization presents arithmetic questions and lets users select the correct result from a node layout, with feedback and score tracking. The code applies `d3.layout.force`, SVG circles, and CSS styling for interactive elements. Language and operation settings adjust quiz content, while checkboxes enable timed quizzes and sound, though the actual sound behavior is not implemented in the shown code. The interface also displays correct/incorrect counts and a timer.

EEE2dev

66% match

Loading thumbnail…

d3 Practice

A dynamic bar chart displays a shifting dataset of 20 values, with each bar’s height and color (from black to yellow) encoding its current value. Clicking the paragraph triggers a random new value, pushing it into the array and shifting out the oldest. Using d3.v4, the code binds data to SVG `rect` and `text` elements via `d3.scaleBand`, `d3.scaleLinear`, and keyed joins, animating transitions with `transition().duration()` to slide bars leftward, update their heights, and remove exiting elements.

Aadammak137

65% match

Loading thumbnail…

D3 Selection Exploration - Exercise

This example demonstrates D3's data-join and selection methods through an animated scatterplot of circles and vertical lines. The visualization continuously updates as `d3.range` generates new data points, with circles and lines re-rendered every frame. The code uses `selection.data().join()` for enter, update, and exit handling, alongside `selection.call()` for reusable visualization logic. Randomly colored circles refresh twice per second, while the underlying sine-wave pattern animates smoothly via `setInterval`. The SVG canvas spans the full window, with black-stroked circles connected to green lines.

WWolfgang

65% match

Loading thumbnail…

Untitled

This example demonstrates D3's enter, update, and exit selections in a data join, showing how circles are added, recolored, or removed as the dataset changes with each button click. Clicking the Update button generates a random number of items (each with value 40) and renders them as blue circles on entry, red on update, and green on exit. The code uses d3.select and selectAll with the .join() method, including explicit enter, update, and exit functions, and applies attributes for positioning and radius via .attr(). The SVG rendering is handled in a 960×100 viewport.

SSubhendu Karmakar

65% match

Loading thumbnail…

D3 Practice

This example demonstrates how D3’s data join handles changing datasets, showing circles rendered from an array of five random integers. After drawing all circles, the code trims the data to three items, and the exit selection removes the extra circles from the SVG. It uses React 16.13 and D3 v6, with the `d3.randomInt` generator supplying values and D3’s selection methods (`data`, `enter`, `exit`) managing circle updates. The SVG is appended directly to the body, with no interactive behavior beyond the static removal.

WWaseem Medhat

64% match

Loading thumbnail…

Enter, Exit, Update

This example demonstrates the enter, update, and exit phases of D3’s data-join process using three selectable buttons that swap between different arrays of named values. Each array’s items are rendered as circles, showing how new items appear, existing items change position, and removed items shrink away. The visualization uses D3 v4’s `.data()`, `.enter()`, `.exit()`, and `.merge()` methods alongside the `.transition()` API for smooth animations. The SVG circle’s fill color is mapped to each item’s `id`, while the x-coordinate is derived from its index in the current array.

ZZhengyan Yu

64% match