Ben Daniel

@bdanielatl·3 public vizzes

Let's make a face with D3.js

A face built from basic SVG shapes—a yellow circle for the head, circles for eyes, and an arc-generated path for the mouth—is centered on a 960×500 canvas. The code uses D3.js v5’s `select` and `arc` APIs to append and position elements, with `transition()` animating the eyebrows up and down over two-second intervals. The rendering is entirely SVG, with all coordinates computed relative to the svg’s center using its width and height attributes.

Jan 7, 2019

Loading thumbnail…

Let's make a face with D3.js!

A D3.js tutorial demonstrates basic DOM manipulation by constructing a yellow smiley face with animated eyebrows. The code appends SVG circles for eyes, rectangles for brows, and an arc-generated path for the mouth using `d3.arc`. A `transition` with a 2000-millisecond duration moves the eyebrows up and down repeatedly, showing chained state changes. The example relies on D3 v5 selections, `attr`, and `append` to build the face, with no external data source.

Jan 6, 2019

Loading thumbnail…

HTML Cars Report

This example shows a static HTML report listing three used cars with their model years and prices, with the first entry highlighted in red. It uses a plain HTML unordered list with inline CSS classes, styled by an external stylesheet that sets a monospace font at 2em. The page references a linked CSS file (`sytles.css`) and applies a `.highlighted` class to emphasize the Nissan Leaf, demonstrating basic markup and styling without any JavaScript libraries or frameworks.

Jan 6, 2019