HTML Starter

100%

✓ Published0🌍 Public

Last edited Mar 19, 2020

Created on Mar 19, 2020

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.

AI-generated description

A bare minimum HTML page.

Similar vizzes

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

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

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

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

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

87% match

Loading thumbnail…

HTML Starter

This example demonstrates a minimal HTML page with SVG rendering, featuring three concentric circles drawn at two horizontal positions and a closed blue curve through a diamond-shaped path. It shows how D3.js version 6 can select DOM elements, bind data arrays, and append shapes with dynamic attributes. The circles use transparent fills with black strokes, while the line graph employs d3.line() with curveBasis interpolation. The code mixes vanilla JavaScript with D3 selections, logging "Hello JavaScript!" to the console after rendering.

JJulianWgs

84% match

Loading thumbnail…

HTML Starter

This example demonstrates a basic HTML page that uses D3.js (version 5) to render a simple SVG scene. It draws a large circle in the center of a purple-background SVG, with two additional circles layered on top at the same position, though their intended roles as eyes are not visually distinct. The code uses D3's `select` and `append` APIs to create and style the SVG elements, and the page includes an HTML "Hello HTML" text. The data source is an empty `data.csv` file, and the rendering approach is SVG.

AAbhishek Kumar

84% match