DaljeetSingh1320

@DaljeetSingh1320·14 public vizzes

Fork of Mouse Follower

A yellow circle follows the mouse cursor within an SVG canvas. The interactive visualization demonstrates React state management and event handling, updating the circle’s position in real time as the pointer moves. It uses React’s `useState` and `useCallback` hooks, with mouse coordinates captured via `onMouseMove` and rendered through SVG elements. The circle’s `cx` and `cy` attributes are bound directly to the current mouse position, providing immediate visual feedback.

Jul 31, 2023

Loading thumbnail…

Mouse Follower

A black circle follows the mouse as it moves across a blank 960×500 SVG canvas. The example shows how React state updates, triggered by mouse events, can drive SVG attribute changes in real time. The React component `App` uses the `useState` hook to store the pointer’s `clientX` and `clientY` coordinates, updating them via a `handleMouseMove` callback on the `<svg>` element’s `onMouseMove` event. The circle’s `cx` and `cy` properties are bound directly to this state, rendering with d3.v7 and ReactDOM.

Jul 31, 2023

Loading thumbnail…

Fork of Fork of Smiley Face Part 2

This example shows a yellow smiley face built from SVG shapes, with two black eyes and an upward-curving mouth drawn as an arc. The face is centered in a 960×500 viewport, using a circle for the head, smaller circles for the eyes, and a `d3.arc` path for the mouth. The code combines React 18 for rendering with D3 v7’s `arc` API, computing radius and offsets relative to the center, and applies a stroke to the outer circle. All elements are grouped and translated to the center for positioning.

Jul 31, 2023

Loading thumbnail…

Fork of Fork of Fork of Simley face complete separate components

Five identical smiley faces are rendered in a row, each composed of a yellow circle background, two black eye circles, and a mouth drawn as an arc. The React components `Face`, `BackgroundCircle`, `Eyes`, and `Mouth` are assembled within an SVG `FaceContainer`. Using `d3.arc`, the mouth path is generated with specified inner radius and start/end angles, while `d3.range` creates the array of five faces.

Jul 31, 2023

Loading thumbnail…

Fork of Loading and Parsing CSV data

This example demonstrates loading and parsing CSV data from a remote URL. It fetches a raw text file containing named CSS colors using the Fetch API, specifically calling `fetchText` with an async/await pattern to retrieve the content and log it to the browser console. The code defines a custom function that wraps `response.text()` to handle the asynchronous request. No visualization is rendered on the page; the focus is solely on the data-loading step, showing how to retrieve and inspect the CSV text before any further processing or chart creation.

Jul 31, 2023

Loading thumbnail…

Loading and Parsing CSV data

This example demonstrates how to fetch and parse CSV data in a web page using the Fetch API. The code defines an asynchronous function, `fetchText`, that retrieves a remote CSV file from a GitHub Gist containing CSS named colors, then logs the raw text to the browser console. The visualization shows the raw CSV output without any transformation or rendering, using vanilla JavaScript and the native `fetch` and `response.text()` methods.

Jul 31, 2023

Loading thumbnail…

Fork of Smiley face complete

Five identical smiley faces render in a row, each built from a yellow background circle, two black eyes, and a curved mouth. The visualization demonstrates component reuse in React with D3’s arc generator for the mouth path. Data is derived from a D3 range function that produces five iterations, and rendering uses SVG elements within a React component hierarchy. The example relies on React 18, D3 v7, and SVG transforms to position facial features.

Jul 31, 2023

Loading thumbnail…

Fork of Fork of Simley face complete separate components

Five identical smiley faces, each built as a composition of separate React components, repeat down the SVG canvas. The `Face` component assembles a yellow `BackgroundCircle`, two `Eyes`, and a `Mouth` whose arc is generated with the d3 `arc` API (using an inner and outer radius, plus start and end angles). The `Mouth` path is rendered inside a `FaceContainer` that applies a translate transform. Rendering uses React 18, D3 v7, and an SVG group for positioning.

Jul 31, 2023

Loading thumbnail…

Fork of Simley face complete

This example builds a smiley face using React and D3.js, rendered as SVG. The visualization shows a yellow circle with a black outline, two dark eyes, and an arc-shaped mouth. The code constructs the face by passing parameters for radius, offsets, and stroke width to separate React components. The mouth uses D3’s `arc()` API to generate a path with inner and outer radii, while the eyes and background circle are positioned relative to the SVG’s center using a transform.

Jul 31, 2023

Loading thumbnail…

Simley face complete

A smiley face is drawn in SVG using React and D3.js, with a yellow circular head, black outline, two eyes, and a curved mouth arc. The face is centered on a 960x500 canvas, with the head radius calculated from the height and stroke width. The eyes are positioned using offsets from the center, and the mouth is generated using D3's `arc` function to create a semi-circular path with specified inner and outer radii. The code demonstrates a declarative React component structure for SVG rendering.

Jul 28, 2023

Loading thumbnail…

Fork of Fork of Smiley Face Part 1

This example shows a yellow circle with a black outline, drawn as the first step toward a smiley face, alongside two smaller black circles positioned as eyes. The visualization uses React and renders directly with SVG elements. The code sets the main face radius based on the canvas height and stroke width, though the eye positions are hardcoded. The page loads React 18 via a CDN link and logs the React object to the console, while the SVG markup defines each circle’s center and radius. The data source is static and built entirely within the HTML file.

Jul 27, 2023

Loading thumbnail…

Fork of Smiley Face Part 1

This example shows a simple yellow smiley face drawn as a static SVG graphic, with two black eye circles positioned on a larger yellow circle. The code uses plain SVG elements in React, including a main circle with a yellow fill and black stroke, plus two smaller unfilled circles for eyes. The rendering approach relies on hardcoded SVG coordinates and properties in index.html, with React loaded from a CDN and logged to the console. The visualization demonstrates basic geometric composition without interactive behavior or data binding.

Jul 27, 2023

Loading thumbnail…

Smiley Face Part 1

A simple vector smiley face built with SVG primitives. The visualization uses two circles for the eyes and a larger circle for the face, all styled directly in the HTML markup. The SVG canvas is set to 960 by 500 pixels, with the main face circle centered and the eyes offset horizontally. The code establishes the basic facial structure without a mouth, representing the first step toward a complete smiley face. No JavaScript or external libraries influence the rendering, which is purely static SVG.

Jul 27, 2023

Loading thumbnail…

Fork of D3 Starter

A simple SVG face built from three circles—a yellow head with two smaller black eyes—demonstrates basic D3 version 7 usage. The markup is drawn directly in the HTML, not generated by data joins. The accompanying JavaScript imports `select` from the `d3` package and sets static text on the page, while a YouTube tutorial explains D3 fundamentals. The example shows minimal setup without interactive or animated behavior, focusing on initializing a D3 project and rendering static SVG shapes.

Jul 27, 2023