Skip to main content
Log in
A

aristidesnakos

@aristidesnakos·5 public vizzes

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by constructing a smiley face from SVG primitives. It shows how to append and position circles, rectangles, and an arc-generated mouth path using selections and attribute setters. The code imports `select` and `arc` from d3 and uses template literals for transform translations, creating static facial features with fixed dimensions. The face includes yellow head circle, spaced eyes, rectangular eyebrows, and a curved mouth via d3's arc generator, all rendered in SVG on a 960×500 canvas.

Jul 23, 2019
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by constructing a smiley face from SVG primitives. It shows how to append and position circles, rectangles, and an arc-generated mouth path using selections and attribute setters. The code imports `select` and `arc` from d3 and uses template literals for transform translations, creating static facial features with fixed dimensions. The face includes yellow head circle, spaced eyes, rectangular eyebrows, and a curved mouth via d3's arc generator, all rendered in SVG on a 960×500 canvas.

Jul 23, 2019
Loading thumbnail…

Let's make a face with D3.js!

A smiley face built with D3.js demonstrates basic SVG manipulation by translating a group element to the canvas center and appending circles, rectangles, and an arc-generated mouth. The code uses d3.select and d3.arc to construct the face, with eyebrows positioned relative to eye spacing. A video tutorial explains how the interactive eyebrows move, though the static example itself only renders the fixed facial features.

Jul 23, 2019
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental D3.js DOM manipulation by building a smiley face with a yellow head, black eyes, and an arc-shaped mouth. The face is centered using an SVG group with a translate transform, with eye positions defined by fixed spacing offsets. The code uses D3 selections like `select` and `append`, plus the `d3.arc` API to generate the mouth path. All elements are rendered as static SVG shapes without animations or interactivity.

Jul 22, 2019
Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js to construct a static smiley face entirely through SVG DOM manipulation. The code selects an SVG canvas and appends a yellow circle for the head, two black circles for the eyes, and a mouth path built with the `d3.arc` function. Key attributes like `cx`, `cy`, and `r` are set programmatically based on the SVG’s width and height, showcasing fundamental chaining and attribute methods in D3 v5. No animation or interactivity is present; the face renders once on page load.

Jul 19, 2019