Skip to main content
Log in
H

hukbk

@hukbk·48 public vizzes

Loading thumbnail…

Fork of Mouse Follower

A circle follows the mouse cursor within a fixed-size SVG canvas, updating its position in real time. The visualization uses React’s `useState` to track the cursor coordinates and a `useCallback` handler triggered by the SVG’s `onMouseMove` event. The circle’s center (`cx`, `cy`) is bound to the stored mouse position, while the radius remains constant at 30 pixels. The React DOM renders the SVG directly, with the initial position centered at half the canvas dimensions (968×550).

May 11, 2022
Loading thumbnail…

Fork of verändert

A yellow smiley face is rendered as an SVG, with a green circular head, dark red outline, two dark eyes, red pupils, and an open mouth drawn using a D3 arc path. The React component builds the SVG structure, positioning elements relative to the center of the 960 by 600 viewport. D3’s `arc` API generates the mouth shape, while React manages the SVG elements and coordinates for the facial features. The visualization is a static composition, showing only the final face state.

May 11, 2022
Loading thumbnail…

Smiley Face Part 6

This example renders a grid of 18 procedurally generated smiley faces, each built from React components and SVG primitives. Each face’s properties—eye offset and radius, mouth radius and width, and stroke thickness—are randomly assigned via `Math.random()`, producing varied, cartoonish expressions. The code composes a `Face` from `BackgroundCircle`, `Eyes`, and `Mouth` components inside a `FaceContainer` SVG, while the mouth’s arc shape is generated using the `d3.arc` API. The faces are laid out by mapping over an array created with `d3.range`, with the entire collection rendered through React’s `ReactDOM.render`.

May 11, 2022
Loading thumbnail…

Fork of verändert

This visualization shows a simple yellow happy face comprising a circular head with black outline, two eyes with blue pupils, and a curved mouth. Built with React and D3.js, it explicitly imports and uses the `arc` API from D3 to generate the mouth’s path. The SVG rendering is driven by React, which calculates the geometry via constants for offsets, radii, and stroke widths, then assembles the circles and path in a coordinate system centered on the canvas. The code does not load external data but constructs the figure entirely from hard-coded parameters in JavaScript.

May 11, 2022
Loading thumbnail…

verändert

A yellow circular face with black eyes and a half-circle mouth is rendered in SVG. Using React to structure the markup and d3.arc to generate the mouth’s path, the visualization draws two offset eye circles and a central smile arc within a fixed 1000×500 viewport. The code applies d3 v6’s arc generator with specific inner and outer radii and angle ranges, while React 16.9 manages the component lifecycle. All shapes are static, with no interaction or animation.

May 11, 2022
Loading thumbnail…

Fork of verändert

A yellow smiley face is drawn on a green circular head, rendered as an SVG inside a React application. The face includes two black eyes, but the mouth is broken: a non-functional `d3.arc` path is partially coded, leaving the smile incomplete. The code uses React 16.9 and D3 v6, with the `d3.arc` API intended to generate a mouth shape. The SVG elements are positioned using explicit coordinates, and the rendering relies on ReactDOM to mount the component into the page.

May 11, 2022
Loading thumbnail…

multiple Smiley Faces made with children command

A grid of eighteen smiley faces, each rendered with randomized facial features, demonstrates how React components can be composed and reused. The code builds each face from separate React components for the background circle, eyes, and mouth, which are nested inside a `FaceContainer` that handles the SVG coordinate translation. The `children` prop allows these subcomponents to be passed and rendered within the container. Mouth shapes are generated using `d3.arc` with varying inner and outer radii, while all other dimensions are randomly assigned per face. The visualization uses React 16.9 and d3 v6, rendering to SVG.

May 10, 2022
Loading thumbnail…

Fork of HTML Starter

