D3-React-Viz-Learning-1

100%

D3-React-Viz-Learning-1

✓ Published0🌍 Public

Last edited Jan 11, 2022

Created on Jan 11, 2022

This example shows a static SVG face composed of three circles: a large yellow circle with a thick black stroke, and two smaller black circles positioned as eyes. It is implemented as a bare HTML page, using direct SVG markup without any JavaScript or D3 code, despite the title referencing React and D3. The source is simply an inline SVG element within the HTML body, and the rendering relies on the browser’s native SVG support.

AI-generated description

A bare minimum HTML page.

MIT Licensed

Similar vizzes

Loading thumbnail…

d3-face

This example renders a simple, static face using React and SVG, with a yellow circular head and two black eyes. The drawing is created declaratively through JSX, using React’s `ReactDOM.render` to insert the SVG directly into the page. While the code imports D3 via UNPKG and demonstrates local ES6 module usage, the visualization itself does not call any D3 functions or rely on data; it only sets fixed numeric constants for coordinates, radii, and stroke widths. The result is a minimal, code-driven illustration of SVG shape composition within a React component.

Ggoodlana

88% match

Loading thumbnail…

D3

This example renders a simple static SVG illustration of a yellow face with two eyes, directly defined in an HTML document. It uses no external libraries or datasets, only raw SVG elements (`<svg>`, `<circle>`) styled with CSS properties like `fill`, `stroke`, and `stroke-width`. The circles are positioned absolutely via `cx` and `cy` attributes, and the page sets `overflow:hidden` to suppress scrollbars. The visualization demonstrates basic vector graphics composition without any JavaScript or dynamic data processing.

KKrishna

87% match

Loading thumbnail…

D3-React-Viz-Learning-2

This example shows a smiley face rendered as a full-screen SVG using React. It demonstrates how to compute geometric properties, such as the face radius and eye positions, based on the browser window dimensions. The app is built with React and ReactDOM, and uses pure SVG elements like `<circle>` and `<g>` for drawing, with all styling and transformations applied inline. No external data is loaded; the visualization is purely generated from hardcoded constants for eyes, mouth, and stroke width.

SSowmya Naik

87% match

Loading thumbnail…

D3 Intro with React

A simple SVG face rendered through React demonstrates how React’s declarative component model can be used to draw D3-like visualizations. Using React and ReactDOM, the code declaratively defines three circles—a yellow face with a black stroke and two black eyes—positioned via hardcoded coordinates and inline style attributes for stroke width. The SVG output is static, with no data or interaction; it illustrates the basic integration of React’s JSX syntax with SVG primitives to produce vector graphics.

MMark Odayan

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…

D3 Tutorial

This example shows a static smiley face made of three SVG circles on a yellow background, drawn inside an HTML page that loads React 18.2. The visualization uses plain SVG elements—a large yellow circle with a black stroke and two smaller black circles for eyes—hardcoded in the markup. The code includes a minimal JavaScript entry point that logs a message, while the README references a React starter template for extending the setup.

AAbrisG

87% match

Loading thumbnail…

D3.js Face

This example uses D3.js and React to render a simple, stylized face in an SVG. It draws a large yellow circle for the head, two black circles for the eyes, and a smiling mouth created with the `d3.arc` path generator, all centered within a 960×500 viewport. The code explicitly sets the head’s radius based on the SVG’s height, while the eyes and mouth use fixed pixel offsets and arc angles. The visualization demonstrates basic SVG shape creation and geometric positioning with D3’s `select` and `attr` methods.

Ssamwatersw15

86% match

Loading thumbnail…

Hello HTML

This example shows a simple static SVG face made of three circles—two small eyes and a large yellow head—rendered on a 960-by-500 canvas. The code uses React 18 via a UMD script, though the bundle is not loaded, and relies on inline SVG elements for drawing without any data or interaction. The page intentionally mixes plain HTML, CSS for margin reset and overflow hiding, and a placeholder JavaScript file that logs to the console. It demonstrates minimal SVG structure within a React setup, with no dynamic behavior or external libraries beyond React’s basic import.

Zzaaaza

86% match