edmundo.guerra.ipad@gmail.com

@exguerra·4 public vizzes

Fork of HTML Starter

This example shows a simple bar chart of 20 numeric values using D3. It renders an SVG with rectangles and text labels, where bar height and color intensity map to each data point. The code uses `d3.select` to build the SVG, `.data()` with `.enter()` to bind the dataset, and `.append('rect')` and `.append('text')` to draw the visualization. Bars are positioned with computed `x`, `y`, and `height` attributes, while labels display the values in white sans-serif text.

Feb 11, 2025

Loading thumbnail…

Examples exgm

This example demonstrates a collection of SVG shapes, including circles, rectangles, and paths, rendered dynamically on a web page. It uses D3.js to bind data to SVG elements and apply interactive transitions, such as position changes and color shifts, upon user clicks. The visualization also employs CSS for styling and layout, while the shapes are generated programmatically rather than from an external dataset. The code highlights fundamental D3 selection, data-join, and transition APIs, serving as a foundational template for building custom SVG-based charts.

Feb 11, 2025

Loading thumbnail…

Fork of SVG Fundamentals

This example demonstrates basic SVG shape rendering within an HTML page. It shows overlapping circles in red and green, a diagonal navy line, a curved path, and a polyline path, all defined inline within an `<svg>` element. The code uses standard SVG attributes such as `cx`, `cy`, `r`, `fill`, `stroke`, and `d` for path data. The HTML includes CSS to remove margin and hide overflow, and the SVG canvas is set to 960 by 500 pixels.

Feb 11, 2025

Loading thumbnail…

Fork of HTML Starter

This example demonstrates fundamental SVG shapes, including a circle and a rectangle, composed within a single canvas. The rectangle illustrates both a red stroke and a blue fill, while a second circle is rendered in red, showing how visual properties can vary per element. The code directly uses standard HTML and SVG APIs—specifically the `<svg>`, `<circle>`, and `<rect>` elements—within a simple, self-contained HTML page, with no external libraries involved. The rendering approach is purely declarative SVG markup.

May 16, 2024