dv-scalebar

Appearance

Thickness ​

The thickness attribute changes the thickness of the scalebar along its axis.

Values are specified between 0 and 1, where 1 represents the full thickness of the scalebar. By default, the thickness variation is anchored to one edge.

The thicknessAnchor attribute controls where the thickness variation is anchored across the bar.

Single value ​

A single thickness value creates a constant thickness along the entire scalebar.

Code

html
<dv-scalebar colors="BrBG" thickness=".3"></dv-scalebar>

Result

Multiple values ​

Multiple values between 0 and 1 allow the thickness to vary along the scalebar.

Values are distributed evenly unless matching positions already exist through classes or ticks.

Code

html
<dv-scalebar colors="BrBG" thickness="1,0,1"></dv-scalebar>

Result

Explicit positions ​

Similar to ticks, thickness values can also be provided with explicit positions.

The first value is the position along the scalebar, and the second value is the thickness.

Code

html
<dv-scalebar colors="BrBG" thickness="[[0,1],[.2,1],[.3,0],[.4,1],[1,1]]"></dv-scalebar>

Result

Thickness with classes ​

When classes are defined, thickness values align to the class boundaries.

One value per class ​

If the number of thickness values matches the number of classes, each value is applied uniformly across its class interval.

Code

html
<dv-scalebar colors="BrBG" classes="6" thickness="1,.4,1,.6,1,.3"></dv-scalebar>

Result

One value per class boundary ​

If the number of thickness values equals the number of class boundaries (classes + 1), values are interpolated across classes.

Code

html
<dv-scalebar colors="BrBG" classes="6" thickness="1,.4,1,.6,1,.3,1"></dv-scalebar>

Result

Thickness anchor ​

The thicknessAnchor attribute controls where the thickness variation is applied:

  • 0 — variation is applied to the upper edge (default)
  • 0.5 — variation is centered around the middle
  • 1 — variation is applied to the lower edge

For vertical bars, the variation is applied from left to right.

Flipped thickness ​

Set thicknessAnchor to 1 to move the thickness variation to the opposite edge.

Code

html
<dv-scalebar colors="BrBG" thickness="0,1" thicknessAnchor="1"></dv-scalebar>

Result

Centered thickness ​

Set thicknessAnchor to 0.5 to center the thickness variation around the middle of the scalebar.

Code

html
<dv-scalebar colors="BrBG" thickness=".2,1,.2" thicknessAnchor=".5"></dv-scalebar>

Result