janmakar1

@janmakar1·4 public vizzes

Lets make a Smiley part 4: React Components and ES6

A React application renders a smiley face as a static SVG graphic, composed of a navajowhite circle with a black stroke, two eye circles, and a mouth arc. The code uses d3.arc to generate the mouth's path, defining its inner and outer radii and start/end angles. React components define the background and main SVG structure, while the app is mounted to the DOM via ReactDOM.

Aug 29, 2020

Loading thumbnail…

Lets make a Smiley part 3: D3js and arcs in SVG

This example renders a smiley face using D3.js and React, with SVG elements composed from circles and an arc-based mouth. It demonstrates the D3 `arc()` generator to create a thick, crescent-shaped mouth by specifying inner and outer radii along with start and end angles. The face is drawn with a navajowhite circle for the head, black stroke for the outline, and two smaller circles for eyes, all positioned via SVG transforms and centered coordinates. The code uses React for the component structure and D3 v6 for arc generation, rendering entirely through SVG within a light blue background.

Aug 27, 2020

Loading thumbnail…

Lets make a Smiley part 2: React

A React-based smiley face rendered as scalable vector graphics, drawn with three circles: a large head and two eyes. The example demonstrates React component structure and JSX syntax for declarative SVG creation, with dimensions and positions stored as JavaScript constants. It uses React 16.9 and ReactDOM to mount the component into the DOM, with CSS styling for the lightblue background.

Aug 26, 2020

Loading thumbnail…

Lets make a Smiley part 1

A static SVG smiley face is drawn on a light blue background, showing a large navajowhite circle with a black outline serving as the face, alongside two smaller black circles as eyes. The HTML page loads no external libraries, relying entirely on inline SVG elements with explicit coordinate and radius attributes. The rendering is hardcoded in the index.html file, using the standard SVG `<circle>` API directly within the markup, with no animation or interaction present.

Aug 26, 2020