AndreRGunawan

@AndreRGunawan·5 public vizzes

Make a Face Part 5 - Multiple Files with ES6 Modules

This example draws a simple face composed of three SVG elements: a yellow background circle, two black eyes, and a mouth arc. The component uses React for JSX-based rendering and d3’s `arc` generator to define the mouth’s path. Hard-coded constants control dimensions and spacing, with all shapes centered via a group transform. The visualization demonstrates combining React components with ES6 modules and d3.v7 for static SVG composition.

Sep 21, 2021

Loading thumbnail…

Make a Face Part 4 - React Component & ES6

This example constructs a smiling face using React components and D3’s `arc` generator. A yellow background circle with a black stroke forms the head, while two smaller circles serve as eyes and a curved path creates the mouth. The code defines a `BackgroundCircle` component and renders the `App` component with SVG elements, using ES6 syntax and React 16.9, with D3 v7 for the mouth’s arc path. The face is centered via a `g` transform, and fixed dimensions of 960 by 500 pixels define the SVG canvas.

Sep 21, 2021

Loading thumbnail…

Data | Make a Face Part 3 - Smiley with D3

A yellow smiley face rendered in SVG shows two black eyes and an open curved mouth against a circular yellow head with a black stroke. The face is built using React and D3 v7, with the mouth generated through a d3.arc() path using defined inner and outer radii and start and end angles. Eye positions are offset from the center, while the head radius derives from half the height minus stroke width, all within a 960 by 500 viewport.

Sep 12, 2021

Loading thumbnail…

Data | Make a Face Part 2 - React

This example visualizes a face using geometric shapes—a yellow circle for the head and two smaller black circles for eyes—composed with React and rendered as SVG. It positions each element relative to fixed center coordinates and offset constants, using a stroke to outline the head. The code relies on React 16.9 and ReactDOM to mount the App component into the DOM, drawing all shapes declaratively with SVG circle elements.

Sep 9, 2021

Loading thumbnail…

Data | Make a Face with HTML, CSS, SVG

A simple SVG face is drawn with three circles: a yellow head with a black stroke and two black eyes. The example demonstrates basic SVG shape rendering within an HTML page, using a fixed 960 by 500 canvas and hardcoded coordinates. No JavaScript or external libraries are used; only the SVG `circle` element and inline CSS control the layout and hide page overflow. The face is static, with no interaction or animation, serving purely as a minimal illustration of vector graphics markup.

Sep 7, 2021