Basic Charts and Shapes

In the previous chapter, we created a simple bar chart using the SVG rect element. While this works for simple charts, using the standard SVG elements for more complex charts can be difficult. Luckily, D3 provides an extensive set of helper functions that we can use to easily create more complex visualizations, without having to manipulate basic SVG elements ourselves. In this chapter, we're going to create visualizations based on data from the US Census Bureau (http://www.census.gov). To be more precise, we're going to create the following data visualizations:

• How long have American firms been in business visualized with pies and donuts: The US census releases an overview that shows how long firms have been in business. This provides a nice data set to show how D3 allows you to create pie and donut charts.
• Real Median Household income in the US visualized with a line chart: In...

How long have American firms been in business visualized with pies and donuts

In September 2016, the US Census Bureau released data that showed how long American firms have been in business. The US Census Bureau even created a nice-looking visualization themselves (http://www.census.gov/newsroom/press-releases/2016/cb16-148.html) showing the results from that data:

In this section, we'll create an alternative visualization using an animated donut chart. While making this, we'll explore the following subjects:

• Learning how to use animations to occur when data is loaded
• Using the various path generators from D3 to generate SVG paths
• Using color interpolators to color each individual part of the donut

You can see this sample for yourself by opening example: <DVD3>/src/chapter-02/D02-01.html. The results look like this:

By selecting a different group of firm owners in the top left you can see the...

Line charts that show income growth

A line chart is a very common way of visualizing linear data (for example, time-based data). For our discussion on line charts, we're going to create a chart that shows the increase in income in the US over the last 30 years. We'll show this data indexed to a specific year and the absolute growth. We'll use the following two datasets:

1. Unadjusted dollars: https://fred.stlouisfed.org/series/MEHOINUSA646N
2. Adjusted dollars: https://fred.stlouisfed.org/series/MEHOINUSA672N

These datasets are based on the US Census data, but have already been cleaned up. We can use the adjusted dollars to show the relative increase in income, and the unadjusted to show the absolute growth in income:

So, while it might seem that people are getting richer, at this point we're basically at the level of 1996, and in no way back before the 2008 crisis. At the top right, you can download...

Population growth estimates using a stacked graph

For the final chart in this chapter, we're going to create a simple stacked chart, which shows the expected population growth in the US to 2060. We won't create too much interactivity or other advanced features for this graph, but will just show you how to create the following two graphs:

First, we'll create an area chart:

And then we'll use the same data to create a stacked bar chart:

In the area chart we'll show the relative population distribution over the years, and in the bar chart, we'll show the absolute population, divided into age groups.

Getting and sanitizing the data

The US Census Bureau provides a number of files related to population growth and other projections. We&apos...

Summary

In this chapter, we've looked at how you can use D3 to create basic chart types with lots of interactivity and information. While doing this, we learned a number of different D3 concepts. We've seen how we can use path generators to generate our arc segments for the donut chart and how you can add animations by using d3.transition.

In this chapter, we've also seen how easy it is with D3 to add axes to your chart, and how you can use the various scales provided by D3 to determine the size and position of your elements.

In the next chapter, we'll look at how you can visualize data that is in a hierarchical format.