G

gragors123@gmail.com

@gog0go·16 public vizzes

Loading thumbnail…

Fork of Parallel Coordinates with Brushing

This interactive parallel coordinates plot visualizes the Iris dataset, using color to encode species and enabling multidimensional filtering through Y-axis brushing. Built with D3.js, it employs `scaleLinear` and `scalePoint` for axes, `line` for path generation, and `brushY` for interactive interval selection. The visualization incorporates smooth transitions via `transition().duration(500)` and dynamically filters displayed lines based on user-selected ranges across multiple dimensions.

Loading thumbnail…

Fork of Smiley Face Part II

A React application renders a full-screen yellow smiley face as an SVG graphic, with the face centered and sized to the browser window. The code uses React 16.9 and ReactDOM to generate circles for the head, eyes, and mouth area, with the face positioned via an SVG `<g>` transform. It also includes an unrelated JavaScript function for finding the longest palindrome in a string, which logs a result to the console but does not affect the visualization. The rendering is purely SVG-based with dynamic viewport dimensions.

Loading thumbnail…

mouse follower

This example loads a CSV file of CSS named colors and displays a message with its size in kilobytes, row count, and column count. The application uses React hooks (useState, useCallback) to manage state and fetches data with d3.csv from a GitHub gist URL. The rendered output is a static text message displayed in a div, with D3 v7 and React 16 loaded via CDN.

Loading thumbnail…

Loading And Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3.js v7, displaying key statistics about a dataset of CSS named colors. The code fetches a remote CSV file via the Fetch API and processes it with `d3.csv`, then reports the file size in kilobytes, row count, and column count in a large `<pre>` element. The visualization highlights the parsed data structure without any graphical chart, focusing purely on data ingestion and summary metrics.

Loading thumbnail…

mouse follower

A circle follows the mouse cursor across a full-screen SVG canvas. The example demonstrates state tracking in React: the `useState` hook holds the cursor’s x and y coordinates, while `useCallback` updates that state on every `onMouseMove` event. The circle’s `cx` and `cy` attributes are bound directly to the stored position, so it re-renders instantly. D3 is not used for drawing or data loading here; the interaction relies entirely on React and native SVG elements, with no external data source.

Loading thumbnail…

Fork of Smiley Face Part II

A grid of eighteen small smiley faces, rendered side-by-side, displays subtle variations in mouth curvature. Each face is constructed with React components and SVG primitives, including a yellow circle, two eye circles, and a mouth path. The mouth shape is generated using D3’s `arc` function, with a random radius value determining the arc’s thickness. The layout is created by mapping over a D3 `range` array, and the entire composition is rendered to an SVG container with a translated coordinate system.

Loading thumbnail…

Fork of Smiley Face Part III

A yellow smiley face is drawn on an SVG canvas using React components and D3 shape generators. The code defines the face’s features with constants for eye placement, mouth radius, and stroke width, then renders circles for the head and eyes, and a D3 `arc()` path for the smile. The visualization demonstrates a React-D3 integration pattern where D3’s `arc()` function calculates the mouth’s path geometry, while React handles the SVG element structure. The rendering uses SVG primitives within a `<g>` transform to center the face.

Loading thumbnail…

Invisible Dots

Invisible Dots arranges 50 empty div elements in a vertical stack, each one generated by a JavaScript for loop and appended to the document body. A single small inline SVG containing a black square rect sits above them, rendered without any visible fill or stroke. The piece uses raw HTML, CSS, and JavaScript—no external libraries—to explore the contrast between an explicit graphical mark and the implicit structure of unstyled block elements. The minimal styling leaves the SVG’s default black fill as the only visual output.

Loading thumbnail…

Fork of Smiley Face Part II

A grid of 18 randomly generated smiley faces is rendered with React and D3. Each face is composed of SVG circles and an arc-based mouth, with varying eye positions, radii, and mouth widths/curvatures per face. The D3 `arc` generator creates the mouth paths, while React components like `BackgroundCircle`, `Eyes`, and `Mouth` assemble each face within a translated SVG group.

Loading thumbnail…

Invisible dots

Fifty identical black rounded squares fill a browser window, each rendered as a plain `<div>` with no visible content, creating a uniform grid of "invisible dots" against the white page. The example uses a simple `for` loop in vanilla JavaScript to append each element to the document body, with CSS flexbox controlling the wrap layout. The code intentionally corrupts the loop syntax with malformed `i < 50` conditions, revealing an authoring error that prevents execution. No external libraries or data sources are used; the visualization relies solely on raw DOM manipulation and static styling.

Loading thumbnail…

Invisible dots

Fifty black, rounded squares form a silent grid on a white background, each one a uniform tile with no visible variation. The piece demonstrates a simple HTML and JavaScript loop that creates the elements using `document.createElement` and `document.body.append`, with styling applied via CSS properties for size, margin, and border-radius. There is no interaction, animation, or data binding, only the static repetition of identical shapes. The title suggests an absence or a hidden pattern, but the code does not implement any such behavior, leaving the visual composition purely as a minimal exercise in layout generation.

Loading thumbnail…

Loading Data with React & D3

This example demonstrates how to integrate D3 data-loading utilities with React state management. It uses the React hooks `useState` and `useCallback` to track fetched data, while relying on D3’s data-request methods to asynchronously load external datasets. The application renders a blank visualization area with a fixed width of 960 pixels and height of 500 pixels, using ReactDOM to mount the component. The code imports React and ReactDOM from CDN versions 16.9.0, and the visualization updates dynamically when new data arrives, though the specific chart type is not defined in the shown snippet.

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3 v7’s `d3.csv` method, fetching a remote dataset of CSS named colors from a GitHub gist. The visualization displays three summary statistics as large text: the file size in kilobytes, the number of data rows, and the number of columns. The code also includes a commented alternative using `fetch` and `d3.csvParse` to show a manual parsing workflow. Results are rendered into a `<pre>` element, with styling applied via CSS.

Loading thumbnail…

Fork of Smiley Face Part II

A fork of Smiley Face Part II shows a single unfilled circle following the mouse cursor across an SVG canvas. The circle's position updates in real-time based on the pointer's client coordinates. Implemented with React and D3 v7, the visualization uses React's `useState` and `useCallback` hooks to manage and update the mouse position state, while the SVG `<circle>` element renders the shape. The HTML loads React and D3 from CDN, and the code runs within a React component rendered to the root div.

Loading thumbnail…

Smile :)

This visualization renders a simple smiling face as a reusable React component. A yellow circle with a black stroke serves as the head, with two black circles for eyes and a curved arc for the mouth. The face is composed of modular React components—BackgroundCircle, Eyes, and Mouth—that accept size and position props. The Mouth uses `d3.arc()` to generate the smile path, while a FaceContainer wraps everything in an SVG element, translating the group to center the face within the 960×500 viewport.

Loading thumbnail…

Fork of Hello HTML

This example renders a yellow smiley face using React and D3.js, displayed as an SVG graphic. The visualization shows two black eyes and a circular face constructed from SVG `<circle>` elements, with positions and dimensions computed via JavaScript constants. The code leverages React’s `ReactDOM.render` function and D3.v7’s API to create the SVG output, with the face’s radius derived from the viewport height and a specified stroke width.