Skip to main content
SimilarExport ZIP
100%

Fork of Hello HTML

✓ Published0🌍 Public
AAnkush
Last edited Feb 14, 2022
Created on Feb 4, 2022
Forked from Hello HTML

A minimal SVG visualization displays only a yellow circle with a black outline, rendered via React components. The example loads data from a CSV file hosted on GitHub, though the current chart area remains empty apart from the background circle. The code imports `csv` and `scaleBand` from D3 v7, and constructs the SVG using React and ReactDOM, with the circle defined in a separate `BackgroundCircle` component that takes radius and stroke width as props.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Hello HTML?????

This example demonstrates a minimal React-based SVG visualization showing a single yellow circle with a black stroke centered on a 960 by 500 canvas. The component uses React 16.9 and ReactDOM to render the SVG directly into the DOM, computing circle positions from hardcoded center coordinates. Unlike a standard D3 approach, it relies solely on React’s declarative JSX syntax for SVG elements, with no data binding or interactive behavior beyond the static shape.

Ddllaino
88% match
Loading thumbnail…

Fork of Hello HTML

A React-based SVG drawing renders a simple yellow circle with a black outline, containing two smaller black circles positioned symmetrically on either side of its upper half. The page loads React 18.3.1 from a UMD bundle and initializes a React import, though the visualization itself is static and does not use React components for rendering. The SVG markup directly defines the shapes with fixed coordinates and styling. The example serves as a minimal test of HTML integration with React and SVG.

Mmail.lohade@gmail.com
88% match
Loading thumbnail…

Fork of Hello HTML

A single yellow circle with a black outline is centered on a 960-by-500 SVG canvas. The example demonstrates the absolute minimum HTML structure required for a D3-free visualization, using only the SVG `<circle>` element with explicit `r`, `cx`, and `cy` attributes. The page is styled with CSS to remove margins and hide overflow, so the shape fills the viewport. It serves as a static, non-interactive starting point for building more complex charts.

SSrijan Srivastava
87% match
Loading thumbnail…

Fork of Hello HTML

A minimal SVG circle chart. The visualization displays a single yellow circle with a thick black border centered on a 960×500 canvas. It uses an HTML page with inline CSS styling and the SVG circle element, setting explicit attributes for position, radius, stroke, fill, and stroke width. The code does not utilize any JavaScript libraries or external data sources; it is a static, hand-written SVG rendering demonstrating basic shape markup.

RRShailza
87% match
Loading thumbnail…

Fork of Hello HTML

This example displays a single yellow circle with a thick black outline, centered on an SVG canvas. The visualization is generated using React and ReactDOM, which render the SVG element directly into the page’s root div. The circle’s position and radius are calculated from fixed width and height constants, and the rendering relies solely on the SVG circle primitive without any data or interaction.

Wwordman2
87% match
Loading thumbnail…

Fork of Hello HTML

This example shows a simple yellow circle with a black outline and a smaller black circle centered inside it, rendered on an SVG canvas. The entire visualization is created directly within an HTML page using raw SVG markup, specifying the circle elements' positions, radii, fills, and strokes. The page is styled with minimal CSS to remove margins and hide overflow, and the React library is imported in a JavaScript file, although no React-specific components or data sources are used in the drawing itself.

AAlex Avram
87% match
Loading thumbnail…

Fork of Hello HTML

A minimalist face constructed from SVG circles renders inside a React component. The yellow head circle and two black eye circles are positioned using hardcoded coordinates and radius values. The example demonstrates how React 18 creates SVG elements through JSX, while the D3 shape module is imported but unused. The page loads React, ReactDOM, and d3-shape from CDNs, with styling applied via inline SVG attributes and CSS that removes default browser margins.

Hhiteshk-itis
86% match
Loading thumbnail…

Fork of Hello HTML

This example displays a static yellow circle with two smaller black circles positioned inside it, rendered as SVG shapes on an HTML page. The visualization uses raw SVG elements—circle tags with explicit radius, x- and y-coordinate attributes, and stroke styling—rather than any JavaScript-based data computation. The code imports React in index.js via bundle.js, though the rendering itself relies solely on declarative SVG markup embedded directly in the HTML file. No data source or dynamic behavior is present; the visualization simply demonstrates basic SVG shapes within a React project setup.

Ggraingames
86% match