JavaScript temperature anomaly chart

Learn how to use high-performance JS charts to create JS temperature anomaly charts that can be used for scientific research on unusual weather and temperature.

Hello!

In this article we will create a temperature anomaly chart.

For this example we will use the LightningCharts JS library, specifically the XY chart. For those interested in the technical details, here are some characteristics of an XY chart  :

1. This type of chart only works with two axes, X and Y.
2. It allows us to position data points in the graph as coordinates.
3. XY charts are an excellent tool for measuring and reading temperature anomalies.
4. An anomaly is a change from a reference or average value over an extended period of time.
5. Positive values ​​indicate warmer temperatures, while negative values ​​indicate cooler temperatures.

The main uses of temperature anomaly maps

• Climate monitoring: Temperature anomaly maps help monitor changes in temperature patterns over time, providing insights into climate trends and overall climate conditions. 

• Climate research: Temperature anomaly maps have scientific uses in studying climate dynamics, identifying climate drivers, and studying the impact of natural and anthropogenic factors on temperature changes. 
• Weather Forecasting: In meteorology, temperature anomaly maps are used to predict weather patterns by identifying areas of unusually warm or cold weather, aiding in more accurate short-term weather forecasts. 
• Environmental analysis: Temperature anomalies can affect ecosystems and environmental systems, so temperature anomaly charts are valuable for analyzing the effects of temperature changes on vegetation, wildlife, and ocean currents.

Let's start implementing it.

Template settings

1. Please download the following template (.ZIP) where you will find all the files you need for your project and for following this tutorial. JavaScript temperature anomaly chart project template .

2. After downloading the project, open it in Visual Studio and visualize the following file tree:

3. Now, open a new terminal and run the command in the NodeJS project as usual NPM install. For more information on installing NodeJS , see this article.

That's all it takes to set up the template. Now let's write the code.

chart.ts

In this file we will have all the logic we need to create charts, configure animations and format data.

1. Import JSON data:

import data from './data.json'

postscript. If you are new to JSON data, I recommend this  guide to modeling JSON data .

2. Declare lcjs  to refer to our constant @arction/lcjs library.

3. Extract the required classes from it lcjs.

const lcjs = require('@arction/lcjs')
const { lightningChart, AxisTickStrategies, UIElementBuilders, UIOrigins, ImageFill, emptyLine, ImageFitMode, emptyFill, Themes } = lcjs

4. Create a chart object:

const chart = lightningChart()
    .ChartXY({
        theme: Themes.darkLime,
    })
    .setTitle('')

• setTitle: The text that will be displayed as the top title in the dashboard.
• Theme:The LightningChart JS library has a set of default implementations that can be configured by Themes.  The color theme of a component must be specified at creation time and cannot be changed later.

5. Get the Y axis:

const axisY1 = chart.getDefaultAxisY().setTitle('Atmospheric Carbon Dioxide (ppm)')

这getDefaultAxisYThe Y-axis can be accessed,  getDefaultAxisXthe same is true for the X-axis ( ).

Once we have access to it, we can add UI properties such as a title. AxisY1 corresponds to the meaning line in the chart:

6. Create the main Y axis:

const axisY2 = chart
    .addAxisY({
        opposite: true,
    })
    .setTitle('Temperature Anomaly Index (°C)')
    // Hide tick grid-lines from second Y axis.
    .setTickStrategy(AxisTickStrategies.Numeric, (ticks) =>
        ticks
            .setMinorTickStyle((minor) => minor.setGridStrokeStyle(emptyLine))
            .setMajorTickStyle((major) => major.setGridStrokeStyle(emptyLine)),
    )

 

A scale strategy defines the positioning and formatting logic for axis scales and the style of the scales created. The numeric property corresponds to the numeric value to be displayed on the Y-axis.

For XY, the ticks will be empty rows since we don't need to show every tick in the chart:

major.setGridStrokeStyle((solidLine) => solidLine.setThickness(500))),

7. X axis:

const axisX = chart.getDefaultAxisX().setTickStrategy(AxisTickStrategies.DateTime)

 As you can see, the X-axis has a datetime strategy because we need to display the data by date:

 

 8. Use JSON data:

const { temperature, co2 } = data

