Bar Chart with Word Cloud Filled Bars

Using D3.js and just 100 lines of JavaScript

Chart created by author (this article explains how!)

My wife and I are expecting our second baby any day now. 😅
With babies in my brain, I spent some time designing this baby name data visualisation. I have combined word clouds with a bar chart to convey:

• which first letters were the most common for baby names, and
• which names were most popular for each first letter.

Word clouds are usually not the best way to represent data for precise comparisons. But they are good for a quick visual overview, and here I think they work well. Although it may not be clear from the chart whether Ava or Amelia was the more popular name, for example, it is immediately clear that these were both very popular names starting with A.

Below are the steps I used to prepare the data and create the chart, taking advantage of the D3 JavaScript library.

1. Preparing the Data

The data, published by the United States Social Security Administration, came in text file format. Each row contains a name, gender and count. I copied the text and stored it as a JavaScript string: