sfdcSamer Testing

@sfdcSamer·3 public vizzes

Fork of Let's Make a Face Part I

This example shows a simple smiley face constructed from three basic SVG shapes: a yellow circle for the head and two smaller circles for the eyes, with the head positioned off-center to suggest part of a larger composition. The page renders the graphic directly in an inline SVG element, using hard-coded coordinates and the `circle` tag with explicit `cx`, `cy`, and `r` attributes. The head features a black outline applied via the `stroke` and `stroke-width` attributes, while the eyes remain unfilled. The HTML document contains minimal styling, only removing margins and hiding overflow to display the vector drawing cleanly.

Oct 1, 2021

Loading thumbnail…

Fork of HTML Starter

This example shows a simple, single circle rendered on a blank SVG canvas. The page relies on a minimal HTML structure with inline CSS to center the content and hide scrollbars, while the SVG element defines a fixed 960 by 500 pixel drawing area. The code uses the native SVG `<circle>` element with a large radius, though the circle has no position or fill attributes set. No JavaScript libraries or data sources are used; the rendering is purely declarative SVG within the HTML document.

Jul 6, 2021

Loading thumbnail…

Fork of D3 Selections (with lines)

An animated array of green circles and vertical lines undulates across the screen, with circle radii and y-positions oscillating sinusoidally. The visualization demonstrates D3's data-join pattern by using `selection.join` to update both `circle` and `line` elements, while an ES6 named import separates the rendering logic in `vizData.js` from the procedural data generation in `makeData.js`. A `d3.scaleLinear` maps circle radii to stroke colors ranging from white to green. The animation runs via `setInterval` at roughly 60 frames per second, updating the scene with new, parameterized data points.

Jul 3, 2021