This example demonstrates a bare-bones HTML page that integrates React and D3, but renders no visible content or visualization. The page loads React 16.9 and D3 6.6.2 via remote scripts and defines a root `<div>` element, while the accompanying JavaScript bundle remains empty. It serves as a minimal template for setting up a web-based project, showing how to include these libraries in a single HTML file. The code references the `d3.min.js` library but does not utilize any specific D3 or React API for drawing or interaction.

May 10, 2022
Loading thumbnail…

verändert

A simple smiley face drawn with React and D3.js renders in an SVG canvas. The face consists of a green circle with a dark red outline, two black eyes, and a mouth formed using D3's `arc()` generator to create a half-circle shape. The code demonstrates how to combine React components with D3 utilities, using React to manage the SVG structure and D3 for the geometric arc calculation. The drawing is centered within a fixed 960x500 viewport.

May 10, 2022
Loading thumbnail…

Smiley Face Part 2

A yellow smiley face with black outline is drawn in SVG, featuring two solid black eyes and a smile formed by a thick, open arc. The example demonstrates composing basic shapes and paths with React and D3. The code uses the `arc()` generator from `d3` to create the mouth path, while React elements render the circles and SVG container. The face is centered on a 960 by 500 canvas with fixed coordinates for features.

May 10, 2022
Loading thumbnail…

Smiley Face Part 1

A yellow circle with a black outline and two smaller black circles for eyes forms the beginning of a smiley face. The SVG canvas is intentionally small relative to the shapes, causing overflow clipping of the graphic. The code uses raw SVG elements—a main `<circle>` with fill, stroke, and stroke-width attributes, and two eye circles—positioned via explicit `cx` and `cy` coordinates. The HTML file embeds the SVG directly, with CSS hiding the page margin and overflow. Only the head, eyes, and partial outline are visible; no mouth is yet drawn.

May 10, 2022
Loading thumbnail…

Fork of Smiley Face Part 3

A yellow smiley face is drawn in SVG, centered on a 960 by 500 canvas. The face includes two black eyes and a mouth arc, all positioned relative to a central group transform. The example demonstrates building a static SVG scene with React components and D3’s `arc` generator, using explicit circle elements for the face and eyes and a `path` for the mouth. The `BackgroundCircle` component renders the head with a yellow fill and black stroke, while the mouth is created with `d3.arc` using inner and outer radii and fixed start and end angles. The code imports React, ReactDOM, and `arc` from D3 v6.

May 10, 2022
Loading thumbnail…

Fork of Smiley Face Part 6

This example shows a grid of 63 randomly generated smiley faces, each with a purple circular background, green stroke, two eyes, and an arc-based mouth. The faces vary in stroke width, eye position, eye radius, and mouth dimensions due to randomized parameters. The visualization is built with React components and rendered as SVG, using D3’s `arc` API to generate the mouth paths and `range` to create the array of faces. All faces share the same center and dimensions within a 160-by-160 viewport.

May 10, 2022
Loading thumbnail…

Fork of Mouse Follower

A red circle follows the mouse cursor inside a fixed-size SVG viewport, responding to every pointer movement across the canvas. The application uses React hooks, specifically useState and an onMouseMove event handler, to track and update the circle's x and y coordinates in real time. The circle is rendered as an SVG element with a red fill and black stroke, positioned based on the mouse position state. The example demonstrates interactive SVG rendering with React's declarative state management, using ReactDOM to mount the component into the page.

Jan 24, 2022
Loading thumbnail…

Fork of Smiley Face Part 3

This React and D3 visualization renders a smiley face as an SVG, built from a yellow background circle with a black stroke, two smaller circles for eyes, and a curved mouth path. The mouth is generated using D3’s `arc` API, which defines an annular sector with specified inner and outer radii and angular start and end points. The code explicitly sets the canvas dimensions, positions elements via a centered transform, and uses ReactDOM to render the SVG into the page. The static composition illustrates coordinate placement and D3’s geometric path generation within a React component.

Jan 24, 2022
Loading thumbnail…

