B

bhavani44

@bhavani44·18 public vizzes

Loading thumbnail…

Fork of Smiley Face Part II

A React app renders a single SVG circle that tracks the mouse position across the full viewport. The circle changes its coordinates based on the pointer's clientX and clientY values, using React's useState and useCallback hooks to manage and update that state. The visualization is built with React 16.9 and D3 v7, although the code does not utilize any D3-specific functions. The example demonstrates a basic interactive SVG rendering approach where the circle follows the cursor in real time, with no additional data sources or complex animations involved.

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates the process of loading and parsing CSV data in a React application, specifically fetching a dataset of CSS named colors. The visualization shows the raw text output retrieved from a remote source, logged to the browser console for inspection. It uses the Fetch API with async/await syntax to handle the network request, first fetching the data as text before further processing. The code includes commented-out alternatives using promise chains, and can be adapted to parse the CSV into structured objects for future visualization.

Loading thumbnail…

Fork of Loading Data with React & D3

This example demonstrates a minimal React and D3 integration for loading and summarizing CSS named color data from a remote CSV file. The app uses React hooks `useState` and `useEffect` to manage asynchronous data loading, invoking `d3.csv` to fetch the dataset. Once loaded, it displays a text summary generated by a custom `message` function that reports the file size in kilobytes, row count, and column count using `d3.csvFormat` and `data.columns`. While waiting, the interface shows a “Loading…” placeholder.

Loading thumbnail…

Fork of Mouse Follower

A circle sits at the center of an SVG canvas in a React application. As the mouse moves over the canvas, the circle remains stationary while the console logs the cursor’s clientX and clientY coordinates. The code uses React hooks like useState and useCallback, though only the onMouseMove event handler is implemented. The rendering uses ReactDOM to mount an SVG element with a single circle, demonstrating basic event handling within a React-based visualization without any animation or movement.

Loading thumbnail…

Fork of Mouse Follower

An interactive React application displays a single circle that follows the mouse cursor across an SVG canvas. The code tracks pointer movement through React’s `useState` and `useCallback` hooks, updating the circle’s `cx` and `cy` attributes on every mouse event. Built with React 16.9 and rendered via ReactDOM, it demonstrates a simple state-driven visualization without any external animation or data libraries. The SVG viewport is fixed at 960 by 500 pixels, with the circle starting at the center until the user moves the mouse.

Loading thumbnail…

Fork of Mouse Follower

An interactive React application displays a single circle that follows the mouse cursor across an SVG canvas. The code tracks pointer movement through React’s `useState` and `useCallback` hooks, updating the circle’s `cx` and `cy` attributes on every mouse event. Built with React 16.9 and rendered via ReactDOM, it demonstrates a simple state-driven visualization without any external animation or data libraries. The SVG viewport is fixed at 960 by 500 pixels, with the circle starting at the center until the user moves the mouse.

Loading thumbnail…

Fork of Smiley Face Part II

A smiley face is drawn as a centered SVG graphic, with a yellow circular head, a black stroke outline, and two black eyes positioned symmetrically above the center. The face is built using React components that render SVG primitives, specifically `<circle>` elements for the head, eyes, and mouth. The code calculates positions based on the browser window’s dimensions, using `window.innerWidth` and `window.innerHeight` to center the face and size it responsively. React and ReactDOM are used to mount the component into the page.

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data from a remote URL using the Fetch API and async/await syntax in JavaScript. The code fetches a CSV file containing CSS named colors, converts the response to text, and logs the raw CSV content to the browser console. The visualization itself displays no rendered output; instead, it focuses on the data-loading workflow, contrasting this modern approach with alternatives like d3.csv and Promise chaining. The example uses the Fetch API with async/await, and references d3.csvParse for parsing capabilities.

Loading thumbnail…

Fork of Let's Make a Face Part I

