Document

100%

✓ Published0🌍 Public

Last edited Sep 15, 2021

Created on Sep 15, 2021

This interactive pricing card reveals package details for massage services on hover. The main card presents a Swedish massage description with an image, while a second card overlays and fades in, displaying a blinking "Packages Details" label and a pricing list with green-highlighted item names. The example uses Bootstrap’s grid and card classes for layout, alongside custom CSS for positioning, a blinking animation keyframe, and a transition effect to control the overlay’s opacity. The underlying data is hardcoded in the HTML structure, showing prices for single, couple, and package session options.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Cards

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.

MMTR

67% match

Loading thumbnail…

Shopping App Prototype

This interactive shopping app prototype animates a dynamic dataset of products and prices, displaying each item as a horizontal steelblue bar with a text label showing its name and price. Using D3 v4 with SVG rendering, the visualization updates over time via `setTimeout` calls, adding and removing items like Milk, Eggs, and Cupcakes while adjusting the scale and bandwidth. The code leverages `d3.scaleLinear` for price encoding on the x-axis and `d3.scaleBand` for categorical positioning on the y-axis, with enter, update, and exit selections to handle data changes smoothly. The fixed vertical spacing maintains consistent row height as the dataset grows and shrinks.

CCurran Kelleher

59% match

Loading thumbnail…

Shopping App Prototype

This example demonstrates a simple shopping list interface where items and their prices appear, update, and disappear over time using animated data joins. The prototype renders text elements in an SVG canvas, with each item positioned vertically and displaying its name and price. D3 v4’s data join pattern (`selectAll`, `enter`, `exit`, `merge`) handles the dynamic updates, while timed `setTimeout` calls trigger sequential changes to the dataset. The code uses `d3.select` to target the SVG and `text` elements, with styles applied directly via `.style()` and attributes set through `.attr()`.

CCurran Kelleher

59% match

Loading thumbnail…

// source https://jsbin.com

This example demonstrates a credit-card payment form with built-in validation and real-time formatting feedback, rendered as an animated UI prototype. The form uses the Stripe API to validate card details, displaying a spinner during processing and showing error messages inline if validation fails. It includes input masks for card number, expiry, and CVC fields, with visual styling for errors and success states. The animation highlights the interactive validation flow, making it clear how user inputs are checked against payment standards. The visualization is not a chart but an animated demonstration of form behavior and user interaction.

AAntonio24

58% match

Loading thumbnail…

Shopping App Prototype

This example animates a shopping list as items are progressively added to a cart, showing a bar chart where each bar represents an item and its length corresponds to its price. The data, loaded from a local JSON file, updates every second, causing new rows to slide in and existing bars to resize smoothly via D3’s data join and enter/update/exit pattern with `d3.scaleLinear` and `d3.scaleBand`. Text labels for item names and prices are rendered in SVG with both a stroked background and foreground layer for readability.

CCurran Kelleher

58% match

Loading thumbnail…

SVG text experiment - Animating texts using d3+Greensock

Eight cards containing associative words and short texts orbit a central call to action on a dark background. The words “Body,” “Audience,” and “Precarity” repeat with varying prose, each card’s text tracing a rectangular path via SVG `<textPath>` elements. Using d3.v5 for dynamic SVG creation and Greensock (GSAP) for animation, the text strokes sequentially into view from a hidden start offset, with `gsap.from` controlling the `startOffset` attribute per card. The final invitation fades in after all cards finish animating.

LLaurens

58% match

Loading thumbnail…

HTML Practice

This example presents a simple car price report as a bulleted list. It demonstrates the basic roles of HTML for structure, an external CSS stylesheet for presentation, and JavaScript, though the visible code focuses on the former two. The page uses standard HTML elements like `<h1>` and `<ul>`, and CSS to apply a monospace font and highlight a specific list item with red background and white text. The data is hard-coded in the markup.

GGodspower Wodi

58% match

Loading thumbnail…

Untitled

Eight colored cubes float in a 3D space, each labeled with a product name and positioned by category from a small inline sales dataset. The cubes rise to heights proportional to sales values, and users can drag to rotate the entire scene. Built with React and D3 v4, it uses the `d3-3d` plugin to project cube faces, `d3.scaleOrdinal` for colors, and `d3.drag` for interaction. SVG paths and text elements update via `transition.attrTween` and `d3._3d().sort` for depth ordering.

Llibramanju

57% match