Skip to main content
SimilarExport ZIP
100%

animating flexbox

✓ Published0🌍 Public
KKaustav Sen
Last edited Mar 16, 2022
Created on Mar 16, 2022
Forked from HTML Starter

A button labeled "Remove blocks" triggers a two-stage animation that collapses four square divs within a flexbox container. The example demonstrates how D3.js transitions sequence opacity changes and dimensional resizing, with the divs first fading out over 300 milliseconds, then shrinking their width and margins to zero over 700 milliseconds. The animation toggles between the original and collapsed states with each button click, showcasing the interplay between CSS flexbox layout and D3's transition API for managing HTML elements.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

SHOW HIDE BLOCK JS

This example demonstrates a simple toggle interaction that switches between showing a red and a blue square using a button labeled “Show Red Box” or “Show Blue Box.” The code uses vanilla JavaScript event handling via an `onclick` attribute and manipulates the CSS `display` property to control visibility. It relies on the DOM API methods `getElementById` and `style.display`, with D3.js loaded for potential visualization extensions, though the core behavior is purely HTML and JavaScript.

Llupica.matthew@gmail.com
69% match
Loading thumbnail…

Untitled

This example demonstrates collapsible content sections controlled by clickable buttons. The interface presents a set of headers, each of which can be expanded or collapsed to reveal or hide a block of text below it. The implementation uses vanilla JavaScript event listeners to toggle CSS classes and inline `display` styles, responding to user clicks on elements with the class `collapsible`. The page is built with plain HTML and CSS, with styling that changes the button background color on hover and when active, and sets the hidden content area to a specific width with pink text on a white background.

OOghenemaro Anuyah
69% match
Loading thumbnail…

Remove before add

Two buttons switch between two datasets, each displayed as a grid of small squares that grow or shrink to represent a numeric block count. Changing datasets triggers a D3 v4 transition where exiting squares shrink and are removed before entering squares expand, creating a staged reveal. The color of each square updates from light gray to a value mapped through `d3.scaleThreshold`, while an annotation text fades to match the event name. All rendering uses D3 selections, `transition.attr`, and `transition.remove` on SVG `rect` elements.

GGerardoFurtado
68% match
Loading thumbnail…

Transition Speed Test

This example demonstrates the speed of D3’s transition engine by animating a 48×48 grid of small square divs from white to black. Clicking the button triggers a one-second transition on all 2,304 elements simultaneously, changing their background-color and outline-color. The code uses d3.select, d3.range, and transition().duration().style() to apply the animation, responding to a click event on a button. The grid is rendered as HTML divs styled with CSS floats, and the transition is built entirely with D3 v3, avoiding jQuery or CSS-only approaches.

Mmbostock
67% match
Loading thumbnail…

FlexBox Layout

This example shows a flexbox-based layout for a step-by-step visualization interface, with a left panel containing labeled steps (Step1 through Done!) and a right panel for content. The code uses plain HTML and CSS, relying on the `display: flex` property, `flex-grow`, and `flex-direction` to arrange the title, steps, and map area. Rendered as a React component, it demonstrates a responsive, grid-like structure without any data binding or external libraries, serving as a minimal template for building a visual workflow.

AAnimesh Nautiyal
67% match
Loading thumbnail…

test

This example demonstrates a static SVG rectangle that animates its width in response to a button click. The visualization uses D3.js to select the HTML body element, create an SVG container, and draw a rectangle. When the button triggers the `trigger()` function, the rectangle transitions its `width` attribute from 50 to 400 over a duration of 2000 milliseconds with a 100-millisecond delay, before being removed from the scene. The page relies on inline JavaScript and D3’s selection and transition APIs.

AAnimesh Nautiyal
66% match
Loading thumbnail…

Untitled

A simple HTML page containing a 100-pixel black square is animated inside a React application. The example demonstrates the `d3.transition()` API, which is used to smoothly change the background color of the `div` element from black to red over a duration of 3000 milliseconds. The page imports D3 v4 and uses `d3.select()` to target the container. The rendered output is a basic color transition, with no data input or complex rendering.

Rrchenam
65% match
Loading thumbnail…

D3.js collapsible tree with boxes

A collapsible tree visualization displays hierarchical data as an interactive diagram with rectangular nodes representing structs and their fields. The example renders JSON data describing payment processing structures, with clickable nodes expanding or collapsing child elements. Built with D3.js v3 and React, the visualization uses SVG for rendering, featuring smooth animations during node transitions, color-coded elements, and tooltips that appear on hover. The tree layout supports zooming and dragging gestures, while links between nodes are highlighted when selected.

GGunjan paul
65% match