A rectangle is a four-sided graphical mark that covers a chart region, making a time period, option, or other visual unit easier to notice. section 7.5.3 section 9.2.1
Use a rectangle when the chart needs visual context rather than data alone. A shaded region can identify an important interval, while labeled rectangles can organize possible next steps. section 7.5.3 section 9.2.1
Build rectangles by defining their bounds and then encoding those bounds in Altair.
- Create a DataFrame containing x, x2, y, and y2 coordinates for each rectangle. section 7.5.3 section 9.2.1
- Draw the shape with mark_rect(), using x and y for one corner and x2 and y2 for the opposite corner. section 7.5.3 section 9.2.1
- Adjust color, opacity, axes, and chart dimensions to fit the rectangle’s communicative role. section 7.5.3 section 9.2.1
Highlighting a decline
A light-gray, semi-transparent rectangle spans 1992–1998 to mark the salmon-sales decline. A text annotation explains that fish health issues partially caused the decrease, turning a visual pattern into contextual knowledge. section 7.5.3
Mapping next steps
Three parametrically positioned rectangles represent Online Campaign, Influencers Engagement, and Social Media Promotion. Labels are placed inside the shapes, and connecting lines turn the rectangles into a roadmap. section 9.2.1
Listing 7.17 The rectangle
N = 100000000 #1
y = df['AMOUNT'].max() + N
rect_df = pd.DataFrame({'x': [1992],
'x2': [1998],
'y' : [0],
'y2': [y]
})
rect = alt.Chart(rect_df).mark_rect(
color='lightgrey',
opacity=0.5
).encode(
x='x:O',
x2='x2:O',
y= 'y:Q',
y2= 'y2:Q'
)
Inspect a minimal Altair implementation that creates rectangle bounds in pandas and renders a shaded chart region with mark_rect(). section 7.5.3
Listing 9.1 Setting the rectangles’ positions
import pandas as pd
width = 10
space = 5
N = 3
x = [i*(width+space) for i in range(N)]
y = [0 for i in range(N)]
x2 = [(i+1)*width+i*space for i in range(N)]
y2 = [10 for i in range(N)]
text = ['Online Campaign', 'Influencers Engagement', 'Social Media Promotion']
df_rect = pd.DataFrame(
{ 'x': x,
'y': y,
'x2': x2,
'y2': y2,
'text' : text
}
)
Inspect a reusable pattern for generating multiple rectangles from width, spacing, count, coordinates, and labels. section 9.2.1
