j
j
jsGeoDa
Search
K

# 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.

### natural_breaks()

Array naturalBreaks(Number k, Array val)

## Examples

Node.js
React
const jsgeoda = require('jsgeoda');
const fs = require('fs');
// create jsgeoda instance
const geoda = await jsgeoda.New();
// get data
const hr60 = geoda.getCol(nat, 'HR60');
// natural breaks
const brks = geoda.naturalBreaks(5, hr60);
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";
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
fetch(DATA_URL)
.then((res) => res.arrayBuffer())
.then((data) => {
// load geojson in jsgeoda, an unique id (string) will be returned for further usage
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) => {
});
}
// 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"));
Try it yourself in the playground (jsgeoda + deck.gl)

### get_viewport()

jsgeoda provides some utility functions for working with deck.gl or mapbox.gl, such as:
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()

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()

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.

### hinge15_breaks()

Array hinge15Breaks(Array val)

### hinge30_breaks()

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()

Array standardDeviationBreaks(Array val)