M

Marcus Vinicius da Silveira Richa

@ahoymarcus·17 public vizzes

Loading thumbnail…

D3 Selection Exploration

A dynamic set of circles animates across the screen, with positions and radii fluctuating sinusoidally over time. The visualization demonstrates D3's data join pattern, where an SVG selection binds to an array of generated points and updates each frame. Using `select` and `join`, the code continuously enters, updates, and exits circle elements based on data from `makeData`. The interval-driven animation synchronizes circle movement and sizing, showcasing D3 v6 selection methods within a React-compatible structure.

Loading thumbnail…

Fork of HTML Starter

This example displays the text "Hello HTML!" in a large, centered message using CSS styling. The page structure is defined in an HTML file with a div element, while the styling controls the font size and text alignment. The project includes a dependency on D3 version 6.6.2, though the JavaScript section is currently empty. The visualization demonstrates a basic HTML and CSS setup within a React framework context, derived from an original HTML starter template.

Loading thumbnail…

Full Sol LeWitt Reproduction with D3.js

This example reproduces a Sol LeWitt art piece using D3.js and SVG. It generates a grid of horizontal and vertical rectangles, then applies two masks that shape the visible pattern. The masks are created with D3’s `symbol` and `symbols` APIs, placing geometric symbols in alternating black-and-white fills to selectively hide or reveal parts of the grid. The code uses `select`, `range`, and `.join()` to efficiently render the elements, with the rendering confined to the full browser viewport.

Loading thumbnail…

Sol LeWitt Reproduction with D3.js

A D3.js reproduction of a Sol LeWitt art piece uses 100 horizontal and vertical striped rectangles overlaid with two circular SVG masks to create a geometric grid pattern with an intersecting circle. The horizontal bars are masked by a black background with a white circle, while vertical bars use an inverse white mask with a black circle, producing a contrasting visual effect. Built with d3.select and d3.range, the SVG rendering fills the entire browser window. The code includes commented-out decoupled and vanilla JavaScript alternatives.

Loading thumbnail…

Fork of Sol LeWitt Reproduction

This visualization reproduces a Sol LeWitt art piece using SVG elements and mask-based compositing. It shows a grid of horizontal and vertical stripes that intersect within a central circular region, creating a geometric pattern where line orientations alternate inside and outside the circle. The code uses raw SVG DOM manipulation via `createElementNS` to build rectangles and defines two masks (`circle-mask` and `circle-mask-2`) to control visibility. Horizontal stripes appear inside the circle, while vertical stripes fill the outer area, demonstrating how SVG masks can selectively reveal layered shapes.

Loading thumbnail…

Pseudo Boxplot Chart

A pseudo boxplot chart illustrates the distribution of a dataset using static SVG shapes. The visualization shows a box-and-whisker diagram created from hand-coded SVG elements—a rectangle for the interquartile range, lines for whiskers, circles for median and outliers, and a row of circles for individual data points. The chart uses React to render an SVG canvas and applies the Share Tech font from Google Fonts. It constructs the pseudo boxplot entirely through explicit SVG primitives, including `rect`, `line`, and `circle` elements, without relying on a charting library.

Loading thumbnail…

SVG Fundamentals

This example demonstrates a minimal SVG page that renders three fundamental shapes—a circle, a line, and a path—using raw SVG elements within an HTML document. The SVG canvas is sized 600 by 800 pixels, with the circle and line given explicit coordinates and styling, while the path uses a cubic Bézier-like curve defined by move and line commands. It relies on standard web technologies—HTML, CSS, and JavaScript—with the Share Tech font applied to any text. There is no data source or interaction, serving as a pure illustration of SVG primitives.

Loading thumbnail…

Fork of SVG Fundamentals Dynamic landscape

A dynamic SVG landscape cycles through a day-night transition, animating a sun descending and rising over layered mountain silhouettes. The scene uses radial and linear gradients whose colors oscillate between aliceblue and indigo or steelblue, driven by SMIL `<animate>` elements on the gradient stops and the sun’s vertical position. The three mountain paths are drawn with static `d` attributes and filled with the animated gradients, producing a minimalist sunrise-to-sunset effect entirely through declarative SVG animations.

Loading thumbnail…

Fork of SVG shapes and animation sandbox

