KazyManazy

@KazyManazy·10 public vizzes

Loading Data with React

A circle follows the mouse cursor across a 960 by 500 SVG canvas. Built with React, the app tracks mouse movement via an `onMouseMove` handler, storing coordinates in state and updating the circle’s `cx` and `cy` attributes. ReactDOM renders the component, while D3 is loaded but unused in this example.

Jan 7, 2022

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load a remote CSV file and parse it into structured data using D3.js. It fetches color data from a GitHub gist URL and displays three summary metrics in a large preformatted text block: the formatted data size in kilobytes, the row count, and the column count. The code uses the `d3.csv` method to parse the fetched text, then relies on `d3.csvFormat` to calculate the byte length and accesses the parsed array’s `length` and `columns` properties. The page updates the text content dynamically after the asynchronous fetch completes.

Dec 6, 2021

Loading thumbnail…

Mouse Follower

A plain SVG circle follows the mouse cursor across a 960 by 500 viewport, its position updating in real time to match the pointer's coordinates. The visualization demonstrates mouse tracking with React state management, using the `useState` and `useCallback` hooks to handle `mousemove` events and re-render the circle. The SVG element captures the mouse position through its `onMouseMove` handler, while D3 v7 is loaded but not actively used in the interaction logic.

Dec 6, 2021

Loading thumbnail…

Smiley Face Part 6

A grid of randomly generated smiley faces fills the viewport, each face varying in stroke thickness, eye placement and size, and mouth width and radius. The example demonstrates how React components compose reusable SVG elements, with the `Face` component orchestrating `BackgroundCircle`, `Eyes`, `Mouth`, and `FaceContainer`. It uses D3 v7’s `arc` generator to create the mouth path and `range` to produce the grid, rendering all faces via ReactDOM into the DOM, with randomness applied per face during render.

Dec 1, 2021

Loading thumbnail…

Fork of Smiley Face Part 5

This example renders a smiley face using React components and SVG primitives. It shows a yellow circle with two eyes and a curved mouth, all positioned relative to the center of a 960×500 coordinate space. The code employs React functional components for the background, eyes, and mouth, with the mouth using the d3.arc() API to generate a path. D3 v7 and React 17 are loaded via CDN, and the SVG is drawn directly into the DOM.

Dec 1, 2021

Loading thumbnail…

Fork of Smiley Face Part 4

A yellow smiley face rendered in SVG using React and D3 v7. Two D3 arc generators create the mouth, while React components draw the background circle and eyes. The code uses ReactDOM to render the SVG into the DOM, with D3's `arc()` function defining the mouth path. The visualization demonstrates combining React's component structure with D3's geometry utilities for simple shape generation.

Nov 24, 2021

Loading thumbnail…

Fork of Smiley Face Part 3

This example renders a smiling face as a set of SVG shapes using React and D3. It shows a yellow circle with two eyes and an arc-based mouth, centered on the canvas. The code defines a reusable `BackgroundCircle` React component and uses the D3 `arc` generator to create the mouth’s path. Drawing is done via SVG elements inside a React component, with fixed numeric constants for dimensions and positions.

Nov 24, 2021

Loading thumbnail…

Fork of Smiley Face Part 2

A smiley face rendered with SVG circles in React, using D3 v7 for the chart dimensions and styling. The code draws a yellow face with two eyes via hardcoded coordinates relative to the center width and height. ReactDOM renders the SVG to a root div, with no data source or interaction—purely static geometric shapes.

Nov 24, 2021

Loading thumbnail…

Smiley Face Part I

This example shows a basic smiley face rendered as a static SVG graphic, with a yellow circle for the head and two smaller circles for the eyes, all centered on a blank canvas. It uses React 17 and ReactDOM to structure the page, though the SVG markup is written directly in the HTML body rather than through JSX or component logic. The code explicitly sets the SVG dimensions and shapes’ coordinates and stroke properties, demonstrating a minimal approach to SVG output without any dynamic behavior or data binding.

Nov 19, 2021

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a minimal D3 starter template that outputs the text “Hello D3 version 7” in the browser. The page uses D3 v7’s `select` API to target the `<body>` element and set its text content. The visualization is plain HTML text rendered with a large 13em font size, with no data source or complex rendering involved. The code is split between an `index.html` file that loads D3 from unpkg and a separate `bundle.js` containing the main `index.js` logic.

Nov 19, 2021