Usage

This page demonstrates some basic attributes that can be used to modify the scalebar component. For more detailed examples, refer to the sections in the side navigation.

"Hello World" Example

Without any attributes, the scalebar renders as a simple grayscale gradient.

Code

<dv-scalebar></dv-scalebar>

Result

"Real World" Examples

The scalebar can be enhanced with basic attributes such as colors, labels, ticks, and classes, as well as layout properties like vertical, reverse, and before/after.

Code

<dv-scalebar colors="Viridis" labels="0,2,4,6,8,10" ticks="11"></dv-scalebar>
<dv-scalebar colors="Viridis" labels="low,medium,high" classes ticks></dv-scalebar>
<dv-scalebar colors="piYG" before="slategray" labels ticks="5"></dv-scalebar>
<dv-scalebar colors="piYG" labels="min,-1σ,0,1σ,max" classes="0,.34,.5,.66,1" ticks></dv-scalebar>

<dv-scalebar vertical colors="PuBuGn" labels ticks="0,.1,.3,.6,1"></dv-scalebar>
<dv-scalebar vertical colors="YlGnBu" labels="low,medium,high" classes="0,.16,.84,1" ticks></dv-scalebar>
<dv-scalebar vertical colors="BrBG" reverse labels="-80,-40,0,70,140" ticks="9"></dv-scalebar>
<dv-scalebar vertical colors="dodgerblue,orangered" reverse labels="6°,10°,20°,27°" ticks="0,.19,0.66,1" before after></dv-scalebar>

Result

Colors

Code

<dv-scalebar colors></dv-scalebar>
<dv-scalebar colors="teal"></dv-scalebar>
<dv-scalebar colors="rgb(70 100 250 / .5)"></dv-scalebar>
<dv-scalebar colors="yellow,red,black"></dv-scalebar>
<dv-scalebar colors="Viridis"></dv-scalebar>

Result

more Examples

Labels

Code

<dv-scalebar colors="gold,teal" labels></dv-scalebar>
<dv-scalebar colors="gold,teal" labels="9"></dv-scalebar>
<dv-scalebar colors="gold,teal" labels="zero,50,1e2"></dv-scalebar>

Result

more Examples

Ticks

Code

<dv-scalebar colors="pink,teal" ticks></dv-scalebar>
<dv-scalebar colors="pink,teal" ticks="11"></dv-scalebar>
<dv-scalebar colors="pink,teal" ticks="0,.1,.3,.6,1"></dv-scalebar>

Result

more Examples

Classes

Code

<dv-scalebar colors="orange,beige,teal" classes></dv-scalebar>
<dv-scalebar colors="orange,beige,teal" classes="9"></dv-scalebar>
<dv-scalebar colors="orange,beige,teal" classes="0,.1,.3,.6,1"></dv-scalebar>

Result

more Examples

More

This was a brief overview of the four most commonly used attributes. They will be explained in more detail on the following pages, along with additional layout and color attributes. Use the navigation on the left (Menu-Button on mobile) to jump to a specific section.