wl328Weiminli

@wl328Weiminli·5 public vizzes

follow the mouse

A single circle follows the mouse cursor across a 960 by 500 SVG canvas. The example demonstrates interactive SVG rendering in React, updating the circle's `cx` and `cy` attributes on every `MouseMove` event. It uses React’s `useState` hook to store the cursor's client coordinates and re-renders the circle accordingly. The code relies on React 17 and ReactDOM to manage the SVG element, with no D3 functions invoked beyond the imported `arc`, which is unused in the final visualization.

Aug 23, 2021

Loading thumbnail…

Fork of SVG Fundamentals

This example fetches a CSV file of CSS named colors from a GitHub gist and logs its contents to the browser console. The page uses the Fetch API with async/await to retrieve the text data, though it does not yet render any visualization or display the parsed colors. The code demonstrates a minimal setup for loading external tabular data, with an empty SVG placeholder and no drawing logic implemented.

Aug 22, 2021

Loading thumbnail…

Fork of smile face part III

This example renders a smiling face using React and SVG, drawing a yellow circle for the head, two black circles for eyes, and a curved path for the mouth. The facial features are positioned relative to the center of a 960×500 viewport, and the mouth shape is generated using `d3.arc` to define an annular segment with specified inner and outer radii and angles. The illustration demonstrates basic SVG shape composition with a React component, using `d3.v7` for the arc geometry.

Aug 21, 2021

Loading thumbnail…

smile face part II

This example shows a classic smiley face built entirely from SVG shapes, with a yellow circular head, black outline, two eyes, and a curved mouth arc. Rendered in a React component, the visualization uses D3’s `arc` generator to define the mouth’s path with inner and outer radii and angular start and end points. The `svg` element is centered via a `g` transform, and circles are positioned using absolute coordinates and specified stroke width. The code relies on ReactDOM for rendering and D3 v7 for the arc geometry, producing a static, composition-based graphic.

Aug 21, 2021

Loading thumbnail…

smile face part one

A yellow circle with a thick black outline fills the center of an SVG canvas, while two smaller black circles sit at the upper left and right inside it. The example demonstrates basic SVG shape rendering using inline `<circle>` elements with explicit `cx`, `cy`, `r`, `fill`, and `stroke` attributes. The page uses no external JavaScript libraries, relying solely on static SVG markup within an HTML document. The rendering approach is direct SVG, with a 960 by 500 viewport and no interactive or animated behavior.

Aug 21, 2021