Skip to main content
SimilarExport ZIP
100%

Fork of Fork of HTML Starter

✓ Published0🌍 Public
Gg_ivaska@coloradocollege.edu
Last edited Apr 30, 2024
Created on Apr 30, 2024

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.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

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 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.

Cchris.shimotake@gmail.com
93% match
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
92% 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
92% 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
91% match
Loading thumbnail…

Fork of Fork of Fork of HTML Starter

This example demonstrates a minimal HTML page that combines CSS styling, SVG rendering, and JavaScript interactivity. The code imports D3’s `select` function to append a circle to an SVG element, positioning it at coordinates (100, 100) with a radius of 100. A message displays “Hello HTML!” using large, centered text, while the body margin is reset globally. The visualization uses static SVG shapes without data binding or animations, serving as a clean starter template for exploring React and D3 integration in a VizHub environment.

LLouisa Penrice
90% 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
90% match
Loading thumbnail…

Fork of HTML Starter

This example demonstrates a static web page that combines styled HTML text with inline SVG shapes. A red circle and a blue outlined rectangle are drawn directly within the SVG markup, while a styled header and paragraph provide context. The code utilizes core HTML, CSS, and JavaScript, with CSS transitions applied to the circle’s font-size property, though no animation is triggered without additional scripting. The page is a minimal starter template for experimenting with D3.js and web visualization, rendering entirely through the browser’s native SVG and CSS capabilities.

RRomersims
90% match