yushen

@Yushen-Wang·8 public vizzes

Fork of Mouse Follower

An interactive React application renders an SVG circle that follows the mouse cursor. The code tracks pointer position through an SVG `onMouseMove` event handler, updating React state via the `useState` and `useCallback` hooks to reposition the circle. Rendering uses React 16.9 and ReactDOM, with the circle initially centered at 480,250 on a 960x500 canvas. No external charting libraries are used; the visualization relies purely on declarative JSX and SVG elements to demonstrate reactive mouse tracking.

Apr 24, 2021

Loading thumbnail…

Fork of Smiley Face Part II

This example shows a responsive smiley face rendered as a single SVG, with a yellow circular head, two black eyes, and a black stroke outline. The face is centered dynamically based on the browser window’s dimensions, and the eye positions and mouth radius are defined as constant offsets. The code uses React and ReactDOM to create SVG elements, with the `width` and `height` set to `window.innerWidth` and `window.innerHeight`. The face is drawn using `<circle>` elements, with the head’s radius dependent on the viewport height, ensuring it scales to fill the screen.

Apr 24, 2021

Loading thumbnail…

Fork of Promise function practise

This example demonstrates a minimal HTML page that fetches COVID-19 daily report data from a GitHub-hosted CSV file using the Fetch API and async/await syntax. The `fetchText` function retrieves the raw CSV text and passes it to a placeholder `<Chart data={res} />` component, though the chart itself is not implemented. The page displays static text “Hello HTML” alongside commented-out CSS styling, and relies on React for rendering, though no actual visualization or data processing occurs beyond the network request and console logging.

Apr 24, 2021

Loading thumbnail…

2nd Fork of Let's Make a Face Part I

The example renders a grid of procedurally generated abstract faces, each composed of a pink circle with black stroke, two offset eyes, and a mouth drawn as a d3 arc path. React components (`BackgroundCircle`, `Eye`, `Mouth`, `Face`) compose the SVG elements, while `d3.range` generates 18 face instances with randomized properties like stroke width, eye position, and mouth radius. The code uses d3.v6’s `arc` API for the mouth shape and React’s `ReactDOM.render` for mounting.

Apr 23, 2021

Loading thumbnail…

2nd Fork of Smiley Face Part II

This example shows a yellow smiley face centered on a full-screen SVG canvas, with two black eyes and no visible mouth. The face is drawn responsively based on the browser window’s width and height, using React to render SVG circle elements. It relies on the `react` and `react-dom` libraries to mount the component into the DOM, with hardcoded offsets for eye placement and radii for the face and eyes. The code also includes commented-out static SVG markup for reference, though the active version uses dynamic React props.

Apr 20, 2021

Loading thumbnail…

Fork of Smiley Face Part II

This example uses React with D3.js to draw a stylized smiley face in SVG. It shows a yellow circle with a black outline, two black eye circles, a curved smile drawn as an arc, and a straight line for a nose. The code constructs the shapes using D3’s `arc()` and `line()` generators, while React renders the SVG elements. The face is centered via a transform, and all dimensions and positions are defined with constant values, producing a static illustration without interaction.

Apr 17, 2021

Loading thumbnail…

Fork of Smiley Face Part II

This example shows a responsive smiley face drawn with React and rendered as SVG. The face fills the browser window, scaling its radius based on window height, with eyes offset symmetrically from center. The code uses React’s `createElement` and `ReactDOM.render`, setting circle attributes like `cx`, `cy`, `r`, and `stroke-width` within an SVG container. Static values for eye radius, offset, and mouth dimensions are defined as constants, while the face itself adapts to viewport size. No animation or interaction is present; it is a static visualization of geometric primitives.

Apr 16, 2021

Loading thumbnail…

My first html artpiece!

A cheerful face drawn entirely with SVG circles fills the viewport: a large yellow head with black eyes, a red nose, pink cheeks, and round ears. The composition is static and playful, using simple geometric shapes to create a character. Rendered directly in an HTML document, the artwork relies on SVG circle elements with explicit `cx`, `cy`, `r`, `fill`, and `stroke` attributes, styled by minimal CSS to remove margins and hide overflow.

Apr 14, 2021