# Basic Mapping

Common map classifications include the **Quantile Map**, **Natural Breaks Map**, and **Equal Intervals Map**. Specialized classifications that are designed to bring out extreme values include the **Percentile Map**, **Box Map** (with two options for the hinge), and the **Standard Deviation Map**. The methods of map classification calculate a corresponding breakpoint list for a selected variable. For more information about the map classification, please read <http://geodacenter.github.io/workbook/6a_local_auto/lab6a.html>.

## 1. Natural Breaks

Natural Breaks calculates a list of breakpoints based on the fracture principle of maximum similarity within a group.&#x20;

### natural\_breaks()

```sql
Array naturalBreaks(Number k, Array val)
```

## Examples

{% tabs %}
{% tab title="Node.js" %}

```javascript
const jsgeoda = require('jsgeoda');
const fs = require('fs');

// load data
const data = fs.readFileSync('./data/natregimes.geojson').buffer;

// create jsgeoda instance
const geoda = await jsgeoda.New();

// load geojson in jsgeoda
const nat = geoda.readGeoJSON(data);

// get data 
const hr60 = geoda.getCol(nat, 'HR60');

// natural breaks
const brks = geoda.naturalBreaks(5, hr60);
```

{% endtab %}

{% tab title="React" %}

```javascript
import React, { Component } from "react";
import ReactDOM from "react-dom";
import DeckGL from "@deck.gl/react";
import { GeoJsonLayer } from "@deck.gl/layers";
import { StaticMap } from "react-map-gl";
import colorbrewer from "colorbrewer";
import jsgeoda from "jsgeoda";

// Set your mapbox access token here
const MAPBOX_TOKEN =
  "pk.eyJ1Ijoic21peWFrYXdhIiwiYSI6ImNqcGM0d3U4bTB6dWwzcW04ZHRsbHl0ZWoifQ.X9cvdajtPbs9JDMG-CMDsA";

// The geojson data
const DATA_URL = `https://webgeoda.github.io/data/natregimes.geojson`;

// Viewport settings
const INITIAL_VIEW_STATE = {
  longitude: -100.4,
  latitude: 38.74,
  zoom: 2.5,
  maxZoom: 20
};

class App extends Component {
  constructor() {
    super();
    this.state = {
      mapId: "",
      layer: null
    };
  }

  // load spatial data when mount this component
  loadSpatialData(geoda) {
    fetch(DATA_URL)
      .then((res) => res.arrayBuffer())
      .then((data) => {
        // load geojson in jsgeoda, an unique id (string) will be returned for further usage
        const nat = geoda.readGeoJSON(data);
        const hr60 = geoda.getCol(nat, "HR60");
        const cb = geoda.customBreaks(nat, "natural_breaks", hr60, 5);

        const layer = new GeoJsonLayer({
          id: "GeoJsonLayer",
          data: DATA_URL,
          filled: true,
          getFillColor: (f) => this.getFillColor(f, cb.breaks),
          stroked: true,
          pickable: true
        });

        this.setState({
          mapId: nat,
          layer: layer
        });
      });
  }

  componentDidMount() {
    // jsgeoda.New() function will create an instance from WASM
    jsgeoda.New().then((geoda) => {
      this.loadSpatialData(geoda);
    });
  }

  // Determine which color for which geometry
  getFillColor(f, breaks) {
    for (let i = 1; i < breaks.length; ++i) {
      if (f.properties.HR60 < breaks[i]) {
        return colorbrewer.YlOrBr[breaks.length - 1][i - 1]
          .match(/[0-9a-f]{2}/g)
          .map((x) => parseInt(x, 16));
      }
    }
  }

  render() {
    return (
      <div>
        <DeckGL
          initialViewState={INITIAL_VIEW_STATE}
          layers={[this.state.layer]}
          controller={true}
          getTooltip={({ object }) =>
            object && `${object.properties.NAME}: ${object.properties.HR60}`
          }
        >
          <StaticMap mapboxApiAccessToken={MAPBOX_TOKEN} />
        </DeckGL>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

```

{% endtab %}
{% endtabs %}

**Try it yourself in the playground (jsgeoda + deck.gl)**

{% embed url="<https://codesandbox.io/s/3-basic-mapping-tltcz?from-embed>" %}

### get\_viewport()

jsgeoda provides some utility functions for working with deck.gl or mapbox.gl, such as:

```sql
function getViewport(String mapUid, Number screenWidth, Number screenHeight)
```

## 2. Quantile Breaks

Quantile Breaks is based on sorted values for a variable that are then grouped into bins that each have the same number of observations, the so-called quantiles.

### quantile\_breaks()

```sql
Array quantileBreaks(Number k, Array val)
```

## **3.** Percentile Breaks

Percentile Breaks divides the data into six ranges: the lowest 1%, 1-10%, 10-50%, 50-90%, 90-99% and the top 1%.

### quantile\_breaks()

```sql
Array percentileBreaks(Number k, Array val)
```

## 4. Hinge Box Breaks

Hinge Box Breaks calculates a list of breakpoints, including the top, bottom, median, and two quartiles of the data. The hinge values can be 1.5 or 3.0.&#x20;

### hinge15\_breaks()

```sql
Array hinge15Breaks(Array val)
```

### hinge30\_breaks()

```sql
Array hinge30Breaks(Array val)
```

## 5. Standard Deviation Breaks

Standard Deviation Breaks calculates the number of standard deviational units of the range from lowest to highest, returning a breakpoint list.

### stddev\_breaks()

```sql
Array standardDeviationBreaks(Array val)
```