Justin Gieselbach

@justingiesel·3 public vizzes

Customizing Axis

This bar chart displays population sizes for a list of countries, using a linear scale for the x-axis and a band scale for the y-axis. The visualization is rendered as SVG using D3 v5, with axes customized via `axisLeft` and `axisBottom`. Country names appear on the vertical axis while horizontal bars show population values, with data loaded from a CSV file and scaled by a factor of one thousand.

Mar 17, 2020

Loading thumbnail…

Making a Bar Chart

This example shows a horizontal bar chart of population counts for twelve countries, with each bar’s length scaled linearly and country labels aligned on the vertical axis. The visualization uses D3 v5 APIs including `scaleLinear`, `scaleBand`, `axisLeft`, `axisBottom`, and `selectAll().data().enter().append()` to render SVG rectangles. Data is loaded from a CSV file via `d3.csv`, with population values converted from numeric strings to numbers by multiplying by 1000. The chart applies fixed margins and transforms to position axes and bars within an SVG container.

Mar 17, 2020

Loading thumbnail…

Let's Make a Face Part I

A simple animated smiley face is constructed using D3.js, with a yellow circular head, two eyes, eyebrows, and a partial arc mouth. The eyebrows animate upward and downward in a repeating cycle, adding a subtle expressive motion to the otherwise static face. The visualization is built entirely with SVG primitives—`circle`, `rect`, and `path` elements—and relies on D3's `transition` API to animate the eyebrow transform over two-second intervals. The arc for the mouth is generated using D3's `arc` function, which produces a path for the specified inner and outer radii and angle range.

Mar 17, 2020