The first module we've added is a theming module, designed to take a vector of values and turn it into Leaflet styling objects for each element in the vector.
The API is pretty simple. Just run
var theme = new Theme(config, data);
var style = theme.getStyle(val);
to get a Leaflet theme JSON object suitable for calling layer.getStyle(style). You can also call
var scaledVal = theme.getScaledVal(val);
to get the actual scaled value if you don't want a style object.
All the challenge is in the config object for the theme. Here is a simple example that maps the min/max values in the
data array to a linear scale between two colors (using d3).
opacity sets the opacity of the shapes,
weight is the thickness of the outside borders of the shapes, and
outlineColor is the color of the border. These other attributes can be added to all themes, although they are often omitted on this page for brevity.
opacity: 9weight: 0outlineColor: '#000000'scaleType: 'linear'interpolate: '#fff5eb' '#7f2704'
You can use
interpolate: [500, 5000] instead of using colors if you want the outcome to be integers instead of colors. This can be used, e.g. to determine the radius of circles in the map. The resulting style objects will not work in Leaflet - just use
NaN values and undefined values will be themed as transparent.
You can also do a 3-way interpolation, for instance so that the number zero is always set to a certain color, with the middleValue attribute.
scaleType: 'linear'middleValue: 0interpolate: '#fff5eb' '#ffffff' '#7f2704'
You can also do a linear (continuous) interpolation with a color scheme, which uses the first and last colors from the colorbrewer color scheme to interpolate between.
scaleType: 'linear'colorScheme: 'YlGn'
Manual breaks allows the user to specify the breakpoints. In this case you don't have to pass
data into the theme as the user has full control of the theme. The color scheme is again from color brewer and the number of bins (colors) will be one greater than the number of breaks. Note that most colorbrewer color schemes have versions for about 3 to 9 colors, so the number of breaks should generally be between 2 and 8 (whatever colorbrewer has specified for a given color scheme should work).
scaleType: 'manual'breaks: 4 8 20 40colorScheme: 'YlGn'
Categorical theming can be used instead of the interpolate attribute by using the categorical theming instead. In this case, values can be non-numeric, and are mapped to colors by the configuration. A defaultColor attribute can be added and will be applied to any values which don't exist in the theme. A full spec might look like this.
scaleType: 'categorical'defaultColor: '#ABCDEF'categories:'Office': '#ff9999''Hotel': '#ff9933''Retail': '#FF0000''Residential': '#FFFF00''Industrial': '#A020F0''School': '#0000FF''Vacant': '#FFFFFF''Parking': '#666666'
Similar to categorical theming, but maps unique values to the random d3 color scheme (d3.category20). This is an easy way to map all possible values that actually occur in the data to discrete color.
Quantile themed maps map each quantile of the input array to a color scheme from colorbrewer. You need to specify both the name of the color scheme (
colorScheme) and the number of bins (
numBins) to use. For quantile theming, the number of bins is equal to the number of quantiles that will be given separate colors.
scaleType: 'quantile'colorScheme: 'YlGn'numBins: 7
For natural clustering you can use jenks. This actually uses the simple-statistics method ckmeans, but I figure most people looking for it will look for jenks.
scaleType: 'jenks'numBins: 5colorScheme: 'YlGn'