ChristianGerten

@ChristianGerten·3 public vizzes

Smile

A yellow smiley face is rendered as an SVG using React and D3, with two black eyes and a curved mouth drawn via the D3 `arc` generator. The face’s circular head and eyes are positioned relative to the SVG’s center, while the mouth uses an arc with specified inner and outer radii and angular start and end points. The visualization is static, with no interaction or animation, and the code defines all geometry explicitly using D3 v6 and React 17.

Apr 3, 2021

Loading thumbnail…

Fork of Smile

This example shows a simple smiley face built from three SVG circles on a yellow background. It renders a large yellow circle for the face, with two smaller black circles positioned symmetrically for eyes, all using a black stroke. The visualization is created with React and ReactDOM, using JSX to define the SVG elements and their attributes like center coordinates, radii, and stroke properties. The code sets explicit numeric values for width, height, and offsets, and mounts the component to a root div in the HTML page.

Apr 2, 2021

Loading thumbnail…

Fork of Smile pt2

A yellow circle rendered with SVG represents a smiling face, drawn as a single circular shape on a responsive canvas. The React application uses `ReactDOM.render` to mount an `App` component that returns an SVG element with a fixed width of 960 pixels and height of 500 pixels. The circle is positioned at the center with a yellow fill and black stroke, though the code currently only renders the face without other facial features. The example demonstrates basic React integration with SVG for simple geometric visualization, relying on React 17 and ReactDOM from unpkg.

Apr 2, 2021