Skip to main content
SimilarExport ZIP
100%

D31

✓ Published0🌍 Public
AAjoshi1988
Last edited Nov 19, 2022
Created on Nov 19, 2022
Forked from Hello HTML

This example displays a static, hand-coded SVG scene on an HTML page, featuring a large red circle with a black outline and two smaller black circles positioned within it. The page loads React 18.2.0 from a CDN and uses `ReactDOM.render` in `index.js` to inject a simple "Hello Jsx" heading into a separate root element, while the SVG is placed directly in the markup. The visualization relies on raw SVG elements, not React-generated drawing, and includes no interactive or data-driven behavior.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Hello HTML

This example displays a simple, static SVG face composed of three circles: a large red circle for the head and two smaller black circles for the eyes. The HTML page sets up the SVG canvas with fixed dimensions and defines the circles directly in the markup. The code loads React 17, ReactDOM, and D3 v7 from a CDN, but renders the visualization using plain SVG elements rather than JavaScript-driven data binding or animation.

KKenny Barns PIERRE
86% match
Loading thumbnail…

Fork of Hello HTML

This example shows a static SVG scene containing two circles, one large red circle with a black outline and two smaller unfilled circles positioned inside it. The page uses React and ReactDOM loaded from CDN, with the SVG elements defined directly in the HTML file. The accompanying JavaScript file imports React and ReactDOM but only logs the React object to the console, so no interactive behavior or data-driven rendering is present. The visualization is purely declarative markup inside an SVG viewport.

IIsaac Raskin
84% match
Loading thumbnail…

d3-svg-play-1

This example demonstrates basic SVG shape rendering and interaction within a React page. It shows a static composition of circles, rectangles, lines, and a complex path with embedded arc commands, plus a group containing a red-striped circle, text, and a crossing line. The visualization uses raw SVG elements styled with CSS, where circles transition to white fill and change to a semi-transparent red on hover. The page includes an “Hello HTML!” heading and sets the SVG canvas to 960 by 700 pixels, rendering shapes directly without external data.

JJP Adams
84% match
Loading thumbnail…

Hello HTML

This example displays a static, yellow circle with a thick black outline, centered on a transparent background. It represents a bare minimum integration of React and D3 within an HTML page. The visualization is rendered as an SVG element directly through a React component, using the `ReactDOM.render` API to mount the application to a root div. The code imports React, ReactDOM, and D3 v6 from CDN sources, but notably, the D3 library is loaded yet not actively used for drawing, with the graphic itself defined by hardcoded SVG circle attributes.

Bbarone008800
84% match
Loading thumbnail…

Hello WORLD D3

This example shows a single large yellow circle with two smaller black circles positioned to resemble a face, rendered directly in SVG via static markup in the HTML. The code uses React 18 to mount an `App` component, though the visual itself is defined outside React in the `index.html` file, with the circles' coordinates and stroke properties set manually. The page loads React and ReactDOM from unpkg, and the SVG has a fixed width of 960 and height of 500, with no D3.js API calls present despite the title referencing D3.

RRegina Flores
83% match
Loading thumbnail…

Fork of Hello HTML

This example shows a static SVG scene of a yellow circle with black outline and two smaller circles, alongside a React-rendered heading. The page loads React 18 and ReactDOM 17 via UMD scripts, then uses `ReactDOM.render` to insert JSX into a root div. The SVG circles are drawn directly in the HTML, with hardcoded coordinates and styles. The code demonstrates basic SVG markup combined with React’s declarative rendering, though the SVG elements are not generated through React components.

PPGC-2557
83% match
Loading thumbnail…

Test

This example displays a static SVG scene of a red circle and a navy line rendered from hardcoded coordinates. It demonstrates basic SVG primitives including `circle` and `line` elements with explicit positioning and styling attributes. The visualization uses plain HTML and SVG markup, with no JavaScript libraries or data binding, serving as a minimal starter for React-based visualization projects. The code renders these shapes directly in the browser without any interactive or dynamic behavior.

Ddavidhan1120
83% match
Loading thumbnail…

welcome to D3Js

This example demonstrates a minimal D3.js setup within a React framework, rendering a single red SVG rectangle as the main visual output. The code uses D3’s `select` function to grab the SVG element and apply a red background style, while also appending a paragraph with the text “hey” to the page body. The SVG is 400 by 200 pixels, generated via HTML, and all D3 operations are executed through the `bundle.js` script. The visualization serves as a basic introduction to integrating D3 with React and SVG rendering.

MManikyapavan
83% match