- Range Charts

A range chart (also known as a specific type of dot chart) is best to show gaps between data points, such as inequalities. The line chart above illustrated how the overall US unemployment rate changed over time. But if we wish to look at differences in gender and race/ethnicity for a specific point in time, a range chart will highlight any gaps. Organize the data for a range chart into rows and columns, as shown in Figure 7.39. The column headers contain data labels you wish to highlight, such Men and Women. The first column contains your categories, such as racial/ethnic groups, followed by the numerical values under each header. Now you can easily create an interactive range chart as shown in Figure 7.40. The employment gender gap is visible in all three racial/ethnic groups, but the gap was widest between Hispanic men and women in May 2020.

Organize your range chart data labels into column headers, with categories and values in each row.

Figure 7.39: Organize your range chart data labels into column headers, with categories and values in each row.

Figure 7.40: Range chart: Explore the interactive version. Data from US Federal Reserve Open Data.

To create your own range chart with our sample data, follow this tutorial. Since we assume that you’re already familiar with Datawrapper from the previous tutorial on annotated line charts, these steps are abbreviated. So if you get lost, see more details and images above.

  1. Open the US Unemployment by Gender and Race/Ethnicity May 2020 sample data in Google Sheets and go to File > Make a Copy to create your own version in your Google Drive. Or download the sample data in Excel format to your computer.

  2. Open Datawrapper in your browser and click Start Creating. We recommend that you create a free account to better manage your visualizations, but it’s not required.

  3. In the Upload Data screen, click Import Google Spreadsheet and paste the link to the data in the shared Google Sheet above, then click Proceed. Alternatively, you can upload data by copying and pasting it into the data table window, or uploading an Excel or CSV file.

  4. In the Check and Describe screen, inspect your data, then click Proceed.

  5. In the Visualize screen, Datawrapper will attempt to guess the chart type you desire, based on the data format, but you will need to select Range Plot.

  6. Click the Annotate tab near the top-left of the Visualize screen to add a meaningful title, data source, and byline credits.

  7. Click the Refine tab of the Visualize screen to modify the range chart appearance. You have several options, but here’s the most important ones in this case. First, in the Labels section, change the visibility of the values from start to both, which places numbers at both ends of each range. Second, push the slider to Label first range, which places the word Men and Women above the first range, as shown in Figure 7.41.

Modify the labels settings to show values at both ends of each range, and to place your data labels on your first range.

Figure 7.41: Modify the labels settings to show values at both ends of each range, and to place your data labels on your first range.

  1. Still in the Refine tab, scroll down to the Appearance section to improve the colors. Select the Range end drop-down menu to select a better color, such as red. Also, change the Range color setting to gradient to emphasize the range, as shown in Figure 7.42.
Modify the appearance settings to improve the color and add a gradient.

Figure 7.42: Modify the appearance settings to improve the color and add a gradient.

Tip: The Refine tab also includes options to resort or group data rows, change the chart size for different devices, and check visibility for colorblind readers.

  1. After modifying your visualization, proceed to the Publish and Embed screen, and follow the prompts to share your work, or refer to the more detailed tutorial above.

Now that you’ve completed a range chart, let’s create another new chart type, scatter and bubble charts, which are relatively easy to design in Datawrapper.