Cards

100%

✓ Published0🌍 Public

Last edited Mar 11, 2021

Created on Mar 8, 2021

This example presents a horizontally scrollable gallery of interactive cards, each displaying an image from a shuffled list of external URLs on its front and descriptive placeholder text on its back. Clicking a card triggers a CSS 3D flip animation, revealing the back content, while hovering lifts the card and shifts neighboring cards horizontally to create a stacked effect. The implementation combines plain JavaScript for DOM manipulation and event handling, alongside D3.js v6 for data shuffling and image loading, with all visual effects driven by CSS transitions and transforms.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Hello HTML

The gallery displays a grid of 18 identical, cartoonish yellow faces with black outlines, each generated with randomized facial feature parameters. Built with React and rendered as SVG, the example uses D3’s `arc` generator to construct the mouth shape, while all other components—the background circle, eyes, and face container—are hand-coded React components. Each face’s stroke width, eye offset, eye radius, and mouth dimensions vary randomly, demonstrating how component-based composition with D3 utilities can produce varied visual output.

Cchipbrownlee

70% match

Loading thumbnail…

Click to Shuffle:: Rendering Data with React & D3

This example renders CSS named colors from a CSV dataset as a radial burst of pie slices, where each slice’s fill corresponds to its RGB hex value. Clicking anywhere on the page shuffles the order of the slices, recalculating the pie layout with `d3.pie` and drawing paths with `d3.arc`. The visualization uses React hooks (`useState`, `useEffect`) to manage the data and trigger updates, while D3’s `csv` loader fetches the color data. The SVG output is generated entirely through React components, demonstrating a hybrid of React state management and D3’s data transformation utilities.

Tt829702

68% match

Loading thumbnail…

d3 class practice

This example demonstrates a before-and-after image comparison slider with a draggable white divider. The interface lets users interactively reveal one of two photographs by dragging the resizer horizontally across the container. The implementation relies on plain JavaScript event listeners for mouse and touch interactions, manipulating DOM element widths and positions directly. It uses CSS gradients and flexbox for styling, with images sourced from Pexels, and does not utilize any D3 or React APIs despite the title.

TThandolwethu Shakes Dlamini

68% match

Loading thumbnail…

Importing

This example presents an image slider interface for a data import feature. A full-screen banner cycles through four background images with corresponding text panels, navigated by arrow controls. The slider logic uses plain JavaScript DOM manipulation, tracking image and text indices via `getElementsByTagName` and `classList`. The page also includes the D3 v5 library and the SheetJS (xlsx) library, loading them via external script tags, suggesting integration for data file handling within the static HTML structure styled by CSS.

Ddanish-nix

68% match

Loading thumbnail…

Rendering Data with React and D3

This example renders the CSS named colors dataset as a vertical stack of 960-pixel-wide color swatches, each 4 pixels tall, using React to map each row to a styled `<div>`. The `App` component loads the CSV via `d3.csv` asynchronously with `useEffect`, stores the result in state via `useState`, and displays five swatches per row from left to right? The visualization demonstrates a simple React–D3 integration where D3 handles data fetching and parsing while React exclusively performs the DOM rendering, with a `<pre>` loading fallback before the CSV resolves.

Aangelathacker123

68% match

Loading thumbnail…

Colorful Faces

A grid of twenty colorful faces fills the page, each face randomly assigned a background color from a set of five. Each face is built from modular React components: a background circle, two eyes, and a mouth arc. The code uses React and D3.js, with the mouth shape generated by D3's `arc` function to create an arc path. Eye position, size, and mouth dimensions are randomized, producing a playful variety of expressions across the grid.

HHalcyonWjr

68% match

Loading thumbnail…

Rendering data with React

This example displays a vertical stack of colored horizontal bars, one for each named CSS color, loaded from a CSV file. Using React with hooks like `useState` and `useEffect`, the app asynchronously fetches the data via `d3.csv` and renders each row as a div with a background color set from the `RGB hex value` column. While the data is loading, a “Loading...” message appears, and the final visualization fills the viewport with sequential color swatches.

Kkragovic

68% match

Loading thumbnail…

Hello HTML

This example shows a grid of 18 randomly generated cartoon faces, each composed of SVG circles and arcs. Built with React components and D3’s arc generator, the faces vary in eye position, eye radius, mouth radius, and mouth width. The background circle’s fill uses a random HSL color, and React renders each face inside a shared SVG container. The layout is static, with no interaction or animation.

SSrividya Panchagnula

68% match