stefano@nava.ch

@nav-sna·4 public vizzes

Sol LeVitt Reproduction

This example reproduces a Sol LeWitt-style geometric drawing using React and SVG. It shows a grid of colored squares and rectangles arranged in a pattern reminiscent of the artist’s instructional wall drawings. The code renders the SVG with fixed dimensions and uses standard React components to manage the layout. It does not employ any data-viz libraries; instead, it relies on plain JavaScript logic to compute the shapes, with a simple data object demonstrating basic variable handling.

Oct 12, 2024

Loading thumbnail…

HTML Starter Line Chart

An HTML page displays a simple SVG line chart composed of three connected black line segments on a white background. The example demonstrates fundamental SVG rendering and CSS styling techniques, including both a `<style>` block and inline styles for colored headings. It uses the native SVG `<line>` element and properties like `stroke`, alongside JavaScript and CSS integration for basic page structure. The visualization serves as a bare-minimum starter for creating line charts without any external charting libraries.

Oct 10, 2024

Loading thumbnail…

HTML Starter Bar Chart

This example shows three horizontal bars of varying lengths rendered as SVG rectangles, each colored differently and labeled with text. The bars are drawn using the SVG `<rect>` element, with a white background and custom styling applied through CSS, including the Share Tech font. The page also displays a large "SVG Fundmentals" message, demonstrating basic HTML, CSS, and JavaScript integration without any external libraries or data sources.

Oct 10, 2024

Loading thumbnail…

Fork of HTML Starter

This example demonstrates fundamental SVG shapes—rectangles, circles, ellipses, lines, polylines, polygons, and paths—rendered directly into an SVG element with inline CSS and JavaScript. It serves as a minimal HTML starter page, using native SVG markup with attributes like `rx`, `stroke`, and `fill` to style transparent-outlined figures. The shapes are positioned across a 400-by-250 viewport, followed by a centered text label. The code relies entirely on browser-native SVG support and standard HTML/CSS, with no external libraries, illustrating basic vector graphics construction in a static React-free environment.

Oct 8, 2024