Fork of Mouse Follower

This interactive visualization displays a yellow circle that follows the mouse cursor across an SVG canvas. Built with React, it uses the `useState` hook to track mouse coordinates and `useCallback` to optimize the event handler. The `onMouseMove` event on the SVG element updates the circle’s `cx` and `cy` attributes, while the circle’s radius remains fixed at 30 pixels. The code initializes the circle at the canvas center and renders everything through ReactDOM.

Jan 24, 2022
Loading thumbnail…

Fork of Smiley Face Part 3

A grid of 18 smiley faces renders in React with SVG, each face randomly varying in stroke width, eye offset and radius, and mouth dimensions. The face components use d3’s `arc` generator to draw a curved mouth path, while the overall layout is produced by iterating over a d3 `range`. All faces are centered within fixed 160x160 viewports, with yellow circles and black strokes forming the background and facial features.

Jan 24, 2022
Loading thumbnail…

Fork of Smiley Face Part 6

This gallery example renders a grid of procedurally generated smiley faces using React and SVG. Each face is composed of modular components—a background circle, eyes, and an arc-based mouth—that receive randomized dimensions for stroke width, eye offset, eye radius, mouth width, and mouth radius. The `arc` generator from d3 creates the curved mouth path, while React’s component composition and the `range` utility from d3 produce an array of 18 unique faces with varying features.

Jan 24, 2022
Loading thumbnail…

Loading Data with React & D3

This example demonstrates a React application that loads external data and manages it through React state. The visualization uses D3 utilities for data loading, paired with React’s `useState` hook to store and track the fetched information. The code imports React and ReactDOM, defining an `App` component with a `data` state variable initialized to `null`. The application renders into a designated root element, with the canvas dimensions set to 960 by 500 pixels. The implementation relies on the React 16.9.0 production libraries, showing a minimal setup where the data-loading process is integrated into the component’s lifecycle.

Jan 23, 2022
Loading thumbnail…

Fork of Fork of HTML Starter

This example displays a minimal web page showing the static text "Hello HTML" in large, centered type, alongside a console message "Hello JavaScript!" logged via the browser’s developer tools. The page structure is basic HTML with inline CSS controlling the font size and alignment, and a single JavaScript script element. It does not use any data visualization libraries or APIs; instead, it serves as a simple static HTML starter template, demonstrating fundamental page markup and client-side scripting without dynamic data or rendering.

Jun 13, 2021
Loading thumbnail…

Fork of HTML Starter

A grid of eighteen cartoon faces, each rendered as a yellow circle with eyes and a mouth, fills the view. The faces vary randomly in stroke width, eye offset, eye radius, and mouth dimensions, producing a playful, generative composition. Built with React and ReactDOM, the visualization uses JSX components like `FaceContainer` and `BackgroundCircle` to structure the SVG output. The `d3.arc` API generates the mouth path, while `d3.range` creates the array that maps over the face instances.

Jun 13, 2021
Loading thumbnail…

Loading Data with react and d3

A circle follows the mouse cursor in a full-screen, borderless visualization. The example demonstrates how to combine a React front end with D3.js, using React's `useState` hook and `ReactDOM.render` to manage the application state. The circle's position is updated through an event handler, while D3's force simulation API is not used; instead, the motion relies on React's `useCallback` to track the pointer. The data source is the live mouse position, rendering a lightweight, interactive scene.

May 16, 2021
Loading thumbnail…

Smiley Face Part 3

A smiley face rendered as a yellow SVG circle with black eyes and an arc-shaped mouth, all composed using React components. The visualization centers on a `<g>` element translated to the middle of the 960×500 canvas, drawing a background circle with adjustable stroke width, two offset eye circles, and a mouth path generated by the D3 arc generator. The code imports React hooks from the library and utilizes `d3.arc` with specified radii and angular ranges to create the curved smile. The example demonstrates how D3 geometry functions integrate with React’s declarative rendering approach for static SVG compositions.

