Danilo Moraes

@Kaluribr·5 public vizzes

Sol LeWtt Reproduction

This example reproduces a minimalist Sol LeWitt-inspired drawing using only SVG and JavaScript. It generates a series of 100 vertical rectangles with varying widths, creating a rhythmic grid pattern that spans the full height of the viewport. The code uses the Document Object Model (DOM) method `createElementNS` to construct SVG elements directly, with a simple `for` loop to position each rectangle horizontally. No external libraries are required—only standard JavaScript and CSS within a single HTML file. The result is a clean, geometric composition that fills the window dynamically.

May 12, 2022

Loading thumbnail…

Pseudo Horizontal bar chart

This example demonstrates a pseudo horizontal bar chart that uses narrow vertical rectangles to encode four values for categories A through D. The chart is hand-coded with SVG shapes, where each `<path>` element defines a rectangle via its edge coordinates, and `<text>` elements label the bars. The design uses an HTML/CSS foundation with the Share Tech font and custom styling for the first bar. This particular bar chart is implemented in React, leveraging SVG for all visual rendering.

May 9, 2022

Loading thumbnail…

Pseudo Scatt bar chart

This pseudo scatter bar chart displays four black vertical bars of varying heights on a white background, suggesting a simplified bar chart or scatter plot hybrid. The HTML page uses inline SVG with rectangular elements explicitly positioned and sized to create the visual effect. The design relies on raw SVG markup within the index.html file, utilizing basic CSS for page styling and body margin reset, while the React framework and JavaScript are referenced but not actively implemented in the visible code.

May 8, 2022

Loading thumbnail…

Pseudo Scatt

This example, titled “Pseudo Scatt,” presents a minimal static scatterplot-like composition using raw SVG elements. It shows seven blue circles positioned across a white 960×500 canvas, with no axes, labels, or data encoding beyond the circles’ coordinates. The rendering approach relies on hand-coded SVG `<circle>` and `<rect>` elements within a plain HTML page, using CSS only for styling and overflow control. No JavaScript libraries or data sources are involved; the visual is entirely defined by hardcoded SVG markup, offering a simple, non-interactive illustration of geometric placement.

May 8, 2022

Loading thumbnail…

Bases do SVG

This example demonstrates basic SVG drawing primitives in an HTML5 page, showing how to construct geometric shapes with strokes and fills. It features multiple paths, circles, a line, and a rectangle, with different coordinate values and stroke styling to illustrate variations in rendering. The code uses raw SVG elements like `path`, `circle`, `line`, and `rect` within an `svg` tag, with attributes such as `stroke`, `stroke-width`, and `fill` controlling appearance. All shapes are outlined rather than filled, and the rectangle spans the full canvas area to serve as a frame. The static scene is rendered directly in the browser from inline markup.

May 5, 2022