# 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)
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://xunli.gitbook.io/jsgeoda/choropleth_map/1.-hello-jsgeoda.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.