PharmaSofty

@PharmaSofty·3 public vizzes

Fork of Smiley Face Part II

A full-screen yellow smiley face with black outlined eyes is rendered as an SVG, centered within the browser window. The face dynamically scales to the viewport’s dimensions, using the window’s inner height to set the face radius and stroke width. The React application uses `ReactDOM.render` to mount a component that defines the SVG circles for the face and eyes, with coordinates calculated relative to the window’s center. The example demonstrates responsive SVG drawing with React and the React DOM API.

Jun 12, 2022

Loading thumbnail…

Rien Smiley Face Part IV

A yellow smiley face is drawn in SVG using a React component, with two black eyes and a thick arc-shaped mouth. The visualization relies on D3’s `arc` generator to compute the mouth path, while static circles and a background circle are defined directly in JSX with explicit radius and stroke attributes. Rendering is handled by React (v16.9) and D3 (v5), with the layout centered on a 960×500 viewport. The example demonstrates combining React’s declarative component model with D3’s shape helpers for simple geometric visualization.

Jun 5, 2022

Loading thumbnail…

Lesson1

This example demonstrates basic SVG shapes and text manipulation using D3.js. It renders a large yellow circle with a black stroke and a smaller unfilled circle on a 960×500 SVG canvas. The code imports `select` from D3 via UNPKG to set the text content of a message element to “Hello VizHub!”. It also imports a local ES6 module, `myMessage`, to provide the message string. The static SVG markup defines the circles directly in `index.html`, while the D3 selection targets a `#message` div, highlighting both DOM-based rendering and module imports.

Mar 6, 2022