A sandbox of layered SVG shapes and animation, this visualization builds a stylized sky from stacked rectangular strips and drifts clouds along curved paths. It demonstrates how nested `<svg>` elements and the `animateMotion` API can move cloud groups across the scene, while a hand-drawn flower shows off vector shapes like circles and paths. The rendering relies entirely on inline SVG markup, with no external data, instead focusing on color, motion, and primitive geometry composition.

Loading thumbnail…

Smiley - Part I - HTML

This example demonstrates how to draw a static smiley face using raw HTML, CSS, and JavaScript, rendering two eyes and a head as SVG circles. The code uses inline SVG elements within an HTML page, with styling applied via a CSS rule that removes the page margin. The smiley is constructed by manually positioning each circle element using explicit `cx` and `cy` coordinates within an SVG canvas, without relying on any external libraries or data sources.

Loading thumbnail…

Preparing and Loadinng data

This example demonstrates how to fetch and prepare a CSV dataset for visualization, using the Fetch API with async/await to load a list of CSS named colors from a GitHub Gist. The code shows the modern asynchronous pattern of await fetch() and response.text() to retrieve raw text data, replacing the older nested Promise approach often called the "pyramid of doom." The example logs the data to the console, illustrating a clean template for later parsing and visualization with a library like D3.

Loading thumbnail…

Preparing and Loading data

This example demonstrates a static SVG face composed of a yellow circle with black stroke for the head and two smaller circles for eyes, rendered on an HTML page. The code uses inline SVG elements with explicit coordinates for positioning, a brief CSS reset to remove margins, and a minimal JavaScript-free approach. It shows how to prepare basic geometric shapes as data for visualization, with the SVG viewport set to 960 by 500 pixels. The rendering relies entirely on hand-coded SVG attributes rather than a visualization library, serving as a bare-bones template for loading and displaying simple shapes.

Loading thumbnail…

Modular Smiley - Part VI - React-JS

A grid of randomly generated SVG smiley faces, each built from modular React components, fills the canvas. The code assembles each face from separate `BackgroundFace`, `Eye`, and `Mouth` components, with the mouth created using the d3 `arc` generator for a precise half-circle path. Each face receives randomized values for stroke width, eye offset, eye radius, and mouth dimensions, producing a playful variety of expressions. All faces are rendered inside a single SVG container, with each face positioned using a group transformation.

Loading thumbnail…

Modular Smiley - Part V - React-JS

The Modular Smiley face renders a yellow circular background with two eyes and an arc-shaped mouth using React components and SVG. The mouth is generated with d3.arc using an inner radius, outer radius, and specific start and end angles. The code uses React functional components and ReactDOM.render to mount the visualization to the DOM. The SVG grouping element with a translate transform positions the eyes and mouth relative to the face center, while the background circle uses computed radius and stroke-width values.

Loading thumbnail…

Modular Smiley - Part IV - React-JS

This example shows a modular smiley face built with React and D3, rendered as SVG. It separates the face into reusable components: a yellow background circle, two eyes, and a mouth drawn with D3's `arc` generator. The components are positioned using SVG `<g>` transforms for translation. The code uses D3 v7's `arc()` function to create the mouth path and React 17 for component composition, with `ReactDOM.render` mounting the app to the root element.

Loading thumbnail…

Tweak the Face - Part III - React-JS

This interactive React data visualization renders a stylized face constructed from SVG shapes, using D3.js utilities to define arcs and paths. The face is centered within a 960 by 500 pixel viewport, composed of a yellow circle with a black outline, two eyes, and a mouth formed by an arc. The entire composition is grouped and positioned using SVG transforms, with circles and paths placed relative to a central origin point. The code demonstrates how to combine React’s component-based structure with D3’s arc generator and SVG elements to create a playful, adjustable graphic.

Loading thumbnail…

Smiley - Part II - React-JS

This example renders a yellow smiley face as an SVG graphic using React components and D3’s `arc` generator for the mouth. It positions the face’s circles via a `<g>` transform centered at (480, 250), setting static radii and offsets for the eyes and mouth. The code imports React, ReactDOM, and `arc` from d3.v7, then mounts the `<App>` component into the DOM. The rendering approach is declarative JSX, producing a single SVG with three circles and one path element.