dandindan

@dandindan·7 public vizzes

Smiley Face Part IV

This example draws a classic smiley face using React and D3 v5, rendered as SVG. The face consists of a yellow circle with a black stroke, two eyes, and a mouth created with D3’s `arc` generator, using specified start and end angles. The React component structures the SVG elements, while D3 provides the path for the mouth arc. The code demonstrates a hybrid approach, importing React for component-based UI and D3 for geometric calculations.

Apr 30, 2020

Loading thumbnail…

Smiley Face Part II

A cartoon smiley face is drawn in SVG on a yellow circular background, rendered with React. The face combines two separate components: `Eyes` and `Smile`, each containing layered paths and ellipses with CSS classes that define gradients and flat colors. The `index.js` file positions these components with SVG `transform` attributes, applying translations, rotations, and scaling to compose the final image. The rendering uses React’s `ReactDOM.render` to mount the SVG into the DOM.

Apr 30, 2020

Loading thumbnail…

Smiley Face Part V

A stylized smiley face is rendered as layered SVG artwork, combining a yellow background circle with detailed, multi-colored eyes and a wide smile composed of numerous paths. The example demonstrates modular component design in React, where each facial feature is a separate ES6 module, such as `BackgroundCircle`, `Eyes`, and `Smile`, composed within a root `<svg>`. The code imports `arc` from `d3` for a mouth component, though it is currently unused, and positions all elements using SVG transforms and JSX.

Apr 30, 2020

Loading thumbnail…

Smiley Face Part V

A yellow smiley face with detailed eyes and a wide mouth is rendered as an SVG. The visualization combines React components for modularity, with separate files for the background circle, eyes, mouth, and smile. It uses D3.js for path generation, specifically the `arc` function for the mouth shape. The code imports React, ReactDOM, and D3, and renders the final composition by positioning the components within an SVG canvas using transforms.

Apr 27, 2020

Loading thumbnail…

Let's Make a Face Part I

A stylized SVG illustration builds a partial face from layered vector shapes, stopping at a smiley’s mouth with closed curves. The page uses inline SVG paths and CSS classes to define fills and strokes, while a hidden `<g>` transform positions the face elements. The code does not load external data or use a JavaScript library; instead, it relies on static markup and embedded style rules for rendering.

Apr 27, 2020

Loading thumbnail…

Smiley Face Part VI

This gallery example displays a grid of smiley faces, each with randomized facial feature sizes and positions. Built with React components and ES6 modules, it renders SVG circles and paths for the face, eyes, and mouth. The code imports the `arc` function from D3 to generate the mouth’s arc path, while React’s `range` from D3 is used to create the array of faces. Each face is wrapped in an SVG container with a translated group, demonstrating reusable component composition and declarative SVG rendering within a React framework.

Apr 26, 2020

Loading thumbnail…

Smiley Face Part III

A yellow SVG smiley face is drawn on a 960-by-500 canvas, featuring large circular eyes with white highlights, red lips, arched brows, and a wide open mouth. Built with React for component structure and D3 v5 for generating arc paths, the face is centered using a translated `<g>` group and styled with explicit stroke and fill attributes. The code uses `d3.arc()` to create the mouth and lip arcs, while eye and brow shapes are composed from multiple circles and custom arc paths, all rendered declaratively as JSX within a React component.

Apr 22, 2020