This example renders a yellow smiley face composed of SVG shapes, including a background circle, two eyes, and a curved mouth, all positioned within a centered group. The face is built using React components such as `Face`, `BackgroundCircle`, `Eyes`, and `Mouth`, with the mouth drawn using the `d3.arc()` API. The code uses React 18, D3 v7, and SVG rendering, with configurable props for eye offset, radius, and stroke width. The visualization is a static composition demonstrating modular component reuse and D3’s arc generator for path creation.

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example shows the result of loading and parsing a CSV file containing CSS named colors. The interface displays three summary statistics: the approximate file size in kilobytes, the number of data rows, and the number of columns. It uses D3 v5’s `d3.csv` function to fetch the remote resource and parse it, then leverages the `d3.csvFormat` method to calculate the raw character count. The parsed data object’s `length` and `columns` properties provide the row and column counts, which are rendered inside an HTML `<pre>` element.

Loading thumbnail…

Fork of Smiley Face Part III

A grid of eighteen smiley faces, each with randomized facial features, fills the view. Built with React and D3 v5, the example composes SVG circles for the face and eyes, while the mouth uses an `arc` generator to create a path. Each face is rendered via the `Face` component, which applies random values for stroke width, eye offsets, radii, and mouth dimensions, producing a playful collection of variations.

Loading thumbnail…

Fork of Smiley Face Part III

This example visualizes a classic smiley face, constructed from a yellow circle with black stroke as the head, two small circles as eyes, and an arc-based path for the mouth. Using React and D3 v5, the code imports the `arc` function from D3 to define the mouth’s geometry with specific inner and outer radii and angular spans. The SVG rendering is managed through ReactDOM, with coordinate constants and transform attributes positioning elements relative to a central point. The visualization is generated entirely from static values, with no external data source or interactive behavior.

Loading thumbnail…

Fork of Fork of Fork of Let's Make a Face Part I

This example renders a smiley face using React and D3.js, drawing a yellow circle with black stroke as the head, two black eye circles, and a mouth arc. The code uses D3’s `arc` generator to create the mouth path with specified inner and outer radii and angular bounds. SVG elements are positioned via a centered `<g>` transform, with constants for eye offset, radius, and stroke width. The visualization shows a static, geometric facial composition without interactivity, built entirely through React components and D3 utilities.

Loading thumbnail…

Fork of Fork of Let's Make a Face Part I

This example uses SVG to draw a stylized smiley face with yellow circular head, black outline, two eyes, and a mouth arc. Built with React and D3, it computes the face geometry through variables for center coordinates, offset distances, and radii. The D3 `arc` API constructs the mouth path by defining inner and outer radius along with start and end angles. All elements are positioned relative to a translated center coordinate system.

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a stylized smiley face built with React and D3 v7, rendered as an SVG. It draws a yellow circle for the head, two black circles for eyes, and a mouth created using the D3 `arc` generator with specified radii and angles. The layout uses absolute positioning via `centerX`, `centerY`, and offset constants, while the SVG `circle` and `path` elements are generated declaratively through React components. The code demonstrates integration of D3’s shape utilities within a React rendering pipeline.

Loading thumbnail…

Fork of Smiley Face Part 1

This is a React-based SVG visualization that draws a smiley face using D3.js and ReactDOM. The face consists of a yellow circle with a black stroke, two eyes, and a mouth arc created using the D3 arc generator with specified inner and outer radii and angle ranges. The SVG elements are positioned using the centerX and centerY coordinates, with eye offset values and a mouth radius defined as constants. The example demonstrates how D3's arc API can be integrated with React for geometric shape rendering.

Loading thumbnail…

Smiley Face Part 1

A half-finished smiley face rendered in SVG with React and D3. The code draws a yellow circle head with a black stroke, two black eyes positioned symmetrically, and a mouth arc created using the `d3.arc()` generator. The arc uses specified inner and outer radii with angles from 90 to 270 degrees, leaving the smile incomplete. All coordinates and dimensions are calculated relative to the SVG width and height, with transformations translating the center to the middle of the canvas.

Loading thumbnail…

Smiley Face Part1

A yellow, black-outlined smiley face is drawn on a blank SVG canvas, with two solid black circles serving as eyes and the large yellow circle as the face itself. The example demonstrates how React is loaded but unused, as the rendering is achieved purely through static SVG elements defined directly in the HTML. It uses the React 18 UMD production library and vanilla SVG circle elements, with coordinates and stroke widths set explicitly to position the face and eyes.