Ready to embark on a visual journey through history? Let's construct a timeline of historical empires. We'll learn how to blend different marks and adjust the scales to create a truly captivating visualization. Now open the DataPicta app and follow along.

Import the data

• Click the icon to search for data
• Choose Observable Plot as provider
• Search for civilizations
• Click the civilizations dataset

Setup the bars

• Click the icon to add a new mark
• Choose Bar as mark

While most bar charts use a fixed zero point as a reference, our chart requires a more flexible approach where both the beginning and end of each bar will vary according to the data.

• For Y axis we choose civilization
• For X topline we choose End
• For X baseline we choose Start

We now have a visual representation of the rise and fall of the civilizations. But the presentation is very confusing at this point.

Sort the data

• Click the style tab within the bar panel
• At the Sort section click Sort and choose Y axis
• Click Sort-by and choose X baseline

This means that the y-axis will be sorted by the start position of the bars, which is the rise of a civilisation. The oldest civilisation is now on the top of the chart.

Paint the bars

We will color the bars by timeline, the timeline indicates whether the civilisation was in the Ancient, Medieval or Modern World.

• On the data tab choose timeline for the fill color
• On the styling tab set the Fill opacity to 50%, this will become handy when we write text in the bars later on

Lets give some meaning to these colors by adding a Legend

• Click the icon the add a scale
• Choose Color
• Check Legend

Place the names of the civilisations in the bars

The names of the civilisations are too big to be placed on the y-axis, we can completely remove the y-axis and then place the text inside the bars.

• Click the icon to add a scale
• Choose Y-axis
• At the location click Axis and choose hide

The y-axis is removed now. To add text inside the chart we use the text mark.

• Click the icon to add a mark
• Choose Text
• For the X axis choose start, this means that the text will start at the same position as the start of the bars.
• For the Y axis choose civilisation, this means that text for a certain civilisation lines up with it's corresponding bar.
• For text also choose civilisation, because this is the text we want to show.

Improve the visuals

Lets first have the beginning of the text line up with the beginning of the bars. Lets also choose a more appropiate font.

• For Font-family choose Geneva
• For Font-variant choose small-caps
• In the style tab click Frame-anchor and choose left

The font looks good but is a little to close to the edge of the bar

• Scroll down to the offset section
• Set the horizontal offset to 2 pixels

The font moved 2 pixels to the right. Now let's move the x-axis to the top of the chart, add a grid and create some margin to the right of the chart so that the text of the latest civilisations fit in the chart.

• Click the icon to add a scale
• Choose the x-axis
• Click Show grid
• For location choose Top
• Close the panel
• Click the icon to change to change the size and margins
• Set the right margin to about 125 pixels

Now that we are in the layout panel we might as well change the aspect ratio to portrait style chart. An aspect ratio of 2:3 looks nice.

• Type 2:3 for aspect ratio

The round thinks up, literally and figuratively, we give the bars some rounded corners.

• Close the Layout panel
• Open the Bar panel again
• Click the style tab
• Enter 5 for Radius-x