jam9501

@jam9501·2 public vizzes

Part 1

This example shows a simple static visualization of a smiley face constructed from three SVG circles: a large yellow circle for the head and two smaller black circles for the eyes. The HTML file directly defines the SVG with hard-coded positions and styling, while the React application renders an empty `VizContainer` that demonstrates the margin convention with visible gray background rectangles. The code uses React and ReactDOM for component rendering, along with D3’s margin-based layout pattern. The `VizContainer` component abstracts the SVG and group elements, allowing easy removal of margin display via a prop.

Feb 6, 2022

Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a static partially completed smiley face drawn with SVG primitives. A large yellow circle with a black stroke forms the head, while two smaller unfilled circles represent the eyes. The code uses raw SVG elements—`<circle>` tags with explicit `cx`, `cy`, `r`, `fill`, and `stroke` attributes—inside an inline `<svg>` block. No JavaScript libraries are employed; the rendering is purely declarative SVG markup, positioned within a 960×500 viewport.

Jan 10, 2022