Daniel Hug

@danielpatrickhug·3 public vizzes

Making a Bar Chart

A bar chart displays population data for five countries using horizontal bars. The example builds the chart through D3.js version 5, using `d3.csv` to load the data, `d3.scaleLinear` for the x-axis, and `d3.scaleBand` with padding for the y-axis categories. Rectangles are appended to an SVG element, with bar widths proportional to each country's population. The code marks a basic introduction to D3's data-binding and scale functions.

Oct 15, 2020

Loading thumbnail…

Let's make a face with D3.js!

A smiling face rendered as an SVG graphic uses D3.js to demonstrate fundamental DOM manipulation. The face’s eyebrows move dynamically, driven by JavaScript code that selects and updates SVG elements. The example leverages D3’s `select` and `arc` functions to construct and position the facial features. The visualization is built with D3 v5 and displayed in an HTML page with a 960 by 500 pixel SVG canvas, with the interaction logic contained in a separate `bundle.js` file.

Oct 15, 2020

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face rendered in SVG uses D3.js v5 to demonstrate basic DOM manipulation and animation. The face is built by appending circles for the head and eyes, rectangles for eyebrows, and a path generated with the `d3.arc()` API for the mouth. The eyebrows animate upward and back down over two sequential 2000-millisecond transitions, showing how `selection.transition()` chains. The code uses `d3.select` to manipulate the SVG elements and sets coordinates with fixed pixel offsets for facial features.

Oct 15, 2020