alper2678

@alper2678·7 public vizzes

Parsing CSV Data With D3

This example demonstrates parsing a remote CSV file using D3, showing the file size, row count, and column count of the data. The visualization fetches a CSS named color dataset from a GitHub gist using the `fetch` API, then parses the text with D3's `csvParse` method. The resulting statistics are displayed as plain text in an HTML `<pre>` element, with D3 loaded via the unpkg CDN and styling applied through embedded CSS.

Mar 1, 2022

Loading thumbnail…

Mouse Tracker Circle

A yellow circle follows the mouse cursor across an SVG canvas. The example demonstrates React state management and event handling within a D3.js context, using the `useState` and `useCallback` hooks to track and update the cursor's `clientX` and `clientY` coordinates. It renders a single circle element that repositions on every `onMouseMove` event.

Mar 1, 2022

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates the initial step of loading and parsing CSV data for visualization, displaying a static “Hello HTML!” message while fetching a remote dataset. The code uses the Fetch API to retrieve a CSV file containing CSS named colors from a GitHub gist, then logs the raw text to the browser console using `response.text()`. The asynchronous `fetchText` function simplifies the request, while the commented-out code shows an alternate approach. No parsing or rendering occurs yet, as the example focuses solely on data acquisition and confirms successful retrieval through console output.

Feb 28, 2022

Loading thumbnail…

Fork of Smiley Face Fork III

This example renders a grid of fifteen smiley faces, each built from reusable React components for the background circle, eyes, and mouth. The faces share a fixed layout, but the eye radius is randomized per face, creating subtle variation across the collection. The visualization uses React for component composition and D3’s `arc` generator to draw the curved mouth path. All shapes are rendered as SVG elements within a container that translates the origin to the face’s center, demonstrating a modular approach to assembling data-driven graphics.

Feb 28, 2022

Loading thumbnail…

Smiley Face Fork III

This example renders a classic yellow smiley face as a static SVG composition using React components for the background circle, eyes, and mouth. The mouth is drawn with a d3 arc path using a computed inner and outer radius, while the facial features are positioned relative to a centered group transform. The code defines fixed numeric constants for dimensions, uses React 17 for component structure, and relies on d3.v7 for the arc generator, with SVG elements providing the final visual output.

Feb 28, 2022

Loading thumbnail…

Cat eye Fork of Hello HTML

This example renders a stylized cat face built with React and SVG, drawing a yellow circle, two eyes, and an arc-shaped mouth. The left and right eye ellipses use a linear gradient, while the mouth’s path is generated with d3.arc using specified inner and outer radii and angle values. The code imports React and ReactDOM to mount the component, and uses d3.arc to compute the mouth’s path data.

Feb 24, 2022

Loading thumbnail…

Fork of Hello HTML

This example shows a yellow smiley face drawn in an SVG canvas using React and D3.js. The face is centered at 960 by 500 pixels, with two black eye circles and a curved mouth path generated by the D3 `arc` function, which defines inner and outer radii and start/end angles. The code uses ReactDOM to render the SVG elements, and D3’s `arc` API to construct the mouth’s path. The source is a static HTML page that loads React and D3 from unpkg.

Feb 24, 2022