Fork of HTML Starter

100%

Fork of HTML Starter

✓ Published0🌍 Public

Last edited Feb 2, 2021

Created on Feb 2, 2021

This example demonstrates a simple interactive web page where clicking a large “click me” heading appends a red “wassup” message to the body. The code uses D3 v6 selections (d3.select, d3.selectAll) to bind data arrays and append SVG rects, though the rect-drawing logic is commented out. The SVG remains empty, while the primary interaction relies on d3.select('h1').on('click') to trigger DOM insertion, rendering entirely through SVG and HTML elements in the browser.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a simple interactive webpage that uses D3.js to manipulate HTML elements and render an SVG graphic. It shows a static red circle with a blue fill and black stroke inside an SVG, alongside paragraphs that become blue after D3 selects them. The code uses `d3.selectAll` and `d3.select` to target elements, and the data-join pattern with `.data()` and `.enter().append()` to dynamically add new paragraphs listing numbers 4, 8, 15, 16, 23, and 42. The page relies on D3 v6 loaded via a CDN, with CSS controlling basic text alignment and font size.

Cclicketeer

86% match

Loading thumbnail…

Fork of HTML Starter

This example displays the static text “Hello HTML!” centered on the page, styled with large CSS font sizing. Built with plain JavaScript and D3 v7, it appends an empty SVG element to the body via `select('body').append('svg')`, though no shapes or data are drawn. The HTML file loads D3 from a CDN and links an external script, demonstrating the minimal structure for combining HTML, CSS, and D3. No data sources or interactive behaviors are present.

NNigel

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

82% match

Loading thumbnail…

Fork of HTML Starter

This example shows a minimal HTML page that combines CSS, JavaScript, and D3 v7. It displays the text “Hello HTML” in large centered type and renders a red SVG square via d3.select and style. The code uses the D3 v7 library from a CDN and logs “Hello JavaScript!” to the browser console. It demonstrates the basic structure of an HTML starter with inline styles and SVG manipulation.

Vvictoriokhomas

81% match

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal D3.js visualization that renders the text “Hello D3” prominently in the browser. It uses the `select` function from D3 v6 to target the `body` element and set its text content, while the page’s styling applies a large font size for visual impact. The setup combines an HTML page with inline CSS and JavaScript, loading D3 via a CDN and bundling the main script with a separate bundle file. The visualization serves as a basic template for integrating D3 with HTML and CSS in a React-based project.

苏苏凯

81% match

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal interactive web page that creates an SVG element dynamically using JavaScript and appends it to the document body. It constructs an SVG namespace, creates a rectangle element with a width attribute, and inserts it into the SVG container before adding the SVG to the page. The page uses standard DOM APIs such as `document.createElementNS` and `setAttribute`, along with CSS styling for a centered text message. The visualization itself is static, with no data source or additional interactivity beyond the initial SVG rendering.

WWendy

80% match

Loading thumbnail…

Fork of HTML Starter

This example showcases a minimal HTML page that uses D3 version 6 to render the text "Hello D3 version 6" directly into the body. The page demonstrates basic integration of D3 with a static HTML structure, applying CSS for centered, large-font styling. The code imports the `select` function from D3 and uses it to set the text content of the body element. It relies on the D3 library loaded from a CDN and a bundled JavaScript file for execution.

Jjaredzhou

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

80% match