Untitled

100%

✓ Published0🌍 Public

Last edited Feb 9, 2020

Created on Feb 9, 2020

Users answer two yes/no questions about a task's importance and urgency using the noYesBtns custom reusable component, which wraps D3 button creation and a click dispatch. Based on the combined boolean state, D3 transitions change the opacity of one of four Eisenhower matrix items from 0.1 to a highlighted value. Both questions default to a neutral background, and the answer buttons update their own background color when selected.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

Nine buttons switch between poll datasets, each containing values for Harrison, Graham, and Other. Animated bar charts update in place, transitioning vertically and horizontally over one second as the y-axis rescales to the new maximum. The visualization uses D3 v4 with React, rendering SVG rectangles and using d3.scaleBand, d3.scaleLinear, and d3.tip for tooltips.

NNoah Weinberg

67% match

Loading thumbnail…

Untitled

A button click triggers a bar chart transition where five of the ten letters A–J are randomly selected and assigned numeric values, then sorted alphabetically. The chart updates with staggered animations: exiting bars shrink to zero width, while entering and persisting bars grow to their new lengths after a one-second delay. Built with D3 v4 in React, the code uses `scaleBand`, `scaleLinear`, `axisLeft`, and sequential Viridis color scaling, with SVG `rect` elements animated via `transition.attrTween` on the `width` and `y` attributes.

Rrainyrainyguo

65% match

Loading thumbnail…

Untitled

Three bar charts show categorical values for groups A, B, and C, with a button-driven transition between two predefined datasets. Using d3.v4 with React, the visualization renders SVG rectangles that animate their heights and positions over one second via `transition()`. The y-axis scale is fixed from 0 to 20, while the x-axis uses `d3.scaleBand`. Clicking the buttons calls an `update` function that rebinds data and triggers the smooth visual change.

GGinnWG

65% match

Loading thumbnail…

Tree

This interactive tree diagram displays a hierarchical decision flow for faced questions, with nodes representing statuses like "Visit," "Attempted," "Correct," and "Incorrect." Users click any node to collapse or expand its children, triggering smooth animated transitions. The visualization uses D3 v5's `tree` and `hierarchy` layouts alongside `linkHorizontal` for curved edges, with SVG rendering and zoom/pan support via `d3.zoom`. Node colors and labels are driven by embedded JSON data, and transitions are handled through D3’s `.transition()` methods with configurable durations.

AAkrutiKhurana2103

63% match

Loading thumbnail…

Untitled

This interactive progress bar shows three workflow stages—Started, In Progress, and Completed—selectable from a dropdown menu. A gray background rectangle fills progressively with color, width, and hue (yellow to orange to green) changing via a 1000-millisecond D3 transition to reflect the chosen state. The code builds the bar using SVG rectangles and the `d3.scale.ordinal` color scale, with the `progressBar()` function controlling state changes and animated updates through `transition().duration()`.

Mmanidhana90

63% match

Loading thumbnail…

Untitled

This example shows how D3.js can animate transitions between two different datasets, displayed as orange circles along a horizontal axis. The circles’ radii and horizontal spacing are derived from each dataset’s values, and a button toggles between the two arrays. The implementation uses `transition()` to animate the circles’ `cx`, `cy`, and `r` attributes over 500 milliseconds. The code relies on D3’s selection and `.enter()`/`.exit()` methods to add or remove circles when the dataset changes, with SVG elements for rendering.

Ssgalhamdani

63% match

Loading thumbnail…

Untitled

Interactive buttons update a bar chart showing the percentage share of a sample that overreports voter turnout, with separate bars for female and male groups across the 2008, 2012, and 2016 datasets. The visualization uses D3.js v6 with an SVG rendering approach, where clicking a button triggers a transition that updates the x and y axes and smoothly animates the bar heights over one second. The code defines three static data arrays and employs d3.scaleBand for the categorical axis, d3.scaleLinear for the value axis, and transition methods to animate the chart between states.

Mmandu427

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

62% match