Jane

@gyk-jane·4 public vizzes

react components & es6

This example shows a simple smiley face rendered as an SVG, built with React components and ES6 syntax. The face consists of a yellow circle, two dark eye circles, and a mouth arc, all sized and positioned relative to the window dimensions. React 16.9 manages the component structure, while d3.v7 provides the `arc` generator to create the mouth’s path. The SVG is drawn with fixed pixel width and height, centered on the page, and uses stroke and fill attributes for styling.

Mar 16, 2022

Loading thumbnail…

Fork of Smiley Face Part III

A React-rendered SVG smiley face scales to fill the browser window using viewport dimensions. The face is composed of D3-generated shapes: a yellow circle for the head, two offset black circles for eyes, and a mouth drawn with the `d3.arc()` path generator. A `<g>` element applies a transform to center all coordinates, while the arc’s inner and outer radii and start/end angles define the mouth’s curved shape. The code uses React 16.9 and d3.v7.

Mar 16, 2022

Loading thumbnail…

Smiley Face Part II

A yellow smiley face is drawn as an SVG circle with two smaller circles for eyes, centered on a 960×500 canvas. The face fill is yellow with a black stroke, and the eye positions are computed from the center using fixed offsets. The React app renders the SVG elements declaratively via ReactDOM, using JSX to define the `<circle>` components with inline style attributes. The rendering approach demonstrates a simple, static data visualization using React’s component model and SVG primitives without any external data source or interaction.

Mar 7, 2022

Loading thumbnail…

Smiley Face Part I

A yellow circular face with a black outline and two dark eyes is centered on an empty SVG canvas. The eyes are positioned asymmetrically, with the left eye offset from the vertical center. The example uses raw SVG elements—specifically three `circle` tags—with explicit `cx`, `cy`, and `r` attributes to define the shapes. The rendering is static, with no animation or interactivity. The page is contained in a single HTML file with minimal CSS to hide scrollbars, and the SVG viewport is set to 960 by 500 pixels.

Mar 2, 2022