Barcharts are the most used charts, they represented categorized data. In this blog we will create a horizontal bar chart, that means categories on the y-axis and its values on the x-axis. We will use a dataset containing all the letters from the latin alphabet how frequent these letters are used as values.
Find the data
To create a chart we need some data. In this case we will use the alphabet dataset.
- Click on the icon that says Search data
- Choose the Observable Plot sample datasets
- Search for alphabet and select the dataset
Create a basic bar chart
For a bar chart we should add the bar mark to the chart.
- Click on the icon that says Add a Mark
- Choose the Bar mark
A new panel will appear. On the top you will see two pulldown menus, one for the dataset and one for the type of the mark.
- For dataset we choose alphabet
- For type we choose Bar X
Below that you will see pulldown menus for the X axis and the Y axis.
- For X axis pick frequency
- For Y axis pick letter
A basic bar chart appears:
Sort the bars
To make the chart more readable we can sort the data. By default the y-axis is sorted alphabetically, but in this case we prefer to sort on frequency.
Within the bar panel we have a tab for data where we choose how to plot the data. We also have a tab for style where we style the chart regardless of the data.
- Click on the Style
- Scroll down to the sort section
- For sort choose the y-axis
- For sort-by choose x-axis
- Finally click on the arrow to reverse the sorting
Improve the axes
To make the chart more readable we will move the x-axis to the top. To make changes to the x-axis we first need to add the x-axis scale.
- Close the current panel
- Click on the Add a Scale icon
- Choose X-axis
A new panel for the X-axis scale opens.
- For location choose top.
Notice that the X-axis moved to the top. We can also edit some other settings for the X-axis.
- Click show grid to show some grid lines
- Click on the Common tab and then click on Percent
As a final touch we will add one more line.
- Close the current panel
- Click on the Add a Scale icon
- Choose Y-axis
- Click Show line
Maybe you need to click it a few times to notice the difference, we believe this is the finishing touch.