Climatogramme.js

Simple online tool for drawing climatograms.

What is climatogram

Climatogram or climate chart is type of chart, showing the precipitation and mean temperature month by month. It's widely used by people involved in earth sciences. It looks like this:

About

This repository contains two main modules:

climatogramme.js

Function for drawing climatograms. It get single argument which is an object containing settings and data:

let climatogramme = new Climatogramme(options)

All options with defaults are listed below:

{
	el: null, // containing element
	width: 400, // width of the generated image
	height: 600, // height of the generated image
	primaryTitle: '', // Title of the climatogram
	marginTop: 40,
	marginLeft: 40,
	marginRight: 40,
	marginBottom: 40,
	distanceBars: 0.1, // what portion of bars width to be set as distance
	precipitationBufferUp: 20, // minimum units to be set empty above precipitation bars
	temperatureBufferUp: 20, // minimum units to be set empty below temperature lines
	temperatureBufferDown: 10, // minimum units to be set empty above temperature lines
	labelTemperature: '°C',
	labelPrecipitation: 'mm',
	labelMeanTemperature: 'mean t',
	labelTotalPrecipitation: 'precipitation',
	labelAplitudeTemperature: 't aplitude',
	data: null, // data, see below
	whiteBackground: true // set white or transparent background
}

And data format:

{
    precipitation: [/* twelve month of data */],
    meanTemperature: [/* twelve month of data */],
}

Climatogramme UI

Interface to build climatograms using climatogramme.js. Ability to save current data in the URL and downloading climatogram as SVG or PNG. See the demos below.

Browsers

Tested in:

• FF 44
• GC 47

Demo

Empty demo | Demo with data

Licence

MIT

Contributions

Thank you in advance!