Thomas Nield

@thomasnield·4 public vizzes

Customizing Axes

This example demonstrates how to customize D3 axes by rendering a horizontal bar chart of country populations as a CSV dataset. The visualization uses `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the y-axis, mapping population values to bar widths and country names to vertical positions. Bars are drawn as SVG `rect` elements, with the band scale’s `bandwidth` method determining each bar’s height. The code applies a dark blue background and the Ubuntu font via CSS.

Nov 24, 2019

Loading thumbnail…

SVG Example

This example draws a smiling face in SVG using D3 v5, with a yellow circular head, two eyes, rectangular eyebrows, and an arc-shaped mouth. The eyebrows animate by moving vertically over two seconds using chained `transition()` calls, shifting down then back up. The code uses `d3.select`, the `arc()` generator from D3’s shape module, and attribute setters like `.attr()` to construct the SVG elements. Static properties for spacing and sizing are defined as variables, and the entire face is centered within a 960×500 viewport.

Nov 24, 2019

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn in SVG using D3.js v5, with animated eyebrows that shift downward and back over two seconds. The code builds the face by manipulating SVG elements—circles for the head and eyes, rectangles for brows, and a path generated with d3.arc for the mouth. Select and transition methods drive the eyebrow movement, while the layout is centered using width and height attributes from the SVG. Eyebrow positions and eye spacing are defined as numeric constants.

Nov 24, 2019

Loading thumbnail…

SVG Example

This example shows a static, untitled SVG scene featuring a single large red circle rendered on a 960 by 500 canvas. The visualization uses D3 version 5’s `select` and `append` APIs to create the circle, setting its radius and fill color through the `attr` method. The drawing is performed with standard SVG elements within an inline `<svg>` tag, with the D3 script embedded directly inside the SVG markup. No external data or interactive behavior is present.

Nov 24, 2019