Mathias Luethi

@mathiasluethi·2 public vizzes

Let's make a face with D3.js!

A white circle is centered on a crimson background, forming a simple face-like base. The example uses D3.js v5 with SVG rendering, importing `select` and `arc` from the library, though only `select` is applied to append the circle element. The circle’s radius and position are derived from the SVG’s width and height attributes, which are read dynamically. The code sets the background color via inline style and constructs the shape declaratively without data binding or interaction.

May 12, 2019

Loading thumbnail…

Let's make a face with D3.js!

A white circle with a fixed radius of 200 pixels appears centered on a crimson SVG canvas. The example demonstrates basic SVG shape creation with D3.js, using `select` to target the `svg` element and `attr` to set the circle's fill, position, and size. The underlying code imports `select` and `arc` from D3, though only `select` is used in the visible script. The SVG dimensions are read directly from the markup, and the circle's coordinates are computed relative to those width and height values.

May 12, 2019