F

Frictionlessman

@Frictionlessman·21 public vizzes

Loading thumbnail…

Fork of Cicle Following Mouse

This is an interactive SVG visualization built with React and D3.js v7, where a large black circle follows the mouse cursor across a 1000 by 500 pixel canvas. The circle’s center position updates in response to `onMouseMove` events, with mouse coordinates captured via `clientX` and `clientY` and stored in React state. The visualization demonstrates a straightforward use of React’s `useState` and `useCallback` hooks to manage dynamic positioning, rendered entirely through SVG elements without external data sources.

Loading thumbnail…

Cicle Following Mouse

A large black circle follows the mouse cursor across an SVG canvas in this React-based visualization. The circle is centered precisely on the pointer's position, updating in real time as the user moves the mouse. The implementation uses React's `useState` and `useCallback` hooks to track mouse coordinates, which are passed as `cx` and `cy` attributes to an SVG `<circle>` element. D3.js v7 is loaded for potential data manipulation, though the rendering relies on React's declarative updates triggered by the `onMouseMove` event handler.

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to fetch and parse a CSV file from a remote URL using native browser APIs, logging the raw text to the console. It shows the initial step of loading external data without any visualization or rendering. The code uses the Fetch API’s `fetch()` function and its `response.text()` method, wrapped in an async helper function called `fetchText`. The data source is a GitHub Gist containing CSS named colors, and the example runs entirely in vanilla JavaScript within an HTML page.

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates the initial step of loading and parsing CSV data for visualization. It fetches a remote CSV file containing CSS named colors using the Fetch API and logs the raw text to the browser console. The code defines an asynchronous `fetchText` helper that retrieves the file from a GitHub Gist URL, then calls it to output the data. No parsing or rendering occurs yet, making it a minimal foundation for subsequent data processing with JavaScript.

Loading thumbnail…

Fork of Part 6 Compartmentalizing Complexity

This example displays a grid of 18 randomly colored cartoon faces, each generated with React components and rendered as SVG. The code composes faces from separate components like `BackgroundCircle`, `Eyes`, and `Mouth`, using d3’s `arc` API to draw the mouth path. Each face uses randomized properties for eye radius and fill color, generated via `Math.random` and a hex color function, with all faces laid out in a grid using d3’s `range` utility.

Loading thumbnail…

Part 6 Compartmentalizing Complexity

A grid of randomly colored, cartoon-style faces demonstrates modular React component composition and D3-driven shape generation. The visualization renders six rows and three columns of faces, each with randomized eye size, mouth radius, and a hex color generated on the fly. The Face component assembles reusable BackgroundCircle, Eyes, and Mouth subcomponents inside a FaceContainer SVG wrapper. The Mouth uses d3.arc to compute a semicircular path, while React manages the component tree and D3’s range function generates the face indices.

Loading thumbnail…

Part 5 Split Multiple Files

This example builds a yellow smiley face using React and SVG, with componentized parts for the background circle, eyes, and mouth. The `index.js` file imports these components and renders them within an SVG element, translating the coordinate system to center the face. The background circle uses yellow fill and a black stroke, while the eyes are simple black circles positioned with calculated offsets. The mouth is created using a d3 arc function, which constructs a path with specific inner and outer radii to form the smile shape.

Loading thumbnail…

Fork of Smiley face part2 React

This example shows a yellow smiley face rendered with SVG shapes, including a circular background, two eyes, and a mouth drawn as an arc. The face is centered within a 1000x500 viewport using a translated group element. The code uses React to define components like `BackgroundCircle` and the main `App` component, while `d3.arc` generates the mouth path with specified inner and outer radii and angular ranges. ReactDOM attaches the SVG to the page, and styling removes page margins for a full-bleed display.

Loading thumbnail…

Fork of Fork of Don't give a shit face

This visualization renders a stylized, abstract face using React and D3.js. It draws a large circular head with gradients, two distinct eyes, an elliptical mouth, and a rectangular nose atop a polygon background. The code constructs the left eye arc with `d3.arc()`, while React elements handle SVG shapes for the face and features. Radial and linear gradients are defined via SVG `defs`, with colors applied through SVG fill and stroke attributes.

Loading thumbnail…

Fork of Don't give a shit face

This example renders an abstract, cartoonish face using React and D3’s `arc` generator alongside SVG shapes like circles, polygons, ellipses, and rectangles. The face features a radial and linear gradient background, a large circle with a thick orange stroke, offset eyes built from arcs and circles, and a mouth represented by an ellipse and a rounded rectangle. The code uses ReactDOM to mount the SVG, with D3 v7 providing the arc path for the left eye.

Loading thumbnail…

Don't give a shit face

