Skip to main content
SimilarExport ZIP
100%

data Visualization start

✓ Published0🌍 Public
AArlindo
Last edited Mar 13, 2021
Created on Mar 13, 2021
Forked from HTML Starter

This example shows a simple yellow circle with a black outline, accompanied by two smaller circles positioned inside it, rendered on a static SVG canvas. The code uses plain HTML, CSS, and JavaScript within an `index.html` file, with all shapes drawn directly using SVG `circle` elements. No external libraries or data sources are involved; the visualization relies solely on hardcoded coordinates and inline styling to achieve its minimal geometric composition. The setup demonstrates basic SVG rendering in a web browser without any interactive or dynamic behavior.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

DataViz

This example shows a static SVG scene with a large yellow circle outlined in black, centered on a 960 by 500 canvas, and a smaller unfilled circle overlapping it to the left. The HTML page uses inline CSS to remove body margins and hide overflow, while the SVG markup defines the shapes directly within the document. The circles are constructed using standard SVG `<circle>` elements with explicit `cx`, `cy`, `r`, `fill`, and `stroke` attributes. No JavaScript or React logic is present; the visualization relies entirely on static SVG rendering.

Mmacl23
88% match
Loading thumbnail…

Hello HTML

This example shows the simplest possible data visualization: a single yellow circle with a black outline centered on a 960 by 500 pixel SVG canvas. The page uses raw HTML and SVG, with no external libraries, to demonstrate that a visualization can be built with just a few lines of markup. The circle’s position and size are set via explicit `cx`, `cy`, `r`, `fill`, `stroke`, and `stroke-width` attributes, while the global CSS hides scrollbars by removing the default body margin. The underlying source is purely static, with no data file or scripting involved.

AAntonio Mendoza
87% match
Loading thumbnail…

Data Visualization

A solitary yellow circle with a black outline sits centered on a blank SVG canvas, rendered at 960 by 500 pixels. The example demonstrates the minimal setup for a React-based visualization, using `ReactDOM.render` to mount a single SVG `<circle>` element. The code imports React and ReactDOM, defines a functional component returning the SVG markup, and loads the production builds of React 16.9.0 from a CDN. This static shape serves as a starting point, with a commented-out section hinting at a future smiley face with two additional eye circles.

LLittlegreen8
87% match
Loading thumbnail…

DataVis Lesson 01

This example shows a simple yellow circle with a black outline, accompanied by two smaller unfilled circles positioned near its upper half. The visualization serves as a basic introduction to drawing shapes, demonstrating how circles can be placed on a canvas using coordinates and defined with fill and stroke properties. The code uses raw SVG elements within an HTML page, with the inline `<circle>` tags specifying their center points and radii directly. No external libraries or JavaScript are involved; the rendering relies entirely on the browser’s built-in SVG support, and the static image does not change or respond to interaction.

JJonatas Gomes Alves
86% match
Loading thumbnail…

Hello HTML

This example demonstrates a simple static SVG composition, rendering a yellow circle with a black outline alongside two smaller unfilled circles, arranged to resemble a face. The HTML page contains a single SVG element with hard-coded coordinates and styling, using raw SVG circle elements rather than a charting library. The visualization relies on standard web technologies, with inline CSS in the document head to remove page margins and hide overflow. The code is a minimal, hand-authored illustration of SVG’s basic shape capabilities within an HTML document.

TThirendra Shah(CLCT)
85% match
Loading thumbnail…

Hello HTML

This example shows a single yellow circle rendered on a black-bordered SVG canvas, demonstrating a minimal HTML page with embedded CSS and JavaScript. The SVG element is set to 960 by 500 pixels, with the circle centered at (480, 250) and a radius of 245. The page uses plain HTML, CSS for margin and overflow styling, and no external libraries—only native SVG tags such as `<circle>` and attributes like `fill`, `stroke`, and `stroke-width`. The rendering approach is direct SVG markup, with no data source or dynamic behavior beyond static visual output.

Aanamariacv
85% match
Loading thumbnail…

SVG fundamentals

This example demonstrates the foundational use of SVG for basic data visualization, rendering a single circle on an otherwise empty HTML page. The code manually defines the circle’s geometry—center coordinates and radius—directly in the markup without any scripting. It relies on native SVG elements and CSS-free default styling, requiring no external libraries. The rendering approach is purely static, showcasing how raw SVG syntax can serve as the starting point for more complex charts or graphics, with the circle serving as a placeholder for future visual encodings.

Ookthefun
85% match
Loading thumbnail…

Hello HTML

This example shows a single yellow circle centered on a 960 by 500 SVG canvas, with a black stroke and a radius of 245 pixels. It is a minimal demonstration of how to embed SVG directly in an HTML page using inline CSS and JavaScript-free markup. The code relies on the SVG `<circle>` element and CSS properties for sizing and stroke styling, with the body margin removed and overflow hidden for a clean, full-viewport look. It illustrates the fundamental building blocks of web-based data visualization without any external libraries.

Eeyejayvee
85% match