May 14, 2021
Loading thumbnail…

Fork of Smiley Face Part 3

A smiley face rendered as a yellow circle with two black eyes and a curved mouth sits centered in an SVG canvas. The face is built declaratively with React components, including a reusable `BackgroundCircle` and a custom `Eyes` component, while D3’s `arc` generates the mouth path with specified inner and outer radii and angular range. All geometric values like radius, stroke width, and eye offsets are defined as constants, and the SVG group is translated to the canvas center.

May 14, 2021
Loading thumbnail…

Loading Data with react and d3

A circle follows the mouse cursor in a full-screen, borderless visualization. The example demonstrates how to combine a React front end with D3.js, using React's `useState` hook and `ReactDOM.render` to manage the application state. The circle's position is updated through an event handler, while D3's force simulation API is not used; instead, the motion relies on React's `useCallback` to track the pointer. The data source is the live mouse position, rendering a lightweight, interactive scene.

May 14, 2021
Loading thumbnail…

Loading Data with react and d3

A circle follows the mouse cursor in a full-screen, borderless visualization. The example demonstrates how to combine a React front end with D3.js, using React's `useState` hook and `ReactDOM.render` to manage the application state. The circle's position is updated through an event handler, while D3's force simulation API is not used; instead, the motion relies on React's `useCallback` to track the pointer. The data source is the live mouse position, rendering a lightweight, interactive scene.

May 14, 2021
Loading thumbnail…

Mouse Follower

A circle follows the mouse cursor within an SVG canvas. The visualization updates the circle's position in real time as the mouse moves. Built with React, it uses the `useState` hook to store the current mouse coordinates and the `useCallback` hook to handle the `onMouseMove` event, updating the circle's `cx` and `cy` attributes accordingly. This example demonstrates interactive data binding and event-driven rendering in React with SVG.

May 14, 2021
Loading thumbnail…

Mouse Follower

A circle follows the mouse cursor within an SVG canvas, with its center position updating live to match the pointer's coordinates. The visualization uses React's `useState` and `useCallback` hooks to manage cursor tracking, while `ReactDOM` renders the SVG element and its circle to the page. The SVG's `onMouseMove` event handler captures the cursor position, and the circle's `cx` and `cy` attributes are updated accordingly with a fixed radius of 30 pixels.

May 14, 2021
Loading thumbnail…

Fork of Fork of HTML Starter

This example fetches a CSV file and parses it into an array of objects using the D3.js `d3.csvParse` method, logging the result to the browser console. It demonstrates a minimal setup for loading external data with the native `fetch` API inside an asynchronous function. The page relies on D3 v6 and plain JavaScript, with no visual elements rendered on the screen; the sole output is the parsed data displayed in the console. While the code references a `csvUrl` variable, the actual URL is not defined, leaving the fetch incomplete and the visualization non-functional.

May 14, 2021
Loading thumbnail…

Fork of HTML Starter

This example demonstrates how to load and parse CSV data in a minimal HTML page using D3. It sets up an asynchronous `fetchText` function to retrieve a CSV file from a URL, then applies `d3.csvParse` to convert the raw text into an array of objects. The parsed data is logged to the browser console, where it can be inspected by the viewer. The code relies on the Fetch API and D3 v6, integrated via a script tag from unpkg, with no additional visualization or rendering logic included.

May 14, 2021
Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates a circle that follows the mouse cursor within an SVG canvas. It shows interactive tracking by rendering a single circle whose position updates based on mouse movement events. The implementation uses React with the `useState` and `useCallback` hooks to manage and update the circle's coordinates. Mouse movement is captured via the SVG's `onMouseMove` event handler, which extracts the `clientX` and `clientY` properties. The circle is drawn using ReactDOM's rendering into an SVG element, with a fixed radius of 30 pixels within a 960x500 viewport.

