Continuous

Binning is the process of classifying a body of data into discrete breakpoints, or bins, to more easily understand and digest the data. Many online maps utilize unclassified scales -- continuous color gradients -- but we prefer and provide tools for a robust set of binning strategies.

You can specify binning strategy and number of bins for each of your variables in map-config.js by setting the binning and numberOfBins parameters. For a more in-depth look at binning strategies, refer to jsGeoDa docs.

Binning Modes

Here are the different binning modes available in WebGeoDa:

Natural Breaks

This non-linear algorithm identifies natural groupings of values that highlight more intuitive breakpoints.

{
    // some variable
    binning: 'naturalBreaks',
    numberOfBins:5, // 3 - 9
}

Quantiles

Quantile breaks create bins based on an equal number of entries in numerical order based on the given number of bins.

{
    // some variable
    binning: 'quantileBreaks',
    numberOfBins:5, // 3 - 9
}

Percentiles

Percentile breaks identify bins at the 1% lowest percentile, 10th percentile, 50th percentile (median), 90th percentile, and 99% highest perceentile.

{
    // some variable
    binning: 'percentileBreaks'
}

Standard Deviations

Standard deviations are calculated from your given variable based on .... Standard Deviation breaks fall on less than -2 standard deviations, -1 to -2 standard deviations, 0 to -1 standard deviations, 0 to +1 standard deviations, +1 to +2 standard deviations and greater than +2 standard deviations.

{
    // some variable
    binning: 'stddev_breaks'
}

Hinge Breaks

15/30

{
    // some variable
    binning: 'hingeBreaks15' // alternatively 'hingeBreaks30'
}

Custom, Fixed Scales

If you want to provide a custom or fixed binning scale for your data, such as a particular equal interval (eg. 5, 10, 15, 20, 25, etc.), you can provide a fixedScale parameter in your variable:

{
    variable: 'Percent Vaccinated',
    fixedScale: [20, 30, 40, 50, 60, 70],
    colorScale: colors.colorBrewer.Greens
}