morganherlocker / geocolor Goto Github PK

style geojson based on data classifications

License: MIT License

CSS 4.35% JavaScript 93.72% HTML 1.93%

geocolor's Introduction

Geocolor

Geocolor is both a javascript module and a web app. The web app makes it easy to demo the functionality or use to create quick visualizations without having to code. It can be found at geocolor.io.

Geocolor classifies data contained in geojson properties, and assigns color values based on the simplestyle-spec. This means that when your geojson is rendered in github, gists, mapbox, or other simplestyle-spec compliant renderers, you will get nice styles that help to visualize your data.

Install

npm install geocolor

Colors

The color gradient is defined by simply passing an array of colors with as many stops as you want.

Classification

Curently supported classifications:

equal intervals
quantiles
jenks
custom
random
all

Example

var geocolor = require('geocolor')

var cities = {
  // [point data](https://github.com/morganherlocker/geocolor/blob/master/test/in/cities.geojson)
}

var z = 'Population',
    numberOfBreaks = 5,
    colors = ['green', 'yellow', 'red']

// jenks
geoJenks = geocolor.jenks(cities, z, numberOfBreaks, colors)
console.log(geoJenks)

// quantiles
geoQuantiles = geocolor.quantiles(cities, z, numberOfBreaks, colors)
console.log(geoQuantiles)

// equal intervals
geoEqualIntervals = geocolor.equalIntervals(cities, z, numberOfBreaks, colors)
console.log(geoEqualIntervals)

// custom breaks
geoCustom = geocolor.custom(cities, z, [0,200000,300000,400000,500000,800000,1000000,1000000000], colors)
console.log(geoCustom)

// random colors
geoRandom = geocolor.random(geo, ['green', 'yellow', 'red', 'blue', 'purple', 'orange', 'pink'])
console.log(geoRandom)

// all (assigns the same style to all features)
var style = {
  'stroke': 'blue',
  'fill-opacity': .7,
  'fill': 'green'
}
geoAll = geocolor.all(geo, style)
console.log(geoRandom)

You can also pass in a custom style object to any of the functions that will applied to all features as an optional parameter. The following will perform a quantile white to red ramp, will set the stroke to blue, and will set the fill opacity to .4.

var geocolor = require('geocolor')

var cities = {
  // [point data](https://github.com/morganherlocker/geocolor/blob/master/test/in/cities.geojson)
}

var z = 'Population',
    numberOfBreaks = 15,
    colors = ['white', 'red']

var style = {
  'stroke': 'blue',
  'fill-opacity': .4
}

// quantiles
geoQuantiles = geocolor.quantiles(cities, z, numberOfBreaks, colors, style)
console.log(geoQuantiles)

Dev

Running tests:

npm test

More Examples

geocolor's People

Contributors

Stargazers

Watchers

geocolor's Issues

help tips

Add help tips for each of the controls

cli

simple cli for piping in geojson data and piping out styled data

share button

share a fullscreen map with a link to a bl.ock, sort of like the one on geojson.io

geocolor.io

setup a domain for the geocolor app

Styles controls

Allow styles to be controlled by either buttons/inputs or as raw text.

custom breaks

save to gist

polygon fills

zipped shapefiles

Allow zipped shapefiles in geocolor.io via https://github.com/calvinmetcalf/shapefile-js

legend in geocolor demo

load from gist

add title to legend attributes

github authentication

Useful for gist access

auto-populate "z field" as dropdown

fullscreen

This should be a button, and may be the default for links, or an option in the url params. This will make it easy to share visualizations with non technical users.

random colors

gist url parameter

make linkable gists with url params:

geocolor.io/?gist=0020303043

Demo

equal number of feaures option

codemirror or ace editor for styles

geocolor link dead

Hello @morganherlocker !

I noticed the http://geocolor.io/ link is no longer propagating, probably not a priority for you right now but I though you might want to know!

Thanks!

The input file:
heatmap.geojson.zip
The code:

var geocolor = require('geocolor');

var fs = require('fs');

try {
  var heatmap = JSON.parse(fs.readFileSync('./heatmap.geojson'));
} catch (err) {
  console.log('err',err);
}

var z = 'stars',
    numberOfBreaks = 5,
    colors = ['red', 'blue', 'white'];

// jenks
var geoJenks = geocolor.jenks(heatmap, z, numberOfBreaks, colors);

fs.writeFileSync('./jenks.geojson', JSON.stringify(geoJenks));

My output Jenks.json:
jenks.geojson.zip

The share: http://bl.ocks.org/anonymous/raw/39c4ed96bf428cc67344