//code stored in "data.json"
{
    "temperature":[-0.16,-0.08,-0.1,-0.17,-0.28,-0.33,-0.31,-0.36,-0.17,-0.1,-0.35,-0.22,-0.27,-0.31,-0.3,-0.23,-0.11,-0.11,-0.27,-0.18,-0.08,-0.16,-0.28,-0.37,-0.47,-0.26,-0.22,-0.39,-0.43,-0.49,-0.44,-0.44,-0.36,-0.35,-0.16,-0.15,-0.36,-0.46,-0.3,-0.28,-0.28,-0.19,-0.29,-0.27,-0.27,-0.22,-0.11,-0.22,-0.2,-0.36,-0.16,-0.1,-0.16,-0.29,-0.13,-0.2,-0.15,-0.03,0,-0.02,0.13,0.19,0.07,0.09,0.2,0.09,-0.07,-0.03,-0.11,-0.11,-0.17,-0.07,0.01,0.08,-0.13,-0.14,-0.19,0.05,0.06,0.03,-0.03,0.06,0.03,0.05,-0.2,-0.11,-0.06,-0.02,-0.08,0.05,0.03,-0.08,0.01,0.16,-0.07,-0.01,-0.1,0.18,0.07,0.16,0.26,0.32,0.14,0.31,0.16,0.12,0.18,0.32,0.39,0.27,0.45,0.4,0.22,0.23,0.32,0.45,0.33,0.46,0.61,0.38,0.39,0.54,0.63,0.62,0.53,0.68,0.64,0.66,0.54,0.66,0.72,0.61,0.65,0.68,0.74,0.9,1.01,0.92,0.85,0.98,1.02],
    "co2":[285.2,285.1,285,285,284.9,285.1,285.4,285.6,285.9,286.1,286.4,286.6,286.7,286.8,286.9,287.1,287.2,287.3,287.4,287.5,287.7,287.9,288,288.2,288.4,288.6,288.7,288.9,289.5,290.1,290.8,291.4,292,292.5,292.9,293.3,293.8,294,294.1,294.2,294.4,294.6,294.8,294.7,294.8,294.8,294.9,294.9,294.9,295.3,295.7,296.2,296.6,297,297.5,298,298.4,298.8,299.3,299.7,300.1,300.6,301,301.3,301.4,301.6,302,302.4,302.8,303,303.4,303.7,304.1,304.5,304.9,305.3,305.8,306.2,306.6,307.2,307.5,308,308.3,308.9,309.3,309.7,310.1,310.6,311,311.2,311.3,311,310.7,310.5,310.2,310.3,310.3,310.4,310.5,310.9,311.3,311.8,312.2,312.6,313.2,313.7,314.3,314.8,315.34,316.18,317.07,317.73,318.43,319.08,319.65,320.23,321.59,322.31,323.04,324.23,325.54,326.42,327.45,329.43,330.21,331.36,331.92,333.73,335.42,337.1,338.99,340.36,341.57,342.53,344.24,345.72,347.15,348.93,351.47,353.15,354.29]
  }

 9. Add values ​​to the atmospheric carbon dioxide line:

const carbonDioxideSeries = chart
    .addLineSeries({
        yAxis: axisY1,
    })
    .setName('Atmospheric Carbon Dioxide (ppm)')
    // Data set contains PPM measurement values only. First measurement is from year 1880, and each consecutive measurement is 1 year after previous.
    .add(
        co2.map((ppm, i) => ({
            y: ppm,
            x: new Date(1880 + i, 0, 1, 0, 0, 0, 0).getTime(),
        })),
    )

As you can see, a line series has been added to the Y1 axis. The name is set to Series and the data is mapped from the CO2 array object in the JSON data. We don't have date values, so just add 1 year in a row starting from 1880 to create an unbroken line.

10. Add legend box:

// Add legend.
const legend = chart.addLegendBox(undefined, { x: axisX, y: axisY1 }).add(chart)
.setOrigin(UIOrigins.LeftTop)
.setMargin(4)
const positionLegendOnAxes = () => legend.setPosition({ x: axisX.getInterval().start, y: axisY1.getInterval().end })
positionLegendOnAxes()

 

Add legendboxto the meaning line (Y-axis) and a unique X-axis.

•  setOrigin: Set the position origin of this UiElement. 
• setMargin: Sets the margins around the object in pixels. 
• setPosition: Sets the position of this UiElement relative to its origin. 
• getInterval: Get the currently applied coordinate axis tick interval.

npm start

To initialize the chart, open a new terminal and run the command npm start. You will see the localhost path. Click on it and interact with the chart on your browser.

Here you can see the final graph:

in conclusion

In this article, we have created an implementation of XY chart in a very simple way. To generate an XY chart we just need to use this charXY()method.

In this example we used  the default values ​​from the LC JS library, but in your case you just need an object of type JSON with the desired value.

Technically, this process should work as long as you use two arrays. Almost all code development is focused on chart customization, and the process of loading data is easy to understand.

Another important point is the use of theme directories, which allow us to generate fairly complex-looking charts without resorting to external CSS classes.

There is no doubt that LC JS helps in performing the best work in less execution time.