Claudio Puggioni

@ClaudioPuggioni·9 public vizzes

Full Sol LeWitt Reproduction with D3

A procedural SVG recreation of a Sol LeWitt wall drawing renders a grid of horizontal and vertical stripes across the full viewport. Two sets of D3 selections generate 100 evenly spaced rectangles each, with one group aligned along the y-axis and the other along the x-axis. The stripes are masked so they only appear within two overlapping circles at the center, created using `d3.select` to append SVG `mask` elements with contrasting fill values. The result is a minimalist, geometric composition driven by D3 v7's `range` and `join` methods.

May 25, 2023

Loading thumbnail…

Sol LeWitt Reproduction with D3

A Sol LeWitt-inspired generative drawing fills the browser window with a grid of horizontal and vertical stripes. The piece uses two circular SVG masks to invert the stripe pattern within a central circle, creating a subtle visual contrast against the background. The code employs D3.js version 7.8.4, utilizing `select` and `range` from the library to construct SVG elements. Rendering is done entirely through SVG. The `append`, `attr`, and `join` methods are used to build the masks and the striped rectangles programmatically, with the masks defining the visible region.

May 25, 2023

Loading thumbnail…

My Sol LeWitt Reproduction

A faithful reproduction of a Sol LeWitt wall drawing uses two stacked SVG layers to create a grid-based optical illusion. The first layer fills the viewport with vertical bars, masked so they are hidden inside a central circle, while the second layer overlays horizontal bars with an inverted mask, revealing them only within that same circle. The result is a crisp, intersecting lattice pattern that swaps orientation inside the circular boundary. The code builds all elements dynamically via the standard DOM API, using SVG masks, `createElementNS`, and fixed positioning to align the layers.

May 14, 2023

Loading thumbnail…

Recreation of Visualization Taxonomy

This visualization recreates a taxonomy of chart types as a layered area chart, using a pink gradient palette to distinguish five hierarchical rows of categories. The SVG rendering relies on hardcoded path data with distinct quadratic curves and clipped rect boundaries, while the HTML structure defines the 895×606 viewBox with a clipPath to contain the shapes. The paths are drawn with white strokes to separate each band, and the design maps categorical divisions through stacked, wavy regions rather than interactive elements.

May 14, 2023

Loading thumbnail…

Line Graph

This line graph example displays a single smooth curve that dips and rises across a blank SVG canvas, tracing a sinusoidal-like pattern from the left edge to the right. The path is drawn with a thick black stroke and rounded line caps on a 781×554 viewBox. The visualization is rendered using React with inline SVG, with the line’s coordinates hardcoded in one path element. No data source or interactivity is present; the example focuses purely on basic SVG path rendering within a minimal HTML page.

May 12, 2023

Loading thumbnail…

Side Bar Chart

A horizontal bar chart displays four categories (A, B, C, D) with bars of varying lengths, drawn as SVG rectangles with custom hex fills. The chart uses static CSS styling to position category labels in a large Share Tech font, while the SVG viewBox defines the 827×555 coordinate space. This React-based example (from vizhub's v3 starter) renders purely through declarative SVG markup, with no JavaScript libraries or data binding beyond the hardcoded values.

May 12, 2023

Loading thumbnail…

Bar Chart

This example shows a bar chart with five rectangular bars of varying heights, rendered as black shapes against a white background. It presents categorical data where each bar’s height encodes a value, with the chart drawn directly in SVG using hard-coded `rect` elements. The visualization is built with React and relies on plain SVG markup, not a data-binding library like D3, as all dimensions and positions are explicitly defined within the JSX structure. The bars sit on a baseline, and the black-on-white contrast emphasizes the length differences across categories.

May 12, 2023

Loading thumbnail…

Scatterplot

A scatterplot displays 12 black circles at varying positions across an SVG canvas, suggesting a simple distribution of data points without axes or labels. The visualization uses static SVG circle elements rendered within an HTML page, with coordinates and radii defined directly in the markup. CSS styles center the container and remove page margins. The implementation relies on plain JavaScript-free HTML, utilizing inline SVG properties rather than a framework or data-generation library.

May 12, 2023

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes and their attributes in a static visualization. It shows circles with varying fill colors, a rectangle with both fill and stroke styling, and geometric paths that form a crude stick figure. The code uses raw SVG elements—`circle`, `rect`, `line`, and `path`—to construct the composition. Each shape is defined with inline XML attributes such as `cx`, `cy`, `r`, `x`, `y`, `width`, `height`, and `d` for path data, with no external JavaScript libraries or data sources.

May 12, 2023