dreidrachen

@dreidrachen·6 public vizzes

Fork Smiley face to many faces

This example renders a customizable smiley face using React and D3. The face is composed of separate components for the background circle, eyes, and mouth, with the mouth drawn using the d3.arc path generator. The FaceContainer component translates the entire face to the center of the SVG canvas. While the current code displays a single face, the component’s many configurable parameters—such as eye offset, radius, and mouth width—demonstrate how the same structure could be forked into multiple faces with different expressions.

Mar 16, 2021

Loading thumbnail…

Fork of Smiley face part 1 cooler face

This example shows a stylized smiley face rendered as an SVG using React and D3. The face consists of a yellow background circle, two eyes, and a mouth drawn with an arc generator from D3. The components are modular, with separate React components for the face, eyes, mouth, and background circle, all composed within a face container that applies a transform to center the graphic. The mouth uses `d3.arc()` with specified inner and outer radii and angles to create a curved smile shape.

Mar 15, 2021

Loading thumbnail…

Smiley face part 1

This example shows a smiley face constructed from basic SVG shapes in a React component. It renders a yellow circle with a black stroke for the face, two black circles for eyes, and a curved mouth generated with the `arc` function from D3. The `transform` attribute positions the face group at the center of the 960 by 500 pixel SVG canvas. React manages the component structure, while D3 version 6 handles the arc path calculation using specified inner and outer radii and start and end angles.

Mar 11, 2021

Loading thumbnail…

Fork of HTML Starter

This example presents a minimal static web page that displays the text “Hello HTML” in the browser, styled with CSS to appear at a very large font size. The page’s only dynamic behavior is a JavaScript statement that logs “Hello JavaScript!” to the browser’s developer console. It uses plain HTML, CSS, and JavaScript, with no external libraries or data sources.

Mar 9, 2021

Loading thumbnail…

Fork of React + D3 Viz Starter my copy

This example shows a blank visualization scaffold created with React and D3 v6, rendered as SVG. The reusable `VizContainer` component abstracts SVG and group elements while following the margin convention, displaying gray outer and inner rectangles to visualize the layout boundaries. The code uses React 16 and ReactDOM to render the component, with dimensions and margins defined as constants. The `showMargins` prop toggles the debug rectangles, and the inner group is translated by the margin values to position content correctly.

Mar 9, 2021

Loading thumbnail…

Fork of Let's Make a Face Part I copy

A static SVG drawing of a smiley face, built directly in the HTML markup without any JavaScript libraries. The image shows a large yellow circle for the head, outlined in black, with two smaller black circles representing the eyes positioned on the upper half. The `index.html` file uses raw SVG elements—`<circle>` tags with explicit `cx`, `cy`, and `r` attributes—to compose the face on a 960×500 canvas. No data source or interactive behavior is present; the rendering relies solely on hand-coded SVG coordinates.

Mar 9, 2021