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

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

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"));

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)

PreviousLoad Spatial Data NextCartogram

Last updated 4 years ago

hashtag1. Natural Breaks

hashtagnatural_breaks()

hashtagExamples

hashtagget_viewport()

hashtag2. Quantile Breaks

hashtagquantile_breaks()

hashtag3. Percentile Breaks

hashtagquantile_breaks()

hashtag4. Hinge Box Breaks

hashtaghinge15_breaks()

hashtaghinge30_breaks()

hashtag5. Standard Deviation Breaks

hashtagstddev_breaks()

1. Natural Breaks

natural_breaks()

Examples

get_viewport()

2. Quantile Breaks

quantile_breaks()

3. Percentile Breaks

quantile_breaks()

4. Hinge Box Breaks

hinge15_breaks()

hinge30_breaks()

5. Standard Deviation Breaks

stddev_breaks()