shirakumo155

@shirakumo155·5 public vizzes

Fork of Mouse Follower

A single circle follows the mouse cursor across an SVG canvas. The visualization uses React's `useState` and `useCallback` to track the cursor's `clientX` and `clientY` coordinates, updating the circle's `cx` and `cy` attributes in real time. The SVG element has a fixed width of 960 and height of 500, with the circle's radius set to 30. The code renders the SVG directly via ReactDOM and a `bundle.js` script, with the initial mouse position centered on the canvas.

May 31, 2023

Loading thumbnail…

Fork of Smiley Face Part III

A grid of eighteen smiley faces rendered with React and D3 v5 shows a playful variation in facial features. Each face, composed of SVG circles and a D3 arc path for the mouth, uses randomized eye radius, mouth width, and mouth radius values to create unique expressions within a fixed layout. The React components structure the SVG, while D3’s `arc()` API generates the mouth shape.

May 31, 2023

Loading thumbnail…

Fork of Hello HTML

A fork of the block “Hello HTML” renders a yellow smiley face as an SVG using React and D3. It shows a circular head with black stroke, two eyes, and an arc-based mouth drawn via the `d3.arc` generator. The code uses React 16.9 for component structure and `d3.arc` to compute the mouth path, with all SVG shapes positioned relative to a central transform. Rendering is client-side in a browser, with the root element mounted through `ReactDOM.render`.

May 31, 2023

Loading thumbnail…

Fork of Cars report

This example displays the text “Hello World” in a large, centered layout on a plain HTML page. It uses React and JavaScript to parse a small inline JSON dataset of car records, though the data is not currently visualized. The page renders through a bundled script, with CSS controlling the 13em font size and centered alignment. The code demonstrates a minimal integration of React with static data, relying on standard DOM manipulation via `getElementById`.

Oct 31, 2022

Loading thumbnail…

Cars Report

This example displays a static “Hello World” message in a web page. The visualization shows the text inside a `<pre>` element, which is targeted by a simple JavaScript script. The code uses the Document Object Model (DOM) API, specifically `document.getElementById`, to locate the element and set its `textContent` property. The underlying data is a hardcoded string in the JavaScript source file, rendered as plain text without any graphical or interactive components.

Oct 31, 2022