max12525k

@max12525k·4 public vizzes

Fork of Smiley Face Part II

This example shows a simple interactive SVG visualization built with React. It renders a single yellow circle at the center of a 960x500 viewport, and the `onMouseMove` handler logs the cursor’s client coordinates to the console. The code uses React 16.9 and ReactDOM to mount the SVG element, with the circle’s position and radius defined as constants. No data source is used, and the rendering relies entirely on declarative SVG props.

Aug 29, 2021

Loading thumbnail…

Fork of Mouse Follower

A circle follows the mouse cursor inside an SVG canvas, moving to the exact pixel coordinates of the pointer. The visualization uses React with a `useState` hook to track the mouse position, updating on every `onMouseMove` event fired by the SVG element. The circle’s center and radius are set via SVG attributes, and the chart is rendered through ReactDOM into an HTML div. The code is a React-based fork of a mouse-follower example, using the standard React event handling system for interaction.

Aug 29, 2021

Loading thumbnail…

Loading and parsing CSV Data

This example demonstrates how to load and parse CSV data in a React application using the Fetch API and async/await syntax. It fetches a CSS Named Colors dataset from a GitHub gist URL, parses the text response, and logs the raw CSV content to the browser console. The visualization itself is minimal, focusing on the data-loading workflow rather than rendering graphics, with the code showing a `fetchText` function that handles the asynchronous request and returns the text via `response.text()`. The example serves as a foundational step for integrating external tabular data into a React-based visualization pipeline.

Aug 29, 2021

Loading thumbnail…

Smiley Face Part 1

A smiling face is drawn as a yellow SVG circle with black stroke, two black eyes, and a curved mouth. The face is assembled from React components, with the head, eyes, and mouth positioned relative to a center point. The mouth uses d3.arc to create a half-circle path, while the face container translates the SVG group to center the drawing. All parameters, such as eye offset and mouth radius, are passed as props to control the face’s proportions.

Aug 28, 2021