vmistry94@gmail.com

@vmistry94·8 public vizzes

First D3 Viz

This example creates a full-screen SVG pattern of intersecting horizontal and vertical bars, separated into two masked groups. D3’s `select` and `range` generate 100 rectangles per axis, while `symbol` and `symbols[7]` draw the star-shaped mask, and a circle forms the second mask. The masks reveal or hide parts of the grid, producing a geometric composition against a black-and-white backdrop. The visualization runs in a React framework using raw JavaScript and D3 v7, with no external data source.

May 10, 2024

Loading thumbnail…

Fork of Sol LeWitt Vertical

This SVG chart renders a generative art piece inspired by Sol LeWitt’s vertical line works, using a loop to place 100 black circles in a repeating pattern. The JavaScript creates circles via the `document.createElementNS` API, positioning each with an `cx` of 50-pixel increments and a `cy` that iterates from 0 to 99 per column. The result forms a dense vertical grid, with the circles overlapping slightly to create a rhythmic, striped texture. The code uses basic SVG primitives directly in the browser, with no external libraries, and scales to the full window dimensions.

Apr 25, 2024

Loading thumbnail…

Sol LeWitt Vertical

This generative visualization creates a minimalist grid of horizontal and vertical bars, inspired by Sol LeWitt’s geometric art and the bar chart taxonomy. It renders 100 horizontal stripes (masked to a central circle) and 100 vertical full-height lines, forming a dense crosshatch pattern. Built with raw JavaScript and the SVG DOM API, the code dynamically creates elements using `document.createElementNS` and applies a `mask` with a black circle to clip the horizontal bars, while the vertical bars remain unmasked, producing a striking contrast. No data is loaded; the piece is purely algorithmic, using the browser window dimensions for scaling.

Apr 22, 2024

Loading thumbnail…

JS Visualisation

This example generates a full-screen SVG visualization of 100 vertical bars, each spaced 20 pixels apart with a width of 10 pixels, filling the entire viewport height. The bars are created dynamically using the Document Object Model (DOM) API, specifically `createElementNS` for the SVG namespace, and appended to the document body. The chart uses the Poppins font for any text elements, though no text labels are rendered. The visualization shows a simple bar chart structure without data values, serving as a minimal template for bar chart taxonomy exploration.

Apr 22, 2024

Loading thumbnail…

Figma Chart

The chart displays a bar-chart taxonomy inspired by the DataViz Project, comparing multiple categories with rounded horizontal bars. Rendered as pure SVG, it uses inline `<rect>` and complex `<path>` elements to draw each bar with a layered, glossy highlight effect. The design relies on a custom Poppins typeface for text. Underlying data is represented through shape coordinates, with the rendering achieved through raw SVG markup, capturing a stylized, two-tone appearance for each bar.

Apr 16, 2024

Loading thumbnail…

SVG Bar Chart

This example presents a combined bar and line chart rendered entirely as inline SVG. Five color-coded bars (A–E) represent values on a primary axis, while a connected orange line with circular markers traces a second series scaled against a parallel axis on the right. The chart uses manual SVG primitives like `<rect>`, `<path>`, and `<circle>` with explicit coordinate and height attributes, styled via the Poppins font and hover opacity transitions. Gridlines and dual-axis labels clarify the two independent value ranges.

Apr 16, 2024

Loading thumbnail…

Pie Chart

This pie chart example demonstrates a simple single-slice visualization rendered as an SVG path. The graphic shows one wedge of a circle, drawn using the `d` attribute of an SVG `<path>` element with an arc command. The slice is centered within a 900x500 SVG canvas, using a hardcoded radius of 125 pixels. The visualization uses the Poppins font family for any text elements, though no labels or data values are currently included. The approach is a static, standalone HTML document without any JavaScript libraries, relying purely on manual SVG path coordinates for its construction.

Apr 16, 2024

Loading thumbnail…

SVG Bar Chart w/ Curved Line

This example presents a hybrid bar and line chart. Five labeled bars display categorical values, while two distinct line charts—one straight and one using Bezier curves—overlay the same categories to show different trend representations. The visualization uses raw SVG elements, including `rect`, `path`, and `circle`, to render the graphics. The code uses straight and curved paths, with axes, labels, and gridlines implemented via SVG line and text elements.

Apr 15, 2024