May 14, 2021
Loading thumbnail…

Mouse Follower

A circle follows the mouse cursor within an SVG canvas. The visualization updates the circle's position in real time as the mouse moves. Built with React, it uses the `useState` hook to store the current mouse coordinates and the `useCallback` hook to handle the `onMouseMove` event, updating the circle's `cx` and `cy` attributes accordingly. This example demonstrates interactive data binding and event-driven rendering in React with SVG.

May 14, 2021
Loading thumbnail…

Mouse Follower

A circle follows the mouse cursor across an SVG canvas as the user moves the pointer. The React component tracks the cursor’s `clientX` and `clientY` coordinates through an `onMouseMove` event handler, updating the circle’s `cx` and `cy` attributes via the `useState` and the component state. The visualization uses React 16.9 and ReactDOM to render the graph, with the SVG resized to 960 by 500 pixels and a constant circle radius of 30.

Apr 12, 2021
Loading thumbnail…

Mouse Follower

A circle follows the mouse cursor across an SVG canvas as the user moves the pointer. The React component tracks the cursor’s `clientX` and `clientY` coordinates through an `onMouseMove` event handler, updating the circle’s `cx` and `cy` attributes via the `useState` and the component state. The visualization uses React 16.9 and ReactDOM to render the graph, with the SVG resized to 960 by 500 pixels and a constant circle radius of 30.

Apr 12, 2021
Loading thumbnail…

Mouse Follower

A circle follows the mouse cursor across an SVG canvas. The visualization uses React's `useState` hook to track the cursor's current coordinates, updating the circle's `cx` and `cy` attributes on every mouse move event. The React component renders the SVG directly, with the circle's position bound to the state value. The canvas is set to a fixed width and height, and the mouse position is captured via the SVG's `onMouseMove` handler. Both React and ReactDOM are loaded from UMD packages.

Apr 10, 2021
Loading thumbnail…

Mouse Follower

A circle follows the mouse cursor across an SVG canvas. The visualization uses React's `useState` hook to track the cursor's current coordinates, updating the circle's `cx` and `cy` attributes on every mouse move event. The React component renders the SVG directly, with the circle's position bound to the state value. The canvas is set to a fixed width and height, and the mouse position is captured via the SVG's `onMouseMove` handler. Both React and ReactDOM are loaded from UMD packages.

Apr 10, 2021
Loading thumbnail…

Mouse Follower

A fixed circle sits at the center of an SVG canvas while the mouse moves freely over it. The React component tracks pointer motion using an `onMouseMove` event handler on the SVG element, logging the cursor’s client coordinates to the console. The visualization uses React 16.9 with ReactDOM to render the single circle, defined by explicit `cx`, `cy`, and `r` attributes, with no positional change applied to the shape itself.

Apr 4, 2021
Loading thumbnail…

Smiley Face Part 6

A grid of identical smiley faces, each composed of a yellow circle, two black eyes, and a curved mouth, is rendered as SVG in a React application. The faces are generated by looping over an array created with d3.range, and each face is assembled from React components for the background, eyes, and mouth. The mouth’s arc is drawn using d3.arc, while the SVG group transformation positions its features around a central point.

Mar 31, 2021
Loading thumbnail…

Smiley Face Part 6

A yellow smiley face is drawn in an SVG canvas using React components. The face consists of a yellow background circle with a black stroke, two black eyes positioned symmetrically, and a mouth created with a d3 arc path. The code uses React functional components (`BackgroundCircle`, `Eyes`, `Mouth`) and the D3 `arc` API, with all geometry defined by constants. The rendering relies on ReactDOM to mount the SVG into a fixed full-screen container, with no external data source.

Mar 31, 2021
Loading thumbnail…

Smiley Face Part 3

