Mark Moesch

@markmoesch·3 public vizzes

Lets Make a Face

This example demonstrates how to build an SVG face using basic geometric shapes, with each facial feature drawn as a separate path element. The visualization relies on standard SVG markup within an HTML document, styling the paths with CSS properties like stroke color and line join. The code uses the inline `<svg>` element with a defined width and height, while the CSS classes apply consistent black stroke styling with a custom teal color for path elements. The face is constructed entirely through code rather than importing external image data.

Oct 2, 2019

Loading thumbnail…

Let's make a face with D3.js!

A smiling face drawn with SVG shapes responds to a looping animated transition: the eyebrows move upward, hold, then return. The example demonstrates fundamental D3.js DOM manipulation, building the face from a yellow circle, two dark eyes, rectangular eyebrows, and a smile-shaped path generated with the `d3.arc()` function. D3.js v5 selects the SVG element, appends groups for coordinated positioning, and uses `transition().duration(2000)` to animate the eyebrow group's vertical offset. All elements are styled directly via attributes like `fill` and `stroke` within an 960×500 SVG canvas.

Oct 2, 2019

Loading thumbnail…

Shapes and Colors with SVG and CSS

A single large circle is rendered in the center of an SVG canvas, demonstrating basic shape creation and styling. The example uses D3 v5's selection and append methods to add the circle, with its radius and positioning calculated from the SVG's width and height attributes. CSS classes define stroke properties for potential line elements, while the circle itself relies on default SVG styling. The code shows a minimal setup for combining D3 with SVG and external stylesheets.

Oct 2, 2019