Responsive Customizable Scalebar Web Component – dv-scalebar

dv-scalebar is a simple and lightweight web component for generating customizable and responsive scalebars. It uses SVG and JavaScript for rendering and provides both framework-agnostic (Lit) and Vue-specific versions.

The Lit version, compatible with any framework or Vanilla JavaScript, weighs 69kB (26kB gzipped). The Vue version, specific to Vue projects, is smaller at 51kB (20kB gzipped).

Both versions rely on chroma.js for color manipulation. If your project already uses chroma.js, dependency-free versions are available, reducing the sizes to 26kB (9kB gzipped) for Lit and 9kB (3kB gzipped) for Vue.

Features:

• Custom tick marks and labels
• Flexible color schemes using chroma.js
• Continuous or discrete color segments
• Horizontal and vertical orientations
• Bi-directional layouts with flip and reverse options
• CSS variable styling system

How to use it (Vanilla JavaScript):

1. Install dv-scalebar and import it into your project.

npm install dv-scalebar

import "dv-scalebar/lit"

2. Create a basic scalebar by adding the <dv-scalebar> custom element to your document.

<dv-scalebar></dv-scalebar>

3. Customize tick marks:

<dv-scalebar ticks="3"></dv-scalebar>
<dv-scalebar" ticks="0,.2,.4,.6,1"></dv-scalebar>

4. Set custom labels:

<dv-scalebar labels="CSS, Script, Com"></dv-scalebar>

5. Customize the colors:

<dv-scalebar colors></dv-scalebar>
<dv-scalebar colors="black"></dv-scalebar>
<dv-scalebar colors="#fafaf0"></dv-scalebar>
<dv-scalebar colors="rgb(0 0 0 / .5)"></dv-scalebar>
<dv-scalebar colors="hsl(150 30% 40%)"></dv-scalebar>
<dv-scalebar colors="red,#000000"></dv-scalebar>
<dv-scalebar colors="red,yellow,black"></dv-scalebar>

6. Chroma.js provides access to ColorBrewer palettes. Try setting color palettes with names like “YlGnBu”, “Spectral”, or “Viridis”:

<dv-scalebar colors="YlGnBu"></dv-scalebar>
<dv-scalebar colors="Spectral"></dv-scalebar>
<dv-scalebar colors="Viridis"></dv-scalebar>

7. Reverse the colors using the `colorReverse` attribute:

<dv-scalebar colorReverse></dv-scalebar>

8. Set different color modes using the `colorMode` attribute:

<dv-scalebar colors="blue,black" colorMode="lrgb"></dv-scalebar>
<dv-scalebar colors="blue,black" colorMode="lab"></dv-scalebar>
<dv-scalebar colors="blue,black" colorMode="hsl"></dv-scalebar>
<dv-scalebar colors="blue,black" colorMode="lch"></dv-scalebar>

9. Adjust the lightness of colors across the scalebar:

<dv-scalebar colors="YlGn" colorGamma="0.5"></dv-scalebar>
<dv-scalebar colors="YlGn" colorGamma="1"></dv-scalebar>
<dv-scalebar colors="YlGn" colorGamma="2"></dv-scalebar>

10. To ensure an even lightness distribution, use the `colorCorrectLightness` attribute:

<dv-scalebar colors="black,red,white" colorCorrectLightness></dv-scalebar>

11. Adjust color padding to alter the color range on the bar:

<dv-scalebar colors="Viridis" colorPadding="0.4"></dv-scalebar>

12. Turn the continuous gradient into defined color segments by setting the `classes` attribute:

<dv-scalebar classes="2"></dv-scalebar>
<dv-scalebar" classes="0,.2,.4,.6,1"></dv-scalebar>

13. Add colored squares before and after the scalebar:

<dv-scalebar before="black" after="black"></dv-scalebar>

14. Reverse colors, labels, ticks, and classes using the ‘flip’ attribute.

<dv-scalebar reverse></dv-scalebar>

15. Flip colorbar and labels using the ‘flip’ attribute:

<dv-scalebar flip></dv-scalebar>

16. Change the orientation to ‘vertical’:

<dv-scalebar vertical></dv-scalebar>

17. Customize the scalebar’s appearance using CSS variables as shown below. Suffixing these variables with 0 or 1 allows styling the first and last elements independently.

.myScalebar {
  --scalebar-size: '14px';
  --container-size: '28px';
  --bar-size: '14px';
  --bar-offset:  '0px';
  --tick-color: currentColor;
  --tick-blend: normal;
  --tick-width: '2px';
  --tick-size: '14px';
  --tick-offset: '0px';
  --label-color: currentColor;
  --label-blend: normal;
  --label-offset: '14px';
  --label-indent: '0px';
  --label-font: '12.6px monospace';
}

18. For Vue-specific implementation and further examples, refer to the documentation provided in the downloadable zip file.