paulmojicatech

@paulmojicatech·3 public vizzes

React Move with Smiley

A React application renders a single small circle that follows the mouse cursor inside an SVG canvas. The code uses the React `useState` hook to track the cursor's client coordinates, updating the circle's `cx` and `cy` attributes on every `onMouseMove` event. The SVG is 960 by 500 pixels, and the circle has a fixed radius of 30. The page loads React and ReactDOM from the unpkg CDN, while the application itself is compiled into `bundle.js`.

Dec 13, 2022

Loading thumbnail…

Parse CSV Data

This example demonstrates a minimal HTML page that parses CSV data using CSS and JavaScript. The code renders a large “Hello HTML!” message with a 13em font size, centered on the page. It relies on standard web technologies—HTML for structure, CSS for styling, and JavaScript for data parsing—without external libraries or frameworks. The styling is applied via a `<style>` block in the document head, and the message is displayed in a `<div>` element. The example serves as a bare-bones starter for handling CSV content in a browser environment.

Dec 1, 2022

Loading thumbnail…

Smiley Face Pt 1

The example displays a grid of eighteen smiling faces, each rendered as a yellow circle with black eyes and a mouth, using React components for the face parts and SVG for drawing. The d3 arc API generates the mouth path, while React maps over a d3.range array to create multiple faces. Eye radius and mouth width vary randomly per face, and a FaceContainer wraps the SVG elements inside a translated group.

Dec 1, 2022