avcwisesa

@avcwisesa·10 public vizzes

Sol LeWitt

This example displays 50 vertical rectangles arranged in a repeating grid, filling the browser window with a pattern inspired by Sol LeWitt’s minimalist art. Each rectangle is positioned at an x-coordinate of 20 times its index, with a fixed width of 10 and a height equal to the full viewport. The visualization uses the SVG namespace and dynamically creates elements via `document.createElementNS`, setting width and height attributes from `window.innerWidth` and `window.innerHeight`. The code appends all shapes to a single SVG container without any interaction or data-driven updates.

Apr 5, 2021

Loading thumbnail…

Partial Fill Icon

This example shows a single tree icon rendered as an SVG path, where a linear gradient fills 40% of the shape with green and the remaining portion with a muted gray-green. The fill amount is passed as a prop to a React component, with the gradient stops using that value to create the partial-fill effect. The code uses React 16.13.1 to render the SVG, and the gradient is defined with `<linearGradient>` and `<stop>` elements, using `gradientUnits="userSpaceOnUse"` to position the fill relative to the icon’s bounding box. The static fill amount is hard-coded to 0.4 in the `App` component.

Apr 5, 2021

Loading thumbnail…

Iterating with Vega-Lite API

This example shows the number of airports per U.S. state, rendered as bars positioned on an Albers USA map projection. Built with the Vega-Lite API, it registers Vega and Vega-Lite, then uses a bar mark with a count transform and a projection to create the spatial layout. The visualization reads airport data from the vega-datasets package, applies custom styling from a config file, and renders to canvas with tooltips enabled.

Mar 21, 2021

Loading thumbnail…

Pseudo Icon Array

This pseudo icon array visualizes the carbon offsetting of electronic appliance usage, showing a grid of stylized leaf icons. The SVG-based rendering uses individual paths to represent each leaf within the array, drawn with fill colors from a green palette. The visualization demonstrates an icon array chart layout, with each glyph representing a single unit of data. The code leverages raw SVG elements and path data to construct the repeating icon pattern, maintaining visual consistency across the dataset.

Mar 18, 2021

Loading thumbnail…

Loading Data with React and D3

This example demonstrates how to load and summarize a CSV dataset within a React application, displaying the row count, column count, and file size in kilobytes. The code uses React’s `useState` and `useEffect` hooks to manage the asynchronous loading state, while D3’s `csv` function fetches the data from a GitHub gist. Once loaded, a custom `message` function formats the summary using `d3.csvFormat` to compute the byte size, and the result is rendered as large text. The visualization is purely textual, showing loading progress until the data arrives.

Mar 11, 2021

Loading thumbnail…

Load and Parse CSV

This example demonstrates loading and parsing a CSV file from a remote URL, then displaying basic dataset statistics as plain text. The program uses d3.csv to fetch and parse a named-color table, then reports the row count, column count, and approximate file size using d3.csvFormat to measure the formatted data. The page’s HTML pre element updates with these three values. It also includes commented alternatives using async/await with fetch and d3.csvParse, as well as nested promise callbacks, illustrating different approaches to asynchronous CSV handling.

Mar 11, 2021

Loading thumbnail…

Mouse Follower

A black circle follows the mouse cursor across an SVG canvas. The visualization uses React state to track the cursor's position and updates the circle's center coordinates in real time. The code leverages React hooks like `useState` and `useCallback`, with the `arc` function imported from d3, though only a standard `circle` element is rendered. The SVG's `onMouseMove` handler drives the interaction, displaying a simple, responsive pointer-tracking effect.

Mar 11, 2021

Loading thumbnail…

Compartmentalized Vision

The example shows a grid of abstract, stylized robot-like faces with gradient eyes, a diamond nose, and an arc mouth, each rendered in randomized color combinations. Built with React and SVG, it defines modular face components—background, eyes, mouth, and container—and composes them into a larger array. Using D3’s `randomUniform`, `interpolate`, and `range` functions, the code generates 35 faces with varied color palettes, while D3’s `arc` API constructs the mouth’s annular sector path.

Mar 8, 2021

Loading thumbnail…

Smiley 1

A stylized smiley face is drawn with React and rendered as SVG, featuring a green circular background, red semi-transparent eye shapes, gradient-filled irises, a yellow diamond nose, and a curved mouth generated using d3.arc. The face is centered using a FaceContainer that applies a translation transform, while individual components like Eyes, BackgroundFace, and Mouth manage their own SVG elements. React 17 and D3 v6 are used, with the mouth path computed via d3.arc’s inner and outer radii and angle intervals.

Mar 7, 2021

Loading thumbnail…

The Vision!

This visualization recreates the Marvel character Vision’s face as a geometric SVG portrait, inspired by the WandaVision series. It shows a green circular head with overlapping red shapes forming facial features, yellow hexagonal eyes with cyan and silver gradients, and a red mouth, all composed entirely of basic SVG primitives like circles, rectangles, and paths. The rendering uses inline SVG with a linearGradient definition and transforms such as skew, scale, and rotate to construct the stylized face. No external JavaScript libraries are used; the design relies purely on static SVG markup and CSS styling.

Mar 7, 2021