ineshp2020@gmail.com

@Inesh-P·5 public vizzes

Fork of Blank Canvas

This example creates a full-screen, rounded rectangle that fills the browser window. It uses D3 v5 to select the SVG element and dynamically sets its dimensions based on the viewport’s client width and height. The code appends a single `rect` element with a 40-pixel corner radius, rendering a minimal blank canvas. No data is loaded; the focus is purely on establishing a responsive SVG drawing surface using D3’s `select` and attribute manipulation.

Oct 2, 2024

Loading thumbnail…

SVG Fundamentals - Inesh

This example demonstrates a set of basic SVG shapes rendered directly within an HTML document, including circles, rectangles, a line, and an ellipse. It showcases core SVG styling attributes such as fill colors, stroke width, and stroke color applied to each element. The visualization is created using raw SVG markup without any external libraries, presenting a static composition of geometric primitives on a 500 by 500 pixel canvas. The code relies on the native SVG coordinate system, defining positions and dimensions via attributes like `cx`, `cy`, `r`, `x`, `y`, `width`, and `height`.

Oct 2, 2024

Loading thumbnail…

Sol LeWitt Reproduction with D3 - inesh

This example reproduces a Sol LeWitt artwork using D3 v3 and SVG. It displays a grid of thin horizontal and vertical rectangles layered over each other, with two mask patterns cutting through them to create a dynamic geometric composition. The code uses `d3.select`, `d3.range`, and `d3.symbols` to generate shapes, and constructs two SVG masks via `renderMask`—one inverted and one standard—each containing a row of symbols applied to the rectangular bands. The rendering is purely SVG-based, with no external data source, and the layout adapts to the full browser window.

Sep 24, 2024

Loading thumbnail…

Full Sol LeWitt Reproduction with D3 - inesh

This example reproduces a Sol LeWitt wall drawing using D3.js, rendering the artwork entirely with SVG. The piece is constructed from two alternating sets of vertical and horizontal rectangles, each masked to reveal different geometric symbols. D3’s `select`, `range`, and `symbol` functions generate the masks and position the shapes across the canvas, using seven distinct symbol-driven bands to create the final composition. The SVG output fills the browser window, with each band offset horizontally to mirror the original artwork’s grid-based design.

Sep 24, 2024

Loading thumbnail…

Fork of Pseudo Scatter Plot

A scatter plot approximation displays six circles of equal size arranged diagonally across an SVG canvas, from the lower-left to upper-right. The circles sit at increasing x-coordinates while their y-coordinates decrease, suggesting a trend. The visualization uses static SVG `<circle>` elements with explicitly defined `cx`, `cy`, and `r` attributes, rather than a data-driven framework. This minimal, hand-coded example demonstrates basic SVG positioning without any JavaScript libraries or dynamic rendering.

Sep 6, 2024