Arthur Welf

@welf·4 public vizzes

Top 10 most populous countries

A bar chart displays the ten most populous countries, with bar height encoding each nation’s population in thousands. The visualization uses D3 v5, loading data from a CSV and drawing SVG rectangles via `selectAll`, `data`, and `enter`. Scales are defined with `scaleBand` and `scaleLinear`, though their domains and ranges are not set in the code shown. The chart’s bars are rendered with fixed dimensions rather than positioned by the scales, leaving the encoding incomplete.

May 20, 2019

Loading thumbnail…

Making a Bar Chart

This example shows a bar chart of the top 10 most populous countries, with each bar labeled by its population value in billions. The chart uses d3.csv to load the data, then d3.scaleBand and d3.scaleLinear to position bars and axes. It renders via SVG, with d3.axisBottom and d3.axisLeft for the axes, and includes a horizontal line marking the 1.15 billion population threshold. The code also applies custom tick formatting and removes default axis domains.

May 20, 2019

Loading thumbnail…

Let's make a face with D3.js!

Built with D3.js v5, this animated SVG draws a yellow smiley face with circular eyes, a curved mouth, and rectangular eyebrows. The eyebrows continuously move up and down using chained `transition()` calls with `attr` updates, demonstrating fundamental DOM manipulation through selections like `select` and `append`. The code constructs the face using SVG primitives—circles, rects, and a path generated by the `arc()` generator—within a group translated to the canvas center. The example showcases D3 transitions and shape generation without requiring any external data.

Apr 30, 2019

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates how to build a simple yellow smiley face using D3.js, starting with basic SVG shapes like circles for the face and eyes. The code uses D3’s `select` and `append` methods to create and style elements within an SVG canvas, setting attributes such as radius, position, and fill color step by step. While the README mentions moving eyebrows, the provided code only renders the static face, relying on D3 v5’s core selection and attribute manipulation APIs to construct the visual directly from JavaScript.

Apr 29, 2019