hashemalkak

@hashemalkak·5 public vizzes

Smiley face part I

A simple SVG smiley face rendered with React 17 and ReactDOM displays three circles on a 960-by-500 canvas: a large yellow face with a black stroke, and two smaller black eyes positioned symmetrically. The code directly embeds the SVG markup in the HTML file, while index.js imports React and ReactDOM, logging the latter to the console without mounting any components. This static example shows only the face and eyes; no mouth or other features are included, hence the title "Half way towards a smiley face."

Nov 12, 2020

Loading thumbnail…

Smiley face part I

A yellow circle with a black outline forms a face, accompanied by two smaller black circles positioned as eyes, on a blank canvas. The visualization is built using raw SVG elements within an HTML file, with no external libraries. The circle positions and radii are set via SVG attributes like `cx`, `cy`, and `r`, while the rendering appears as static vector graphics. The code defines the shapes directly, creating a simple, smiling face from basic geometric primitives.

Nov 12, 2020

Loading thumbnail…

Mouse Follower

A circle follows the mouse cursor across an SVG canvas, updating its position in real time. The visualization uses React state management with the `useState` hook to track mouse coordinates, which are captured via the SVG element's `onMouseMove` event handler. The circle is rendered as an SVG `<circle>` element, with its `cx` and `cy` attributes bound to the current mouse position. The example demonstrates simple interactive rendering in React, with no external data sources, relying solely on user input to drive the visualization.

Oct 12, 2020

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates loading a remote CSV file from a GitHub Gist and parsing its contents using the Fetch API. It fetches the text of the `cssNamedColors.csv` file, logs the raw CSV string to the browser console, and displays a blank HTML page. The code uses `fetchText`, a custom asynchronous helper function that calls `fetch` and `response.text()`. No chart or visual rendering occurs; the focus is solely on the data-loading and parsing workflow.

Oct 12, 2020

Loading thumbnail…

Smiley Face Part I

This visualization shows a static yellow smiley face composed of SVG circles and an arc for the mouth, centered within a 960×500 viewport. The face is constructed from React components that define the background, eyes, and mouth, with the mouth using d3's `arc` generator to create a semi-circular path. The component hierarchy passes parameters like eye offset, radius, and stroke width to control the face's proportions, while the `FaceContainer` wraps everything in an SVG group translated to the canvas center.

Oct 7, 2020