HTML D3

100%

✓ Published0🌍 Public

Last edited Oct 22, 2023

Created on Oct 22, 2023

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.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Hello D3

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—styled with CSS classes and inline attributes. It shows how to compose geometric primitives within nested groups, applying transforms like `scale()` and `translate()`, and using both CSS rules and presentation attributes for fill, stroke, and stroke-width. The visualization uses HTML5 `<svg>` elements directly in the markup, with JavaScript and CSS linked externally, and does not include any data or interactive behavior.

HHe Jianfeng

87% match

Loading thumbnail…

Hello HTML

This example displays a simple, static SVG face composed of three circles: a large red circle for the head and two smaller black circles for the eyes. The HTML page sets up the SVG canvas with fixed dimensions and defines the circles directly in the markup. The code loads React 17, ReactDOM, and D3 v7 from a CDN, but renders the visualization using plain SVG elements rather than JavaScript-driven data binding or animation.

KKenny Barns PIERRE

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

86% match

Loading thumbnail…

Data Viz with D3

A minimal SVG scene demonstrates basic geometric shapes and styling within a static HTML page. The visualization displays two filled circles, one outlined circle with a blue stroke, and a green rectangular border, all rendered directly through inline SVG markup. The code uses no external JavaScript libraries; instead, it relies on native SVG elements and CSS properties such as `fill`, `stroke`, and `r` for circle radii, while the React Starter link references an alternative approach for interactive builds.

SS1lus

86% match

Loading thumbnail…

D3 SVG

This example demonstrates basic SVG shapes rendered with D3.js, showing how static geometric elements can be drawn directly in a web page. It displays a blue circle and a rectangular outline with a stroke, positioned at fixed coordinates within an SVG canvas of 500 by 960 pixels. The code uses the D3.js library to construct the SVG container and its child elements, with circle and rect tags defining the visual properties. The rendering approach relies on D3’s SVG manipulation capabilities, though no data binding or dynamic updates occur, as the shapes are hardcoded in the HTML structure.

MMohd Sameer

86% match

Loading thumbnail…

HTML Starter

This example demonstrates a minimal setup for rendering an SVG circle using React and D3.js, with all styling defined in CSS within an HTML page. It shows a single circle positioned at a fixed coordinate inside a 500x500 SVG container, rendered by the ReactDOM `render` method. The code combines a React component definition in `index.js` with a static HTML file that loads React, ReactDOM, and D3 v6 from CDNs. The circle’s appearance is determined by default SVG styling, and the example serves as a bare-bones foundation for interactive visualization projects.

TTrustPaul

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

86% match

Loading thumbnail…

SVG

This example demonstrates basic SVG rendering primitives within an HTML page, composing geometric shapes inside a 960 by 500 canvas. The visualization shows how circles, rectangles, lines, and paths are positioned and styled, with one group translated and separately stroked. It relies on the raw SVG API (no external libraries), using attributes like `transform`, `stroke`, `fill`, and path data (`d`) to control appearance and layout, with CSS setting the overall page margins and overflow.

YYash G

86% match