Fork of Fork of HTML Starter

100%

Fork of Fork of HTML Starter

✓ Published2🌍 Public

Last edited Apr 30, 2024

Created on Apr 29, 2024

This example demonstrates basic SVG shapes and data binding using D3.js. It appends two circles and three rectangles to an SVG container, with the rectangle heights determined by values from a hardcoded array. The code uses `d3.select` to access the SVG element and `append` functions to create visual elements. Interactive behavior is added by attaching `onclick` handlers to the rectangles via the browser's `querySelectorAll` and `setAttribute` methods.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Fork of Fork of HTML Starter

This example demonstrates basic SVG graphics drawn with D3.js, including two circles and three rectangles whose heights correspond to data values from a JavaScript array. The code uses D3's `select` API to target the SVG element and append shapes, while also utilizing vanilla JavaScript `querySelectorAll` to add click handlers. The visualization serves as a minimal starter template, combining static data-driven bar-like shapes with interactive alert functionality.

LLouisa Penrice

95% match

Loading thumbnail…

Fork of Fork of HTML Starter

This example demonstrates basic SVG shapes created with D3.js and vanilla JavaScript, rendering two circles and three rectangles of varying heights on a blank canvas. The code uses D3’s `select` to append the shapes to an SVG element, with an array `myData` supplying rectangle heights. It also queries all `rect` elements via `document.querySelectorAll` and attaches a click handler that logs a message to the console. The page is styled with CSS, including a large centered greeting and red circles.

HHOURPRIMERA@GMAIL.COM

93% match

Loading thumbnail…

Fork of Fork of HTML Starter

This example shows a basic HTML page that uses D3.js to draw three circles and three rectangles in an SVG container. The rectangles are positioned using hardcoded data from a small array, while the circles have fixed coordinates. The code demonstrates direct SVG manipulation through both D3 selections and native DOM methods, logging elements to the console and adding onclick handlers to each rectangle. The page includes simple CSS styling for the message text and circle appearance.

Gg_ivaska@coloradocollege.edu

93% match

Loading thumbnail…

Fork of Fork of HTML Starter

This example demonstrates a basic SVG visualization using D3.js, drawing two circles and two rectangles on a canvas. The circles are positioned at different coordinates with a fixed radius, while the rectangles are placed at the same x and y positions but vary in height, with one using a value from the `myData` array. The code imports `select` from D3 to append elements, and additionally uses native `querySelectorAll` to log the rectangle elements to the console. Styling is applied via CSS, with red circles and minimal body margins.

Kkaijavanzante@gmail.com

92% match

Loading thumbnail…

Fork of HTML Starter

This example displays a collection of basic SVG shapes—three colored circles, a purple rectangle with a navy outline, intersecting white lines, and a black polyline—arranged on a 960 by 500 canvas. It demonstrates raw SVG markup written directly in HTML, using no external libraries or frameworks despite being forked from a React starter. The rendering relies solely on the browser's native SVG support, with styling applied via a CSS class.

YYagiz Avsar

88% match

Loading thumbnail…

Fork of Fork of HTML Starter

This example displays a simple face composed of SVG circles: a large red circle with a black stroke for the head and two smaller black circles for eyes. It demonstrates integrating React with D3 v7, using React to render SVG elements and JSX curly braces to compute coordinates. The app loads React and D3 from unpkg CDN scripts and renders into a root div, with CSS resetting the body margin for a clean fullscreen display.

MMuhriddinMahmudjonovich

88% match

Loading thumbnail…

Fork of Fork of HTML Starter

This example shows a minimal React-based setup that renders a single circle in an SVG container and logs messages to the console. The page displays a large “Hello HTML!” message alongside the SVG, demonstrating basic DOM manipulation with D3.js. The code uses `d3.select` to target the SVG element and appends a circle with specified `cx`, `cy`, and `r` attributes. A separate CSS file styles the message and removes default body margins, while the HTML file links the stylesheet and loads the bundled JavaScript.

Ooliverkendall99@gmail.com

87% match

Loading thumbnail…

Fork of HTML Starter

This example demonstrates basic SVG shapes—circles, rectangles, and lines—arranged in a static composition on a 960×500 canvas. The code uses plain HTML with inline SVG elements, styled minimally via CSS with zero margins and hidden overflow. Shapes include default black figures, a red circle, a green rectangle, and black lines with varying positions, one of which is duplicated with a translate transform. No JavaScript or data binding is present; it purely showcases SVG rendering capabilities through static markup.

FFaris Sufyan

87% match