HTML Starter

100%

✓ Published0🌍 Public

Last edited Mar 18, 2020

Created on Mar 18, 2020

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.

AI-generated description

A bare minimum HTML page.

Similar vizzes

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

92% match

Loading thumbnail…

HTML Starter

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.

SSandyhofland

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

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

90% match

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

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

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

84% match

Loading thumbnail…

HTML Starter

This example demonstrates a dynamic fruit bowl visualization where apples and lemons are rendered as colored circles with labels, and the dataset changes over time through simulated eating and replacement actions. The visualization uses D3 v5 and React, with SVG rendering for the bowl shape and fruit elements. The code leverages D3’s `scaleOrdinal` for color and radius mappings, and employs data joins with `enter`, `merge`, and `exit` selections to update the scene. Timed `setTimeout` calls trigger modifications to the fruits array, showcasing incremental updates.

Ggregosaure

84% match