HTML test

100%

✓ Published0🌍 Public

Last edited May 12, 2020

Created on May 11, 2020

This example demonstrates a styled HTML list alongside two SVG canvases, each containing a single circle. The visualization uses D3 v5.9.2 via `d3.select('svg')` to dynamically change the background color of all SVG elements to pink, overriding an inline blue style on one canvas. The page uses a monospace font from CSS and applies a blue color to a list item with the class `wawa`. The SVG elements include a `transform` attribute that translates them, though no interactive behavior is shown.

AI-generated description

React Starter code.

MIT Licensed

Similar vizzes

Loading thumbnail…

Test of HTML Starter

This example demonstrates basic SVG rendering in an HTML page, showing a red circle, a blue curved path, and a straight blue line on a 300x300 canvas. It uses static SVG elements defined directly in markup, with paths specified using the `d` attribute syntax for quadratic Bézier curves and straight line segments. The page relies on plain HTML structure with no external JavaScript libraries or data sources, serving as a minimal test of how SVG shapes behave within a browser without additional visualization frameworks.

Nnatecoursey@gmail.com

79% match

Loading thumbnail…

HTML D3

This example shows a static set of basic geometric shapes rendered in an SVG canvas, using HTML, CSS, and JavaScript without any external libraries. It displays two circles, one pink and one black, alongside a black rectangle with a pink stroke, all positioned manually via SVG coordinates. The styling is applied through a CSS class for typography and inline presentation attributes for the shapes. The code demonstrates the foundational structure of an HTML page with embedded SVG, which serves as a minimal starting point for building more complex D3.js visualizations in a React environment.

SSurabhi Verma

78% match

Loading thumbnail…

Teste html

This example shows a hand-coded collection of basic SVG shapes: a green circle, red and blue axes, and a yellow rectangle. The code uses plain SVG elements (`circle`, `line`, `rect`) within an `<svg>` tag, with styling applied via presentation attributes like `fill`, `stroke-width`, and `stroke`. No JavaScript or external libraries are used; the visualization is a static test page rendered directly in HTML.

MMagessi

77% match

Loading thumbnail…

d3 intro

This example demonstrates basic SVG shapes—a blue circle and a magenta rectangle—rendered on an HTML page, with a yellow SVG canvas sized at 900 by 500 pixels. The page also includes commented-out D3 code that would select the SVG, set its dimensions, apply a light blue background, and append a circle at new coordinates. The visible output relies on static SVG elements, while the script shows the intended use of d3.select and d3.append for dynamic manipulation, though it is not executed due to the commented syntax.

Nnwhalen2

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

77% match

Loading thumbnail…

SVG TEST

This example demonstrates the basic building blocks of SVG graphics on a plain HTML page. It shows how to create and style two circles and a rectangle using inline SVG elements, with one circle left unfilled and the other filled red. The rectangle uses a blue stroke with a width of 10 and no fill. The code exercises fundamental SVG attributes such as `cx`, `cy`, `r`, `fill`, `stroke`, and `stroke-width` within a fixed 200 by 200 coordinate system. No external libraries or data are involved; the visualization relies entirely on hand-written markup.

Bbtkg

77% match

Loading thumbnail…

HTML1

This example displays three circles layered on an SVG canvas. A red and a blue circle sit alongside a black outlined circle, with a large blue-bordered rectangle frame surrounding them. The page uses a raw SVG static drawing with no interaction or dynamic updates. The design emphasizes geometric positioning and color contrast, using basic SVG elements and attributes to create a simple visual composition.

Ddexuzi

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

77% match