Reflections on a Horizontal Bar Chart with D3.js

a relatively brief explanation of how and why I built this

The visualization discussed in this article is currently available here.


I am a huge fan of budgeting my own money. How I spend my money often says a lot about what my priorities are. Sometimes, the same can be said for a country.

Initially, I was curious to see how health, education and defense spending compared for the same countries. I ran into a problem quite quickly — the data I found for percent of GDP* spent on health, education and defense varied country to country, year to year.

*GDP (or gross domestic product) represents the total value of transactions for goods and services over a set period of time. It is sometimes used to compare the size, as well as the growth and decline, of an economy.

Some countries had data out for 2013, but not 2014. Some countries only had one of the three spending categories available. Nothing was consistent enough to go forward with all three categories in one chart. So, I wrote for one category and one horizontal bar chart.


The beauty of using percent of total GDP is that it normalizes the data across countries with radically different GDPs.

At the same time, this chart does not attempt to explain why Japan and Armenia rank the lowest on this list. It is simply a jumping off point for further analysis.


What does your reader expect from a chart? 
There in lies a medium-sized issue.

In the way the chart is currently written, it appeals more to someone who is both familiar with GDP spending and international education systems. That background would allow for further investigation into the Costa Rican educational system and how it might compare with a similar economy that spends less money on education.

For the casual chart reader, this bar chart (in its current implementation) is simply a piece of a much larger puzzle. If I am able to find data on raw education spending or GDP spending in other areas, it may give this chart the depth it needs.


Making a horizontal bar chart was trickier business than I imagined. I am accustomed to seeing linear values on the y-axis and time scales or buckets of information (sometimes known as bands) on the x-axis.

It took a fair amount of experimentation, but it slowly came together.

In the midst of my mental gymnastics. Also, please disregard the incorrect date.

One technique I used in this chart was to sort the countries by their percent of GDP spending.

This code uses the JavaScript Array.prototype.sort() method to return the data in descending order.

a.k.a. current github issues

This chart is a simple bar chart, placed horizontally. That, however, provides a great deal of room for new features.

  • Find Data Related to the Dollar Amount Spent on Education
    This would provide context to make this chart accessible to a greater audience.
  • Write a Function that Reveals the Dollar Amount Spent on Hover
    Adding the functionality to hover over bands of data in order to view the dollar amount spent, would help users access this additional data with ease.
  • Find Data Related to Percent of GDP Spending on Health and Defense
    Adding more charts to this project would give it some depth.
  • Write a Menu that Allows Users to Switch Between Different Categories of Spending
    The ability to switch between the additional charts must be intuitive and accessible by keyboard and mobile.

If you have any suggestions or feedback, feel free to leave a comment below.