// Single View Specification
{
  "data": ... ,
  "mark": "rect",
  "encoding": ... ,
  ...
}

Ever wondered how to represent data using rectangles in your visualizations? With Vega-Lite, you can easily use the rect mark to create informative heatmaps and ranged rectangles. Let's explore how you can achieve this!

Rect Mark Properties

The rect mark in Vega-Lite can be customized to create a variety of visual representations. Here is how you specify it:

// Single View Specification
{
  ...
  "mark": {
    "type": "rect",
    ...
  },
  "encoding": ... ,
  ...
}

This is the basic structure for a rect mark. The rect mark can include:

• Width: The width of the rectangle.
• Height: The height of the rectangle.
• Align: Alignment of text within rectangle.
• Baseline: Baseline text alignment.
• CornerRadius: Rounding of rectangle corners.
• BinSpacing: Spacing between binned rectangles.

Examples of Using Rect Marks

Example 1: Creating a Heatmap

Heatmaps are a popular way to represent data density. Using the rect mark with discrete fields on x and y channels, you can create a heatmap.

Code Example

{
  "data": {"url": "..."},
  "mark": "rect",
  "encoding": {
    "x": {"field": "category", "type": "nominal"},
    "y": {"field": "value", "type": "quantitative"},
    "color": {"field": "count", "type": "quantitative"}
  }
}

Example 2: Binned Heatmap

You can also create a heatmap with binned fields.

Code Example

{
  "data": {"url": "..."},
  "mark": "rect",
  "encoding": {
    "x": {"bin": true, "field": "valueX", "type": "quantitative"},
    "y": {"bin": true, "field": "valueY", "type": "quantitative"},
    "color": {"aggregate": "count", "type": "quantitative"}
  }
}

Example 3: Ranged Rectangles

To create a rectangle that spans over certain x and/or y values, you can specify both x and x2 as well as y and y2.

Code Example

{
  "data": {"url": "..."},
  "mark": "rect",
  "encoding": {
    "x": {"field": "start", "type": "quantitative"},
    "x2": {"field": "end"},
    "y": {"field": "category", "type": "nominal"}
  }
}

You can use this to create annotations or shaded areas that highlight specific ranges.

Rect Config

You can also set default properties for all rect marks in your visualization using the config property.

Example

// Top-level View Specification
{
  ...
  "config": {
    "rect": {
      "continuousBandSize": 30,
      "discreteBandSize": 20,
      "minBandSize": 10
    }
  }
}

Using the rect property within config, you can ensure consistent styling across your visualizations.

FAQ

1. What is the primary use of the rect mark in Vega-Lite?

The rect mark is mainly used to create heatmaps and ranged rectangles, which are useful for visualizing data density and specific data ranges.

2. Can I customize the appearance of rectangles in my visualization?

Yes, you can customize properties such as width, height, alignment, corner radius, and bin spacing to tailor the appearance of your rectangles.

3. How do I create a heatmap using rect marks?

You can create a heatmap by specifying rect marks with discrete fields on the x and y channels and using the color channel to encode data density.

By following this guide, you'll be on your way to creating insightful and visually appealing rectangles in your data visualizations with Vega-Lite. Happy visualizing!