beq95

@beq95·6 public vizzes

Gantt Chart Example 1

This example presents a Gantt chart that visualizes the time intervals of multiple named jobs, with each horizontal bar colored by job status (running, succeeded, failed, or killed). The chart is built with React and D3 v4, using an SVG rendering approach. The code defines a reusable `d3.gantt` function that creates the chart, and it includes a `redraw` method, demonstrating animated transitions for updates. The x-axis uses a time scale with `d3.axisBottom`, while the y-axis is a band scale for task names, with bars rendered as SVG rects.

Aug 27, 2021

Loading thumbnail…

Puntatore

A React-driven SVG visualization displays a single circle that tracks the mouse cursor across a 960 by 500 canvas. The circle's position updates in real time through React's `useState` and event handling, with the `onMouseMove` callback capturing cursor coordinates. Built with React 16.9 and D3 v7, the rendering uses pure SVG elements, with the circle's center coordinates bound directly to the mouse position state. The visualization demonstrates a minimal interactive pattern, showing how React state management can drive SVG geometry updates without additional D3 layout or force simulation functions.

Aug 10, 2021

Loading thumbnail…

data da react

This example demonstrates a minimal React application that loads a CSV dataset and displays summary statistics about it, such as file size, row count, and column count. The visualization is rendered as plain text within a React component, using the `useState` hook to manage the loaded data and `d3.csv` to fetch and parse the remote CSV file from a GitHub gist. The interface shows a loading message before the data arrives, then updates to present the calculated metrics derived from the parsed dataset.

Aug 10, 2021

Loading thumbnail…

CSV data

This example fetches a CSV file of named CSS coordinate data and parses it using `d3.csvParse`, then displays a summary of the file’s size, row count, and column count in large text on a blank page. The visualization communicates basic dataset dimensions rather than plotting values, with output rendered into a `pre` element via `document.getElementById`. It uses the Fetch API with an async `fetchText` helper and relies on D3 v7 for parsing, styled by a font-size of 7em in CSS. The data comes from a GitHub gist.

Aug 10, 2021

Loading thumbnail…

Faccia Sorridente

A smiling face is drawn with a yellow circle for the head, two black eyes, and a mouth formed by a thick arc. React renders the SVG elements, while D3’s `arc` generator creates the mouth path with specified inner and outer radii and start and end angles. The head and eyes are simple SVG circles, with positions calculated relative to a central group transform. All dimensions and offsets are defined as constants in the React component.

Aug 9, 2021

Loading thumbnail…

Hello HTML

A minimal HTML page demonstrates the foundational structure of a web document. The example shows an empty page with only a title, "Hello HTML," displayed in the browser tab. The code consists of a standard `<!DOCTYPE html>` declaration, an `<html>` element containing a `<head>` with a `<title>` tag, and an empty `<body>`. This example uses no external libraries or APIs, relying solely on native HTML syntax to define the document skeleton. It serves as a starting point for understanding how web pages are constructed.

Aug 5, 2021