Konstantinos Kotsiaridis

@kkotsiaridis·5 public vizzes

Fork of Smiley Face Part III

This example shows a modular, reusable smiley face built as a React component hierarchy, composed of separate circle and arc elements for the background, eyes, and mouth. It demonstrates how to combine React’s declarative component model with D3’s `arc` generator to produce SVG shapes. The `Face` component assembles the `FaceContainer`, `BackgroundCircle`, `Eyes`, and `Mouth` subcomponents, with all geometry controlled via props such as `eyeOffsetX`, `eyeRadius`, and `mouthRadius`. The resulting SVG is rendered to the DOM using `ReactDOM.render` with fixed pixel dimensions.

Jan 8, 2024

Loading thumbnail…

Fork of Fork of Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by rendering a yellow smiley face in SVG. The face includes two eyes, a mouth drawn using the `d3.arc` path generator, and rectangular eyebrows that animate vertically via chained `transition` calls with a 2-second duration each. The animation toggles the eyebrows up and down repeatedly, showing how D3’s selection methods and attribute updates, such as `attr` and `transition`, modify SVG elements over time. The code uses D3 v5 and imports `select` and `arc` from the library.

Jan 8, 2024

Loading thumbnail…

Smiley Face

A yellow smiley face rendered as a static SVG drawing. The face consists of a large yellow circle with a black outline for the head, and two smaller solid black circles positioned as eyes on a 960×500 canvas. The code uses raw SVG elements—`circle` tags with explicit `cx`, `cy`, `r`, `fill`, and `stroke` attributes—placed directly in an HTML file with no JavaScript or external libraries. The rendering is entirely declarative, showing a simple data-visualization-free illustration using only inline SVG markup.

Nov 24, 2023

Loading thumbnail…

Smiley Face

A yellow smiley face is drawn as a static SVG composition. The code uses D3's `arc` API to generate the mouth as a half-ring path, with the `startAngle` and `endAngle` set to create a semicircle. React 18 components render the head and eyes as simple circles, and the entire drawing is centered via a transform. The visualization demonstrates a procedural, code-defined approach to creating a familiar icon, with the background circle and facial features defined as primitive shapes.

Sep 1, 2023

Loading thumbnail…

Fork of HTML Starter

This example displays the text “Hello HTML!” centered on a blank page, styled with large font size and centered alignment. It demonstrates a minimal web page setup using raw HTML, CSS, and JavaScript, without any external libraries. The styling is applied through a CSS class selector, and the page structure is defined directly in the HTML body. This serves as a bare-bones starter template for building more complex visualizations, contrasting with the React Starter example it references.

Aug 23, 2023