A yellow smiley face is drawn using SVG primitives, with two eyes and a mouth arc positioned on a centered background circle. The visualization is built with React and D3 v6, using the `d3.arc` API to define the mouth’s annular path, while circle elements handle the face background and eyes. The code sets fixed pixel dimensions and computes offsets for eye placement, with the final rendering handled by ReactDOM.

Mar 31, 2021
Loading thumbnail…

Smiley Face Part 3

A partially complete smiley face is drawn using SVG, with a yellow circle for the head, a filled semi-circular arc for the mouth, and two unfilled circles for the eyes. The React code uses D3’s `arc` function to generate the mouth path, while absolute SVG coordinates position the facial features. The visualization is a static rendering, and the code does not include any interactive behavior.

Mar 31, 2021
Loading thumbnail…

Smiley Face Part 2

This example shows the first half of a smiley face drawn with SVG circles: a large yellow face with two black eyes. The face and eyes are positioned using calculated coordinates relative to the center of a 960×500 viewport, with the face radius set to the center height minus half the stroke width. The code uses React’s `ReactDOM.render` to mount a functional `App` component that returns an SVG element, with circle properties like `cx`, `cy`, and `r` passed as JSX attributes. The mouth is not yet included, matching the “half way” description in the README.

Mar 30, 2021
Loading thumbnail…

Fork of Smiley Face Part 1

This visualization shows a single yellow circle with a black outline, intended as the head of a smiley face. It is rendered as an SVG element using the React framework, with the circle’s center, radius, and stroke properties set directly in the component’s attributes. The code uses ReactDOM to mount the component into the page’s root element, while the index.html file contains commented-out instructions for adding the eyes, indicating the work is incomplete. The source data is hardcoded as geometric values within the React component.

Mar 30, 2021
Loading thumbnail…

Fork of Hello HTML

This example shows a simple, static face composed of two circles on a yellow background. A large yellow circle with a thick black stroke forms the head, while a smaller black circle positioned to the upper left represents an eye. The visualization is built using raw SVG elements within an HTML page, styled with CSS that removes page margins and hides overflow. It uses the React framework and relies on the browser's native SVG rendering, with the `cx`, `cy`, and `r` attributes defining the shapes.

Mar 29, 2021
Loading thumbnail…

Hello HTML

This example displays a single yellow circle centered on a 960 by 500 SVG canvas. The HTML page uses inline CSS to remove the default margin and hide overflow. A plain SVG element is drawn directly in the markup, with the circle’s position and radius set as static attributes. No JavaScript or external libraries are used, relying solely on native SVG rendering within the browser.

Mar 29, 2021
Loading thumbnail…

Hello HTML

This example shows a minimal, self-contained HTML page that displays a single unfilled circle centered within an SVG canvas. The code directly implements the graphic using raw SVG elements, notably a `<circle>` with a radius of 200, inside an `<svg>` tag that defines a 960 by 500 pixel viewport. The implementation relies on basic, built-in web standards—HTML for structure, CSS for presentation, and JavaScript for interactivity—rather than any external charting or data-processing libraries. This serves as a bare-bones template for building more complex visualizations with the React framework.

Mar 29, 2021
Loading thumbnail…

Untitled

This example displays a blank HTML page with a title tag, demonstrating the simplest possible web document structure. The page contains only an empty body element, with no visual content or interactive features. The code relies on basic HTML and CSS, with no JavaScript libraries or data visualization components implemented. The React Starter reference suggests potential for expansion, but the current implementation shows no rendering, data processing, or dynamic behavior.

Mar 29, 2021
Loading thumbnail…

Untitled

This example shows a minimal HTML page that combines CSS and JavaScript to render a simple interactive visualization. It uses d3.forceSimulation to run a basic physics-based layout, positioning nodes and links from a small embedded dataset. The code relies on d3 selections for DOM manipulation and updates the SVG in real time as the simulation ticks. The page is intentionally bare, serving as a starting point for exploring React integration with D3, as referenced in the README’s link to a separate React starter template.

Mar 29, 2021