Lucian-jw

@Lucian-jw·5 public vizzes

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by constructing a smiley face on an SVG canvas. It draws a yellow circle at a specified coordinate using the `d3.select` and `svg.append` APIs, while setting attributes like `cx`, `cy`, and `fill` to position and style the shape. The code also defines the SVG dimensions (960x500) and starts to set the circle's radius, though the sketch is incomplete. It shows how D3’s selection and attribute methods directly create and modify SVG elements, offering a hands-on introduction to building graphics programmatically.

Jul 2, 2019

Loading thumbnail…

Let's make a face with D3.js!

A smiley face drawn in SVG animates its eyebrows upward and back down using chained D3 transitions. The d3.select and d3.arc APIs construct circles and a mouth path, while transition.attr modifies the eyebrow group's transform over two two-second intervals. The example demonstrates fundamental DOM manipulation with D3 v5, rendering static geometric shapes and coordinating timed attribute changes on grouped SVG elements.

Jul 2, 2019

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates how D3.js can create and animate a smiley face using basic SVG shapes. The yellow circle head, eyes, eyebrows, and arc-based mouth are all built through direct DOM manipulation with `d3.select` and `.append`. The eyebrows are animated using chained `transition().duration()` calls, moving them up and down over two-second intervals. The code imports `select` and `arc` from the D3 library and relies on SVG attributes like `r`, `cx`, and `d` for rendering.

Jul 2, 2019

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with animated eyebrows demonstrates basic D3.js DOM manipulation. The SVG elements—circles for the eyes, rectangles for the eyebrows, and an arc-generated mouth—are positioned using translation transforms. The code imports `select` and `arc` from D3 v5 and uses chained `transition().duration()` calls to move the eyebrow group upward and back, creating a repeating eyebrow-lift animation. The face is centered within a 960×500 SVG viewport.

Jul 2, 2019

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by building a smiling face whose eyebrows move up and down. It uses D3’s `select` and `append` to create SVG circles, rectangles, and a path for the mouth, with the mouth drawn via the `arc` generator. The animation relies on chained `transition` and `duration` calls to shift the eyebrow group’s transform attribute. The code imports named methods from the d3 module and sets attributes like `r`, `cx`, and `d` directly on SVG elements.

Jul 2, 2019