Everton Rocha

@alotusrocha·7 public vizzes

SVG Fundamentos

An SVG scene of two circles, one black and one red, demonstrates fundamental geometric shapes and the `fill` attribute for styling in SVG. The page uses plain HTML structure, a static `<svg>` element with hardcoded `cx`, `cy`, and `r` attributes, and no external libraries or JavaScript. It serves as a bare-bones example of declarative vector graphics rendering in the browser, using only the native SVG API on a simple HTML document.

Aug 17, 2022

Loading thumbnail…

Mouse Seguindo

A circle tracks the user's mouse pointer across an SVG canvas, updating its position in real time to follow the cursor. The visualization demonstrates a minimal interactive component built with React's `useState` and `useCallback` hooks to manage and update mouse coordinates. The app listens for mouse movement events on the `<svg>` element and renders the circle with D3's `arc` import, though only the basic circle element is used. It relies on React 16.9 and D3 v5, with rendering handled entirely through SVG.

Mar 16, 2021

Loading thumbnail…

Fork of Mouse Follower

A circle follows the mouse cursor across a 960 by 500 SVG canvas, updating its position in real time. Built with React, the app tracks `onMouseMove` events to store the cursor’s coordinates in state and re-renders a single `<circle>` element with the new `cx` and `cy` values. The example uses React’s `useState` and `useCallback` hooks alongside ReactDOM, with visual output rendered entirely as SVG.

Mar 10, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This visualization shows a summary of a CSV file’s contents, displaying the file size in kilobytes, the number of rows, and the number of columns in large text. It loads data from a remote CSV file containing CSS named colors using `d3.csv`, which parses the data asynchronously. The program then uses `d3.csvFormat` to calculate the file size in kilobytes and accesses the parsed data’s `length` and `columns.length` properties to determine row and column counts, displaying the results in a `pre` element.

Mar 9, 2021

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example displays basic statistics about a CSV dataset containing CSS named colors, showing the file size in kilobytes, the number of rows, and the number of columns in large text. It loads the data from a GitHub gist using d3.csv, which returns a promise, then formats the computed metrics with d3.csvFormat and string concatenation. The code also includes commented-out alternatives using the Fetch API with async/await and d3.csvParse, as well as a nested promise “pyramid of doom” pattern for comparison. The visualization itself is minimal, relying solely on a styled pre element to render the text output.

Mar 5, 2021

Loading thumbnail…

Smile Face part I

A grid of 15 smiley faces renders inside a React application using SVG. Each face is composed of a yellow background circle, two offset eyes, and an arc-based mouth. The faces differ slightly in stroke width, eye position and size, and mouth thickness due to randomized parameters passed to the `Face` component. The visualization uses D3’s `arc` generator to construct the mouth path, while the overall layout is generated with D3’s `range` function.

Mar 5, 2021

Loading thumbnail…

Fork of Smile Face part I - Everton

This fork of the Smile Face part I example renders a static yellow smiley face in SVG using React and D3.js. The code defines the face’s geometry with D3’s `arc` generator to create the mouth and shadow arcs, while positioning the eyes and face circle with explicit coordinates. The visualization shows the face centered in a 960×500 viewport, using simple shape primitives (circles and paths) drawn with SVG. The rendering is purely declarative, with no animation or interaction, and the source is a minimal React component that outputs the SVG directly to the page.

Mar 3, 2021