Precise Precipitation Visualizations in JavaScript – RainSPOT.js

RainSPOTjs is a JavaScript library that generates circular precipitation visualizations using SVG or Canvas elements. It was designed to reproduce the rainSPOT visualization format developed by meteoblue.com, representing localized precipitation data in an accurate, circular display.

This library transforms precipitation data strings into visual representations through either SVG or Canvas rendering. It interprets numerical data strings to display precipitation intensity using a color-coded system:

• Light blue indicates precipitation between 0.2mm – 1.5mm
• Medium blue shows rainfall of 1.5mm – 5mm
• Dark blue represents precipitation exceeding 5mm
• Green displays very light precipitation (0.02mm – 0.2mm)
• Transparent sections indicate no precipitation

The visualization includes configurable range rings and crosshairs to enhance data readability and location precision.

Use Cases:

• Weather Dashboards: Embed rainSPOT visualizations to give users clear insights into rainfall patterns and intensities for specific locations.
• Agriculture Applications: Help farmers track localized precipitation data, aiding in planning irrigation and harvesting schedules.
• Travel and Event Planning: Integrate rainSPOTs into apps for travelers or event organizers to visualize potential weather impacts in specific areas.
• Meteorology Platforms: Include rainSPOT graphics in tools and platforms aimed at forecasting and analyzing precipitation trends.
• Research and Analysis: Utilize the library in research projects to analyze and present precipitation data in a clear and concise manner.

How to use it:

1. Install RainSPOTjs with NPM.

# NPM
$ npm install rainspotjs

2. Import the necessary modules into your project.

import { create_rainSPOT_SVG } from './dist/rainSPOT.svg.min.js';
import { create_rainSPOT_Canvas } from './dist/rainSPOT.canvas.min.js';

3. Render Basic rainSPOT using SVG.

<div id="svg-demo" class="rainspot-container"></div>

const example = document.getElementById('svg-demo');
// This data string, provided by meteoblue, encodes the precipitation information.
const myData = '3222333223222322222222222222222232222223339222232';
let instance = create_rainSPOT_SVG({inputString: myData, options: myOptions});
example.appendChild(instance);

3. Similar to the SVG implementation, you can generate a rainSPOT using Canvas.

<div id="canvas-demo" class="rainspot-container"></div>

const example = document.getElementById('canvas-demo');
// This data string, provided by meteoblue, encodes the precipitation information.
const myData = '3222333223222322222222222222222232222223339222232';
let instance = create_rainSPOT_Canvas({inputString: myData, options: myOptions});
example.appendChild(instance);

4. Customize the visualization with the following options.

{
  canvasSize: 140,
  useCSS: false,
  colorPalette: {
    0: '#fff6', // transparent
    1: '#13eefc', // light blue 0.2mm - 1.5mm
    2: '#3aaadc', // blue 1.5mm - 5mm
    3: '#1774c4', // dark blue > 5mm
    9: '#22d690' // green 0.02mm - 02.mm
  },
  rangeRings: {
    enabled: true,
    colors: {
      1: '#000',
      3: '#000',
      5: '#000',
      7: '#0000'
    },
    strokeWidth: 2
  },
  crossHairs: {
    enabled: true,
    style: 'brackets',
    color: '#000',
    strokeWidth: 2
  }
};