Nixonthiyagesh-Hexa

@Nixonthiyagesh-Hexa·7 public vizzes

Fork of Fork of Sol LeWitt Reproduction with D3

A fork of the original code reproduces an algorithmic drawing inspired by Sol LeWitt using D3 and SVG rendering. The piece displays a series of vertical and horizontal rectangular bands that form a grid-like pattern, with a circular mask creating a lens effect over the composition. The visible bar chart at the bottom renders a static dataset of nine values using D3's `select` and `join` methods to create SVG rectangles with height proportional to the data. The implementation uses the `d3` library (version 6.6.1) and relies on programmatic SVG construction to generate the visual output.

Oct 21, 2022

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

A D3.js SVG bar chart displays nine rectangular bars with numerical labels, representing a simple dataset. The chart uses D3's selection and joining methods to create rectangles and text elements, with computed x, y, width, and height attributes from data values. The visualization shows a basic bar chart layout with spacing between bars and labels positioned above each bar. The code leverages D3's data-driven approach to generate chart marks programmatically.

Oct 20, 2022

Loading thumbnail…

Fork of Pseudo Horizontal Bar Chart

A fork of the "Pseudo Horizontal Bar Chart" example, this SVG visualization renders four labeled bars (A through D) as plain black rectangles on a white canvas. The chart compares categorical values through the varying widths of each bar, with the first bar distinguished by an outlined stroke and no fill. Built with raw SVG elements—`rect` and `text`—and styled using the Share Tech font, the chart is rendered directly in HTML without any JavaScript libraries or data-binding code.

Oct 20, 2022

Loading thumbnail…

Fork of SVG Fundamentals

The visualization demonstrates fundamental SVG shapes, including overlapping circles, a line, and two distinct path elements, rendered on a 960-by-500 canvas. It highlights how fill and stroke attributes affect appearance, with a red and green circle overlapping, a navy line, and paths drawn in black. The example also includes commented-out code for a rectangle, showing alternative shape configurations. The HTML file directly embeds SVG markup, with CSS resetting margins and hiding overflow, presenting a clean, minimalist demonstration of vector graphics primitives.

Oct 20, 2022

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This visualization reproduces a Sol LeWitt-inspired geometric composition using D3 v3, rendering a grid of alternating horizontal and vertical bars that form a crosshatch pattern within a large circular boundary. The bars are clipped using two SVG masks—one that reveals a red-filled circle and another that uses a rect and circle to create an inverse cutout effect. The code uses D3 selections, `range`, and the `join` method to generate and attach the SVG rect elements, demonstrating a minimal, data-driven approach to procedural art.

Oct 19, 2022

Loading thumbnail…

Fork of SVG Fundamentals

This example demonstrates basic SVG shape rendering in a browser, combining primitive elements in a single view. It showcases overlapping circles with different fill colors, a pair of styled line segments, and a freeform path drawn with straight and relative commands. The markup uses raw SVG syntax within an HTML document, relying on the browser’s native SVG engine rather than an external library. Static attributes like `cx`, `cy`, `r`, and `stroke-width` control geometry and styling, while the commented-out rectangle and an incomplete path element indicate a work-in-progress scaffold. The canvas is 1290×500 units, with no interaction or data-driven content.

Oct 19, 2022

Loading thumbnail…

Fork of Fill & Stroke

This example from the v3 gallery demonstrates SVG shape rendering through a static composition of rectangles. The code uses only native SVG elements—`rect` tags—positioned at varying coordinates on a green background, with some rectangles overlapping to create a layered visual effect. The rendering approach relies on inline SVG within an HTML document, specifying explicit width and height attributes for each shape. The fork shows how simple geometric primitives can be arranged to form a basic data-visualization aesthetic without additional JavaScript libraries or dynamic data sources.

Oct 19, 2022