This example renders a stylized, cartoon-like face using React and D3.js. The visualization combines SVG shapes—a radial gradient circle for the face, arcs for eyes, and rectangles for a nose and mouth—to create a deliberately indifferent expression. The left eye is drawn with a D3 arc generator (`d3.arc`), while other elements use direct SVG primitives. The code constructs the scene declaratively inside a React component, positioning all parts relative to the center of a fixed 950×500 viewport.

Loading thumbnail…

Fork of Fork of HTML Starter

This example shows a single ellipse filled with a vertical linear gradient, transitioning from magenta at the top to yellow at the bottom. The shape is rendered as an SVG element, with the gradient defined using the `<defs>` and `<linearGradient>` tags, and applied to the ellipse via the `fill` attribute referencing the gradient’s ID. The code is plain HTML and CSS, with no JavaScript or external libraries involved.

Loading thumbnail…

Fork of HTML Starter

This example displays a single purple-to-yellow gradient ellipse rendered inline within an SVG element. The SVG is defined directly in the HTML using an embedded linearGradient definition, with the ellipse’s fill referencing the gradient by ID. The page uses plain HTML and CSS, with no external libraries or JavaScript, to demonstrate a minimal SVG rendering approach.

Loading thumbnail…

Fork of Fork of React Starter

This example displays the text "Hello React!" centered on the page, with a static SVG ellipse below it that uses a radial gradient transitioning from transparent yellow to semi-transparent red. The visualization combines React 16.13.1 for rendering the DOM message via `ReactDOM.render`, while the SVG element defines its gradient using `<radialGradient>` and `<stop>` elements. No interactive behavior or data binding is present; the SVG is purely declarative markup embedded directly in the HTML file.

Loading thumbnail…

Fork of React Starter

This example displays a static SVG ellipse with a red-to-green radial gradient beneath a bold “Hello React!” message. The React component renders the text via `ReactDOM.render`, while the gradient is defined directly in the HTML using SVG’s `radialGradient` and `stop` elements. The code uses React 16.13.1 from unpkg and separates the visualization markup from the React app logic, though no interactive data or dynamic updates are present.

Loading thumbnail…

Fork of Don't give a shit face

This fork of "Don't give a shit face" uses React and D3 v7 to render an SVG face composed of a radial-gradient circle, two distinct eyes, an orange ellipse mouth, and a red tongue. The left eye uses `d3.arc()` to draw a half-ring, while the right eye combines concentric circles with stroke widths. Static geometric primitives define the composition.

Loading thumbnail…

Fork of Winking with Tongue out

This example draws a smiling face with a winking eye, tongue, and orange border using React and D3. The code renders SVG shapes, including circles for the face and eyes, an arc path for the closed eye, an ellipse for the mouth, and a rounded rectangle for the tongue. It uses the d3.arc() function to construct the wink and positions elements with transforms centered on the viewport. The visualization is static, with hardcoded dimensions and coordinates, and rendered through ReactDOM onto an SVG canvas.

Loading thumbnail…

Fork of Fork of Smiley face part2 React

This example renders a smiling face as a React component using SVG, with d3.arc to draw the mouth path. The face is centered within a 1000x500 viewport, featuring a pink circle for the head, two red eyes positioned with fixed offsets, and a blue arc mouth. The code imports React and ReactDOM, uses d3.v7, and applies inline styling to remove page margins. The rendering approach manually defines SVG circle and path elements within a translated group.

Loading thumbnail…

Fork of Smiley face part1

This example shows a yellow smiley face drawn with SVG circles on a React-based canvas. The face consists of a large outer circle for the head and two smaller black circles for eyes, all positioned relative to the canvas center. The code uses React and ReactDOM to render the SVG elements, with hardcoded dimensions and offsets defining the face’s geometry. The rendering approach is purely declarative SVG, with no external data source.

Loading thumbnail…

Fork of Smiley face part1

This example shows a simple smiley face composed of three circles: a large yellow circle for the head and two smaller red circles for eyes, all rendered on a light gray background. The static SVG diagram uses hardcoded coordinates and attributes such as width, height, and stroke properties to define the shapes. It demonstrates a basic React-starter workflow with CSS and JavaScript, relying on the SVG API for vector graphics without any interactivity or animation.

Loading thumbnail…

Hello Html

This example presents a minimal HTML page that renders a single red circle inside an SVG element. The page sets the body margin to zero and hides overflow, creating a clean canvas for the graphic. The code uses a basic SVG `<circle>` tag with a radius of 200 and a red fill, positioned within a 500-by-1000 pixel viewport. It demonstrates the foundational interplay of HTML structure, inline CSS styling, and the SVG rendering API. The example serves as a starting point for more complex web-based visualizations.