jakenachlas

@jakenachlas·4 public vizzes

Making a Bar Chart

This example shows a horizontal bar chart of the ten most populous countries, with each bar’s length scaled to its population value, read from a local CSV file. Built using D3 version 6, the visualization uses `d3.csv` to load and parse the data, `d3.scaleLinear` and `d3.scaleBand` for the x- and y-axes, and `d3.axisLeft` to render the country labels. The bars are drawn as SVG rectangles within a 960×500 canvas, with margins defining the plot area.

Feb 2, 2021

Loading thumbnail…

Making Face

A yellow circle with a black outline forms a face, featuring two eyes, rectangular eyebrows, and a mouth shaped as a semicircular arc. The eyebrows animate by moving upward and back down over two seconds, using D3 transitions. The visualization uses D3 version 6’s `select`, `arc`, and `transition` methods, rendering shapes as SVG elements within a 960x500 viewport. The code constructs the facial features via appended circles, rects, and a path, with the mouth defined by an inner radius of 150 and outer radius of 170.

Feb 1, 2021

Loading thumbnail…

Fork of Let's make a face with D3.js!

This fork of the "Let's make a face" tutorial builds a yellow smiley face with animated eyebrows using D3.js v5. The example demonstrates fundamental SVG DOM manipulation and transitions. A group element centers the face, while circles form the eyes and a path, created with the d3.arc generator, draws the mouth. D3 transitions, chained over two seconds each, move the eyebrows up and down repeatedly, showing how to animate SVG attributes without explicit JavaScript timers.

Jan 27, 2021

Loading thumbnail…

Shapes with SVG

This example demonstrates basic SVG shape creation using D3 version 6, showing circles, rectangles, lines, and paths rendered inside a 960×500 SVG canvas. The code uses the `select` function from the D3 library to display a text message, while shapes are styled through inline attributes and CSS classes. A group element with a transform translates and fills shapes with a light blue color and black stroke. The visualization highlights how SVG elements and D3’s selection API work together in a simple, static scene without data binding.

Jan 26, 2021