HTML Starter

100%

✓ Published0🌍 Public

Last edited Mar 19, 2020

Created on Mar 19, 2020

This example demonstrates a simple interactive SVG scene where hovering over a citrus fruit reveals its name. The page displays a large yellow circle alongside smaller orange and yellow circles created by the `maakfruit` function, which uses D3 v5's `d3.select` and `append` to generate elements. Mouseover and mouseout events on the mandarin circle trigger `fruitmuis` and `fruituit`, appending and removing the label text. The visualization uses plain SVG within a static HTML document styled by CSS, with no external data source.

AI-generated description

A bare minimum HTML page.

Similar vizzes

Loading thumbnail…

HTML Starter

This example shows a simple interactive fruit scene where circles represent an apple, orange, and lemon in an SVG canvas. Hovering over each fruit displays its Dutch name as text near the cursor position. The visualization uses D3 v5 selections and event handlers (`on('mouseover')`, `on('mouseout')`) to append and remove text elements dynamically. A reusable `maakFruit` function creates each circle, while `fruitMuis` and `fruitUit` manage the hover labels. The page is built with a basic HTML structure, React framework, and CSS styling for centered orange text.

Ddanielstaal

93% match

Loading thumbnail…

HTML Starter

This example demonstrates a basic interactive SVG fruit bowl in a web page. It uses D3.js to add a hover interaction: when the user mouses over the orange circle, D3 appends a text label saying “Orange” to the SVG; on mouse-out, the label is removed. The visualization is built with static SVG elements—a purple translucent background circle, an orange, a yellow, and a green circle—stylized via CSS and rendered using D3’s selection and event handling methods (`.on`, `.append`, `.remove`). The code uses HTML, CSS, and D3 v5 loaded from a CDN.

Ddanielstaal

91% match

Loading thumbnail…

HTML Starter

This example shows a simple interactive SVG scene with three labeled fruit circles. Hovering over a circle displays its name as text near the cursor. The code uses D3.js v5 selections and event handlers (`on("mouseover")`, `on("mouseout")`) to append and remove text elements. It also includes a static blue circle defined directly in the HTML.

RRomeeCode

89% match

Loading thumbnail…

HTML Starter

This example presents an interactive fruit bowl visualization rendered as SVG. It displays a light blue bowl containing an apple, an orange, and four grapes, with each fruit labeled on mouseover using d3.select and append operations. The code uses d3.v5 to bind mouseover and mouseout events, adding text elements dynamically to show fruit names. Styling is handled through external CSS, setting the page font color to orange.

MMenno1989

88% match

Loading thumbnail…

HTML Starter

This example displays a bowl of stylized fruit rendered as SVG circles on a dark blue background with a gold stroke. It uses d3.v5 selections and appends circles via the `maakFruit` function, which binds mouseover and mouseout events to show and remove a text label near each fruit. The code demonstrates basic event handling and dynamic element creation in a React-free HTML page.

Kkoenrv

87% match

Loading thumbnail…

HTML Starter

This example shows a minimal HTML page displaying a simple SVG fruit bowl: a purple translucent circle containing an orange circle labeled “Orange,” plus yellow and green circles. The visualization uses inline SVG elements—`<circle>` and `<text>`—positioned and styled directly in the markup, with CSS controlling global text alignment and font size. It demonstrates a bare-bones setup without any JavaScript libraries, relying solely on static SVG rendering for its geometric composition.

Ddanielstaal

86% match

Loading thumbnail…

HTML Starter

This example demonstrates a simple data-join visualization of fruit shapes, showing apples and lemons as colored circles with labels. It uses D3 v5’s `scaleOrdinal` to map fruit types to colors (red for apples, yellow for lemons) and radii (50 vs. 20 pixels). The code employs the general update pattern with `selection.selectAll`, `enter`, `merge`, and `exit` to handle adding, removing, and updating fruits over time via `setTimeout`. The visualization renders inside an SVG container within a React scaffold, with a rounded rectangle representing a bowl.

SSybil Jas

82% match

Loading thumbnail…

HTML Starter

This example demonstrates the D3 general update pattern for animated transitions in an SVG scene. It renders a bowl of fruit where apples and lemons appear, change type, and disappear at timed intervals. The visualization uses React, D3 v5's `scaleOrdinal` for color and radius mapping, and the `select` API to manage enter, update, and exit states for circles and text labels.

EEmma

82% match